ブログ内検索

テック

Laravelでstorageの画像が表示されない件

lv-sl-error-cover.avif

どうもこんにちは。

今回は、Laravelで特に何もしていないのに画像が表示されなくなった事例がありましたので、その備忘録です。

この「特に何もしていないのに」ってすごいパワーワードだと思ってます。大概は絶対何かしてますからね(笑)

Laravelアプリをサーバー移動した際に発生

そもそもどう言う時に起きたかというと、今までKUSANAGI8のサーバーで作っていたアプリをKUSANAGI9に移動した際に発生しました。

ちなみに最初は移動当初は問題なく画像が表示されていた為、気づいていませんでした。

新しい画像を追加した際に判明

移動当初の画像類は特に問題なく、例えば商品を登録などで新しく画像を追加した際に画像が表示されないというものです。

ちなみに、画像のURLは移動当初の画像URLとなんら変わりなく、storageフォルダにもちゃんと画像が登録されています。そりゃそこらへんの仕組み変えてないんだからそうですよね^^;

画像が表示されない
新しく登録した画像が表示されない。
参照先は間違っていない
リンク先URLも特に間違ってはいない。

色々試してみるも成果なし

キャッシュかとも思ったのですが、試しにプライベートモードなどで見ても特に問題なし。

そもそも、他の画像が問題なく表示されてると言うことはリンク関連が問題ではない?

さらにはローカル環境では全く問題なくて、問題があるのはステージングと本番のみ。やっぱりサーバー移動した際に何かしらの弊害が起きていることは間違いないはず。

少しログを細かく出しても動作に全く問題ありませんでした。

そりゃ表示されてるんだからそうだよね^^;

原因はstorageフォルダのリンクだった!

結論から言うと、storageフォルダの再リンクすることで解決しました。

今までこう言う事例がなかったので正直盲点でした。いらん時間を食いました;w;

よくよくみると、storageフォルダにはちゃんと画像が保存されていますが、publicフォルダのstorageフォルダにはファイルが連動されておりません。

storageフォルダ

シンボリックリンクを作り直してみる

まぁされてないなら作り直すかと思い、とりあえず実行。

bash
root@07b77be4cb94:/var/www/html# php artisan storage:link
The [/var/www/html/public/storage] link already exists.
The links have been created.

ん?エラーが出る。既に作成済みの場合はダメなようです。そりゃそうか。

一旦削除してから再作成

既に作成されているpublicフォルダのstorageフォルダを削除します。

bash
root@8c43168102a2:/var/www/html# rm -rf public/storage

その後改めて、シンボリックリンクを再作成します。

bash
root@8c43168102a2:/var/www/html# php artisan storage:link
The [/var/www/html/public/storage] link has been connected to [/var/www/html/storage/app/public].
The links have been created.

無事作成できました。

試しに再度画像登録などを行ってみましたが、問題なくpublicフォルダのstorageとも連動しているようで、画像もちゃんと表示されました!

まとめ

言われてみれば当然な事なのかも知れませんが、全く選択肢に入れてなかったので無駄に時間を食ってしまいました。

常日頃選択肢を広く持っておかないと書けなくていいところで時間がかかってしまいますね^^;

そんなこんなで

シンボリックリンクを使っている人はとりあえず作り直しとけ。

って事で、備忘録でした^^

関連記事

timestamps-converter-cover.avif

「このUNIXタイムスタンプいつ?」をサクッと解決!Mac開発者のための快適設定

Python+シェルスクリプトでUNIXタイムスタンプ(秒/ミリ秒)を即変換。

apple-emacs-shortcut-cover.avif

Macユーザーに捧ぐ!日常が変わるEmacs風ショートカット厳選まとめ

Macの標準機能で利用できるEmacsキーバインドを使って日常のテキスト入力などを効率化!

adobe-graduation-ceremony-cover.avif

【Adobe卒業式】年間10万円の節約!AdobeからApple Creator Studioに乗り換えた話

高額なAdobe税から卒業!解約の違約金トラップや、解約前にやるべき事などを解説。

vim-believer-cover.avif

爆速コーディングを実現するVimを布教する記事【入門編】

俺選!実務で爆速化する神コマンドを厳選して布教します。

timemachine-to-mac-transfer-cover.avif

意外と簡単!Time MachineでMac環境をお引越し(M1→M5)

