技術系ブログ

とにかく小ネタで

【rails】画像アップロード(shrine)導入からherokuでの本番環境利用(S3)まで パート4

Rails

ここからコードを書いていきます。

gemの導入

gem "aws-sdk-s3", require: false

参考:shrine/s3.md at master · shrinerb/shrine · GitHub

S3へのアクセスキーを入力

EDITOR=vim rails credentials:edit

まずはi で書けるようになります。

aws:
 access_key_id: 
 secret_access_key: 
# アクセスキーとシークレットアクセスキーはダウンロードしたcsvファイルを参照
 bucket: 
#バケットには作成したときの名前をそのまま記述
 region:
#指定したリージョンコードを書く 

指定したリージョンコード:

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/using-regions-availability-zones.html

それぞれ書いていきますが、注意があります#コメントアウトを外すのと半角スペースをしっかり使うことです。
参考:「String does not have #dig method」AWS S3とのねちっこい戦い【初心者の場合】 - Qiita 書き終わったら、escを押して:wqと打つとsaveされます。

herokuの保存先をAmazon S3に指定する

config/storage.yml

amazon:
  service: S3
  access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
  secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
  region: <%= Rails.application.credentials.dig(:aws, :region) %>
  bucket: <%= Rails.application.credentials.dig(:aws, :bucket) %>

shrine.rbの編集

config/initializers/shrine.rbに本番環境向けに追記します。

require "shrine"
require "shrine/storage/file_system"
require 'shrine/storage/s3'  # ←これ
# ↓これ
if Rails.env.production?
    s3_options = {
        access_key_id:     Rails.application.credentials.dig(:aws, :access_key_id),
        secret_access_key: Rails.application.credentials.dig(:aws, :secret_access_key),
        region:            Rails.application.credentials.dig(:aws, :region),
        bucket:            Rails.application.credentials.dig(:aws, :bucket),}
    Shrine.storages = {
        cache: Shrine::Storage::S3.new(prefix: 'cache', **s3_options),
        store: Shrine::Storage::S3.new(prefix: 'store', **s3_options)}
else
    Shrine.storages = {
        cache: Shrine::Storage::FileSystem.new("public", prefix: "uploads/cache"),
        store: Shrine::Storage::FileSystem.new("public", prefix: "uploads/store")}

end


Shrine.plugin :activerecord
Shrine.plugin :cached_attachment_data

さらに
config/enviroments/priduction.rb

#config/enviroments/priduction.rb
#42行目辺り
- config.active_storage.service = :local
+ config.active_storage.service = :amazon #amazonに変更

heroku側

heroku側にs3を設定する

$ heroku config:set S3_BUCKET=バケット名
$ heroku config:set S3_REGION=リージョン名
$ heroku config:set S3_ACCESS_KEY_ID=アクセスキー
$ heroku config:set S3_SECRET_ACCESS_KEY=シークレットキー

$ heroku config  # バケット情報が入ったか確認

次に config/environments/production.rb

#config/environments/production.rb
#19行目辺り
 config.require_master_key = true

# 26行目辺り
config.assets.js_compressor = Uglifier.new(harmony: true)

#30行目辺り
config.assets.compile = true

本番環境で config.require_master_key = trueとしたので

heroku config:set RAILS_MASTER_KEY=マスターキーをここに貼り付け
#マスターキー(config/master.keyの中身)

secret_key_base が本番環境でいるとエラがー出たらEDITOR="mate --wait" bin/rails credentials:edit

RAILS_ENV=production bin/rails assets:precompileでエラーが出ないなら成功です。 最後に

heroku run rails db:migrate

あとはいつも通りで大丈夫です。

参考:

【Rails】Herokuで画像を投稿できるようにする方法(ActiveStorage + Amazon S3) - Qiita

credentials.yml.encによるアクセスキーの管理方法 - りょうたくの技術ブログ

Heroku本番環境にて、Assetが正常に反映されない。 - Qiita

【Rails/Heroku】Precompiling assets failed. への対処【プログラミング学習170日目】 - Qiita

このブログを見てS3の設定をして高額請求をされても、 筆者は責任を負い兼ねますのであしからず。