この記事ではheroku上でのシンボリックリンク設定方法についてご紹介していきます。

起きたこと

localでは正常に画像が表示されていたのですが、herokuにデプロイした途端、急にheroku上でのみ画像が表示されなくなってしまいました。

それも、エラーが一切出なく、登録機能も正常に動作するので原因が全く分からないのです。。
数日悩んだ末、色々検索していた際に「シンボリックリンクの設定」について書かれている記事に辿り着きました！
https://qiita.com/en_tokiya/items/5afab752c5826e4dcc62

local環境で動作させていた時にシンボリックリンクは設定していたのですが、どうやら本番環境にそのまま反映されるわけではないようで、デプロイ後に再設定が必要とのことでした。

シンボリックリンクを本番環境用に設定して無事画像の表示がされるようになったので、同じ事象で悩まれてる方は是非参考にしてみてください！

シンボリックリンク設定

設定は簡単です！
先ほど紹介させてもらった記事にも設定手順が記載されていますが、改めてこちらの記事でも説明しておきたいと思います。
※なお、設定前に確認しておく事項があるのでそちらについてはご紹介した記事をご覧ください。
https://qiita.com/en_tokiya/items/5afab752c5826e4dcc62

設定は下記の手順でコマンドを実行していきます！

// /app、/database、/routesなどが配置されてるアプリディレクトリで実行
$ heroku run bash //heroku上でコマンド操作できるようにする

これでheroku上のディレクトリでコマンド操作できるようになりました。
次に現在設定されているシンボリックリンクを削除します。

~ $ cd public // /publicに移動
~/public $ rm storage //現在のstorageファイルを削除
~/public $ ls -l //storageが削除されたことを確認
total 24
drwx------ 2 u31878 dyno 4096 Nov  4 03:09 css
-rw------- 1 u31878 dyno    0 Nov  4 03:09 favicon.ico
-rw------- 1 u31878 dyno 1735 Nov  4 03:09 index.php
drwx------ 2 u31878 dyno 4096 Nov  4 03:09 js
-rw------- 1 u31878 dyno   71 Nov  4 03:09 mix-manifest.json
-rw------- 1 u31878 dyno   24 Nov  4 03:09 robots.txt
-rw------- 1 u31878 dyno 1183 Nov  4 03:09 web.config

これで誤って設定されていたシンボリックリンクが削除されました。
次は正しいシンボリックリンクを設定していきます。

~/public $ cd　//アプリディレクトリに移動
~ $ php artisan storage:link //シンボリックリンク作成
The [/app/public/storage] link has been connected to [/app/storage/app/public].
The links have been created.

これでシンボリックリンクが新しく作成されましたね！
下記コマンドでstorageが再作成できたか確認します。

~ $ cd public // /publicに移動
~/public $ ls -l //storageが作成されたか確認
lrwxrwxrwx 1 u31878 dyno   23 Nov  4 13:51 storage -> /app/storage/app/public //作成されてますね！
~/public $

これでheroku上でのシンボリックリンクが無事作成されました！
次にローカルのディレクトリで設定していきます。

//ローカルのアプリディレクトリで実行
$ cd public
$ rm storage //現在のシンボリックリンクを削除
$ ln -s /app/storage/app/public storage

これで再設定できました！
設定コマンドは下記のような記述になっています。

$ ln -s リンク元 登録名

再度storageが作成されてることも確認できました！

% ls -l
lrwxr-xr-x ... storage -> /app/storage/app/public

では、最後に変更点をコミットしてherokuにデプロイしましょう！

$ git add storage
$ git commit -m 'コミットメッセージ'
$ git push heroku main

これで再度ブラウザで確認すると画像が表示されていることが分かるかと思います！！
初学者にとってエラーの出ない問題は辛いですよね。。
何がダメなのかが全く検討つかないので。
今回は無事解決できましたので、少しでも同じ事象で悩まれてる方の参考になれば嬉しいです！