Help us understand the problem. What is going on with this article?

Herokuで、Rails+carrierwave/fogを使ってAWS S3にファイルをアップロードする

More than 1 year has passed since last update.

はじめに

HerokuでRailsサイトを作る際、別途用意しなければいけないのがストレージ。
Herokuをそのまま利用すると、時間が経つと消えてしまいます。
その対応策として、AWS S3を利用する際の設定方法をサンプルプロジェクトを作って、手順まとめておきます。

環境

Ruby 2.5.3
Rails 5.2.2
AWS S3の設定は完了済み

プロジェクトの作成

rails new sample_asws3

プロジェクトが作成できたら、Gemfileを修正します

◆修正

gem 'sqlite3', '~> 1.3.6'

※sqlite3の問題があるので、一緒に修正

◆追加

gem "carrierwave"
gem "fog-aws"

アップロード用のモデル作成

サンプルなので簡単なモデルのみ

rails g scaffold Item name:string image:string
rake db:create
rake db:migrate

http://localhost:3000/items」にアクセスして、画面が表示されればひとまずOK!

スクリーンショット 2019-03-16 13.10.15.png

CarrierWaveの設定

Uploaderクラスを追加します。名前は好きにつけてください。
※今回は、「Images」としました。

rails generate uploader Images

設定は、デフォルトでいきますが、
storageの設定だけは、「:file」から「:fog」に変更

class ImagesUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  # include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  #storage :file
  storage :fog

読み込めるようにapploication.rbに以下を追加

config/application.rb
config.autoload_paths += Dir[Rails.root.join('app', 'uploaders')]

モデルの関連づけ

app/models/item.rb
class Item < ApplicationRecord
  mount_uploader :image, ImagesUploader
end

scaffoldで作られた「image」用のフォームは、
「form.text_field」になっているので、「form.file_field」に変更

app/views/items/_form.html.erb
  <div class="field">
    <%= form.label :image %>
    <%= form.file_field :image %>
  </div>

スクリーンショット 2019-03-16 13.36.58.png

CarrierWaveの設定ファイル

新しく設定ファイルを作成します。

config/initializers/carrierwave.rb
CarrierWave.configure do |config|
  config.fog_provider = 'fog/aws'
  config.fog_directory = ENV['AWS_S3_BUCKET']
  config.fog_credentials = {
    provider:              'AWS',
    aws_access_key_id:     ENV['AWS_S3_ACCESS_KEY_ID'],
    aws_secret_access_key: ENV['AWS_S3_SECRET_ACCESS_KEY'],
    region:                ENV['AWS_S3_REGION'],
  }
  config.fog_public     = false                                                 # optional, defaults to true
  config.fog_attributes = { cache_control: "public, max-age=#{365.days.to_i}" } # optional, defaults to {}
end

キー情報など、重要な項目については、必ず環境変数を使うようにしましょう!!

キー 説明
AWS_S3_ACCESS_KEY_ID アクセスキー
AWS_S3_SECRET_ACCESS_KEY シークレットキー
AWS_S3_REGION 転送先のリージョン(us-east-1など)
AWS_S3_BUCKET 転送先のバケット名

動作確認

ファイルを選択して、登録してみます。
スクリーンショット 2019-03-16 13.38.42.png

表示部分を変更していないので、URLが表示されますが、アップロード部分はこれで完成です。

スクリーンショット 2019-03-16 13.39.44.png

画像を表示するために、ビューを変更

app/views/items/show.html.erb
<p>
  <strong>Image:</strong>
  <%= image_tag(@item.image.to_s) %>
</p>

と変更すると、画像が表示されます。

スクリーンショット 2019-03-16 13.45.25.png

以上、ありがとうございました。
ソース一式、GitHubにあげておきました。よかったらどうぞ。
 https://github.com/newburu/SampleAwss3

newburu
座右の銘は「晴笑雨笑」🔸駆け出しエンジニアさんの力になりたい。無料で楽しく!勉強/質問コミュニティを運用中(http://newburu.github.io)🔸自分のペースでゆっくりでも勉強したい方、ご連絡ください。ご協力します!
https://newburu.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away