🎒

本番環境で背景画像が表示されない (EOTD No. 19)

2021/01/26に公開

Rails

本日のエラー

シチュエーション

AWSのEC2にRailsのアプリケーションを起動しました。

アプリケーションサーバー: Unicorn
Webサーバー: Nginx

sudo less /var/log/nginx/error.log

上のコマンドでNginxのエラーメッセージをチェック。
すると今回のエラーが現れました。

アプリケーション上では背景に設定されている画像が表示されていない。。

考察

No such file or directory

assetsに背景画像に設定されるはずのファイルが存在しないみたいです。

EC2上で指定されたパスの中身を見てみました。

cd public/assets

ls

すると、以下のようなファイル名がずらり。

chef-login-background-eff704a5d7a286d85ec45828520c3932f77552a59c6a97ac6405c76174d8d026.jpg

chefs-signup-background-b9a99a99592030d51176b35442a59e77ad576f3bd448e2e7abc272620cb0b87b.jpg

ファイル名に余計なランダム文字列が連なっている。これ何？

Railsガイドに答えがありました。

解決

フィンガープリントの振る舞いについてはconfig.assets.digest初期化オプションで制御できます。

どうやらフィンガープリントが今回のランダム文字列に当たるみたいです。
他にも以下のようなメッセージが。

::: messages
デフォルトのconfig.assets.digestオプションは、通常は変更しないでください。ファイル名にダイジェストが含まれないと、遠い将来にヘッダが設定されたときに (ブラウザなどの) リモートクライアントがファイルの内容変更を検出して再度取得することができなくなってしまいます。
:::

つまりファイルの内容に変更があるのにファイル名が変わっていないとそのファイルの内容変更を読み取れないから、フィンガープリントを与えてこのようなケースにも対応できるようにするのか。

ひとまず納得。

`asset_path`

asset_pathはアセットパイプラインのヘルパーメソッドです。
これをCSSのファイル内で使うことによって、public/assetsにある画像にパスを通すことができる。

css.erbのようなファイルでは他のCSSプロパティと合わせて記述できそう。

test. {
background-image: url(<%= asset_path 'image.png' %>);
border: 1px black solid;
margin: 0 auto;
...

}

background-imageプロパティの中でasset_pathを使用した後、再度本番環境で確認。

すると無事背景画像が表示されました！

SOTD(Summary Of The Day)

AWSの仮想サーバーでデプロイをするようになってからこれまでに経験してきたエラーとは違う類のエラーで解決にたどり着くのが難しい。

MVCの概念を理解してからエラー処理が上手くなったように、本番環境の仕組みについても学ぶ必要がありそう。