Torihaji's Growth Diary

Little by little, no hurry.

Rails7 x heroku x Active Storage において本番開発で画像表示に差異が出る。

はじめに

こんにちは。torihaziです。

苛立っています。

エラー解決できません。

これ書いている今も解決していません。

これから色々試します。

構成は気にしていません。ltg.

追記 : 記事書き終わって無事解決

現状

現在、ローカル環境で ecサイトを制作しています。

ローカルでは画像が表示されたのに対し、

デプロイ後の本番環境では画像が表示されません。

開発環境

本番環境

お馴染みのよく見るアイコンですね。

大抵こういう時は画像のパスが間違っていることがほとんどです。のはず。

ということで色々昨日からいじってました。

やったこと1: 拡張子の変更(jpegから jpg)

次の記事を参考にしました。

qiita.com

確かに私のものは jpegとなっていました。

そのためそれを変更しました。

私はseedでデプロイ環境にデータを入れているのでコードを修正し

app/assets/images配下にあるファイル名も "jpg"に変更しました。

50.times do 
  product = Product.create!(name: Faker::Commerce.product_name,
                            price: (Faker::Commerce.price * 100).floor(-2),
                            description: 'テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト')
  product.image.attach(
    io: File.open(Rails.root.join('app/assets/images/450x300.jpg')),
    filename: '450x300.jpg'
  )
end

しかし結果は変わらず。検証ツールを開いてみても"404 not found"でした。

やってみたこと2 : AWS S3を使用する

調べてみると、本番環境では クラウドストレージを使用するのが良いそう。

理由はherokuのローカルストレージは一時的なもので永続的に保存はされないから。

ChatGPTもそう言ってました。

config.active_storage.serviceが:localに設定されているということは、
アップロードされた画像はローカルのストレージに保存されています。
そのため、Heroku上の本番環境では画像が表示されない可能性が高いです。
Herokuのファイルシステムはephemeral(一時的な)なので、
アプリケーションのディスクに保存されたファイルは永続的ではありません。

ということで S3路線に変更。

次の記事を参考にしました。

qiita.com

pikawaka.com

gemは次を追加して bundle install

# env
gem 'dotenv-rails'

# aws storage
gem 'aws-sdk-s3', require: false

.gitignore に/.envとすることを忘れずに。

storage.ymlも.envも変更し、git push heroku ブランチ名:main

成功したが、not found

本当に S3と連携されているのか。

heroku configでアクセスキー設定を確認

表示されていた。

よくよく見てみると、ファイルの保存先URL(上画像右下)がactive_storage。

AWSのコンソールにも ファイルアップロードされている痕跡なし。

ということでherokuのdbをリセット

heroku pg:reset DATABASEした後にアプリ名。

その後に heroku run rails db:migrate

その後に heroku run rails db:seed

ログにもS3 Storage が出ているし、多分成功している。

S3に連携されていることを確認

さぁアプリに戻ってリロード。緊張の瞬間。

狂喜乱舞。成功。

これで贅沢なゴムバッグが買えるようになりました。

終わりに

かなり辛かったです。

言われたこと、書いていることををしているのに違う結果になる。

それとネットには誤った情報が溢れているなと感じました。

例えば下記。

config/environments/production.rb の config.assets.compile = false の値を trueにする。

これはダメだそうです。アプリの動作に影響を及ぼすから。

参考記事にも詳細な説明が載っています。

しかし、ネットのいくつかのサイトには そうやるのが正解です、と

胸を張って堂々と言っている記事もありました。

情報発信者として自身も学習を怠らず、努力を続けていくべきだと思いました。

兎にも角にもうまくいってよかったです。

みなさんも デプロイする際はストレージに気をつけて、学習頑張ってください。

僕も頑張ります。