はじめに

Rails7 で構築したアプリケーションを　Heroku にデプロイしたが画像が表示されない問題を解決していきます。
Active Storageを使用していることを前提としています。
以下、確認・修正すべきことを書いていきます。

画像をアップロードしておくストレージの設定

開発環境ではローカルストレージに保存されますが、
本番環境（今回の記事ではHeroku）では画像を保存するストレージを設定する必要があります。
これは、ググればたくさん情報が出てきます。
AWSのS3を使用する構成が簡単でしょう。
本記事ではAWSのS3を使用していきます。

`AWS`の`S3`のバケットに`CORS`の設定を追加

AMAZON S3 > バケット > sample buket name
↑ご自身で設定したバケットを開いてください。

「アクセス許可」というタブを選択してください。

スクロールしていくと
Cross-Origin Resource Sharing (CORS)の設定ができる部分が表示されます。

「編集」ボタンを押下してください。
Json形式で、許可するCORSの設定を記述します。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "https://www.sample.com"
        ],
        "ExposeHeaders": []
    }
]

上記のCORS 設定は、任意のオリジン (*) からのすべてのヘッダー、GET、PUT、POSTメソッドによるリソースへのアクセスを許可しています。

この構成は非常に寛容であるため、必要に応じて設定を変更してください。

AllowedOrigins の部分で、ご自身のアプリケーションのドメインを指定しましょう。

CORS の設定を記述したら、保存してください。
設定が反映されるまで数分かかることがあるので、待ちましょう。

`heroku-buildpack-vips` の設定

この設定はRails7 から必要になったようです。（まちがっていたらすみません）

↑をHeroku に追加していきます。

まずは下記のコマンドを実行します。
（アプリケーションのルートディレクトリで実行）

heroku buildpacks:add --index 1 https://github.com/heroku/heroku-buildpack-apt

次に、Aptfile を作成します。
（アプリケーションのルートディレクトリで実行）

touch Aptfile

Aptfileを開いて、以下をコピペしましょう。

libglib2.0-0
libglib2.0-dev
libpoppler-glib8

最後に、以下を実行します。

heroku buildpacks:add --index 2 https://github.com/brandoncc/heroku-buildpack-vips

以下のような結果が返ってきます。

Buildpack added. Next release on amazing-earthfest will use:
  1. heroku-community/apt
  2. https://github.com/brandoncc/heroku-buildpack-vips
  3. heroku/ruby

ここまでできたら、変更を反省してHerokuにデプロイしてください。

git push heroku main

さいごに

Rails7の情報がまだまだ少ないために、設定に手間取ることが多いですね。。。
いろいろな情報が錯綜していますが、自分が使用している環境とマッチしているか確認することが大事ですね。
Rails6で動作してもRails7だと動作しないことはよくありますので。