【Rails5】Carrierwave + Fog で AWS S3 に画像をアップロードする

CarrierWave を利用することで手軽に画像アップロードをおこない、fog と連携してクラウド上にあるAWS S3へのアップロードをおこなえるようにします。ちなみに、S3 は新規登録から1年間は無料で利用できます。
前提として、Rails アプリにあらかじめ既存モデル(本記事ではArticle)があり、 AWS S3 でバケットを作成してある状態で進めていきます。

Amazon S3
https://aws.amazon.com/jp/s3/
CarrierWave
https://github.com/carrierwaveuploader/carrierwave
Fog::Aws
https://github.com/fog/fog-aws
rmagick
https://github.com/rmagick

環境はこちらです

準備

本記事で必要な gem をインストールします。RMagickは画像処理を行うライブラリで、CarrierWaveからサムネイルなどを作るときに必要になります。

Gemfile

画像保存用のカラムを追加するためのマイグレーションファイルを生成します。本記事では Article テーブルに追加します。

db/migrate/20xxxxxxxx_add_image_to_articles.rb

アップローダの作成

次のコマンドで生成されたアップローダーをそれぞれの好みで設定してください。本番環境もしくはステージング環境で s3 に送り、開発環境等では public 配下に一時的に保存します。

app/uploaders/image_uploader.rb

モデルとの紐づけ

使用するモデルに次の一行を追記して、モデルとの紐づけをおこないます。

app/models/article.rb

AWSの設定

config/initializers/carrierwave.rb を作成して、以下のように設定します。

config/initializers/carrierwave.rb

ちなみにこちらは Heroku に環境変数を入れる時のコマンドです。

ファイルのアップロード

モデル.persisted?は保存済みかどうかをチェックしてくれます。<%= f.file_field :image %> でアップロードできます。あとはお好みですが、バリデーション時も値を保持させるために <%= f.hidden_field :image_cache %> や、既存の画像を削除したい場合の <%= f.check_box :remove_image %> を追加します。

app/views/articles/_form.html.erb

ストロングパラメータの設定もしておきます

app/controllers/articles_controller.rb

画像の表示

こちらもお好みですが、もし画像がない場合は no_image.png を表示させます。その画像は app/assets/images/ などに置いておきます。

app/views/articles/show.html.erb

はい、今回は以上です!ご覧いただきありがとうございました!😆


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp