[Rails6] Heroku上でCarrierwave(Rmagick) + fogを使いAWS S3にファイルをアップロードする #AWS

最初に

HerokuでRailサイトを作る時ストレージを別途用意しなければなりません。
Herokuでは時間が立つとアップロードした画像ファイルなどが消えてしまうので
今回は対応策としてAWS S３を使います。
S3とAWSのアカウントは作成した前提ですのでまだ済んでいない方は以下を参照ください

S3の設定

AWSアカウントの作成方法

環境

Ruby 2.6.6
Rails 6.0.3.6
AWS S3の設定済
Rmagick設定済

Gem

Gemは以下を使います

gem "rmagick"
gem "carrierwave"
gem "fog-aws"

モデル作成

画像をアップロードするモデルを作ります。
今回はユーザーに持たせるプロフィール画像を想定して作ります。

$ rails g model User name:string image:string

$ rails db:migrate

Uploaderの設定

Uploaderクラスを作成します。 (Imageの所は好きに置き換えてください)

rails g uploader Image

作成されたらimage_uploder.rbに以下を追加します。

app/uploaders/image_uploader.rb

include CarrierWave::RMagick

  if Rails.env.production?    
    storage :fog　　　　　　　　# 本番時にS3にファイルを保存する
  else
    storage :file             # 開発・テスト時にはローカルにファイルを保存する
  end

モデルとImageUploaderを関連付けるためにモデルに以下を追加します

app/models/user.rb

class User < ApplicationRecord
  mount_uploader :image, ImageUploader
end

CarrierWaveの設定

Herokuで画像の保存先をAmazon S3に保存できるように設定する

config/initializers/carrierwave.rb

require 'carrierwave/storage/abstract'
require 'carrierwave/storage/file'
require 'carrierwave/storage/fog'

CarrierWave.configure do |config|
  if Rails.env.production?
    config.fog_provider = 'fog/aws'
    config.fog_credentials = {
      provider: 'AWS',
      aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'], #awsのIAMのアクセスキー
      aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],　#awsのIAMのシークレットアクセスキー
      region: 'ap-northeast-1' #バケットの作成で設定した地域(東京で設定した場合は左と一緒)
    }
    config.fog_directory = "ENV['AWS_BUCKET_NAME']" #バケット名
    config.cache_storage = :fog     # 本番時はS3にファイルを保存する
  else
    config.storage = :file          # 開発・テスト時はローカルにファイルを保存する
  end

end

Herokuへの環境変数登録

$ heroku config:set AWS_ACCESS_KEY_ID="IAMのAccess key IDを入力"
$ heroku config:set AWS_SECRET_ACCESS_KEY="IAMのSecret access keyを入力"
$ heroku config:set AWS_S3_BUCKET="S3のバケット名を入力"

Herokuの環境変数の確認方法

$ heroku config

以上でHerokuにデプロイ後、画像を投稿してS3にバケット保存できました。
これで反映されない時はIAMのアクセスキーを再度発行して改めて環境変数を設定すると上手くいく場合もあるようです。

また今回は設定に1日中かかり、かなり試行錯誤して上手く実装することができました。

たくさん記事を見ましたので上手くいかない方は私が参照した記事も合わせて確認していただければと思います。