Time MachineでMacを移行したらほぼそのまま復元できた話。

vite-first-guide-cover.avif

「アナタ無しでは生きられない!」Viteを使って今スグ爆速の開発環境を整えよ!

保存した瞬間にブラウザが更新されるViteの「ホットリロード」を活用した爆速開発環境を作る手順を解説!

jetstream-profile-image-cover.avif

Jetstream(Laravel)でプロフィール画像が表示されない会場はこちらです

Jetstreamで画像が保存・表示されない原因をケースごとにまとめました。

wordpress-enqueue-scripts-cover.avif

コピペで完了!WordPressでスクリプトにdefer・async・moduleを付ける方法

WordPressでスクリプトにdefer・async・moduleを付ける方法を解説。コピペで使えるサンプル付き。

cloud-document-cover.avif

使ってみたいよね?Adobeクラウドドキュメントを試してみた

Adobeクラウドドキュメントを試して感じたメリットとデメリットをまとめました。

railx6sj-cover.avif

ssh接続エラー: Too many authentication failuresをどうにかする

SSH接続時に出現する「Too many authentication failures」のエラーの解決法についてご紹介。

kusanagi-sever-error-cover.avif

KUSANAGIでサイトが表示されない場合は初心にかえる

KUSANAGIサーバーでどうやっても希望のドメインがサイトから見れなかった場合に試してたい選択肢をご紹介。

kusanagi-laravel-cover.avif

「爆速KUSANAGI」に『爆速Laravel』をインストール

爆速WordPressで人気の高いKUSANAGIサーバーに、Laravelをインストールし、爆速で使って見ようという事になりました。


新着記事一覧

kindle-comic.png

無料で漫画を一気読み!Kindleで出産レポ・育児漫画などなど

timestamps-converter-cover.avif

「このUNIXタイムスタンプいつ?」をサクッと解決!Mac開発者のための快適設定

Python+シェルスクリプトでUNIXタイムスタンプ(秒/ミリ秒)を即変換。

apple-emacs-shortcut-cover.avif

Macユーザーに捧ぐ!日常が変わるEmacs風ショートカット厳選まとめ

Macの標準機能で利用できるEmacsキーバインドを使って日常のテキスト入力などを効率化!

adobe-graduation-ceremony-cover.avif

【Adobe卒業式】年間10万円の節約!AdobeからApple Creator Studioに乗り換えた話

高額なAdobe税から卒業!解約の違約金トラップや、解約前にやるべき事などを解説。

vim-believer-cover.avif

爆速コーディングを実現するVimを布教する記事【入門編】

俺選!実務で爆速化する神コマンドを厳選して布教します。

timemachine-to-mac-transfer-cover.avif

意外と簡単!Time MachineでMac環境をお引越し(M1→M5)

Time MachineでMacを移行したらほぼそのまま復元できた話。

apple-fitness-plus-cover.avif

体重乱高下アラフォーがApple Fitness+に行き着いた話

激しい体重の増減を繰り返したチョコザップユーザーが、コスパ最強の「Apple Fitness+」に乗り換えました。

vite-first-guide-cover.avif

「アナタ無しでは生きられない!」Viteを使って今スグ爆速の開発環境を整えよ!

保存した瞬間にブラウザが更新されるViteの「ホットリロード」を活用した爆速開発環境を作る手順を解説!

with-pomodoro-technique-cover.avif

「私のコトですか?」過集中&注意力散漫な人に刺さる!効率化ではなく“生存戦略”のポモドーロ術

集中力が「0か200」しかない人に朗報!ポモドーロ・テクニックが脳の暴走を止める最強の特効薬でした。

jetstream-profile-image-cover.avif

Jetstream(Laravel)でプロフィール画像が表示されない会場はこちらです

Jetstreamで画像が保存・表示されない原因をケースごとにまとめました。

wordpress-enqueue-scripts-cover.avif

コピペで完了!WordPressでスクリプトにdefer・async・moduleを付ける方法

WordPressでスクリプトにdefer・async・moduleを付ける方法を解説。コピペで使えるサンプル付き。

cloud-document-cover.avif

使ってみたいよね?Adobeクラウドドキュメントを試してみた

Adobeクラウドドキュメントを試して感じたメリットとデメリットをまとめました。