本番環境で背景画像が表示されない
こんにちは、ぐっちと申します。
今回は開発時には問題なく表示されていた背景画像が、デプロイ後本番環境で表示されないという問題と対処法について書きたいと思います。
スタイルシート show.scss に
この様な記述があり、ローカル環境でアクセスした際は問題なく画像が表示されます。
しかし、本番環境では表示されない。エラーが出る訳ではなく、ただ表示されない。
原因が分からず、色々調べるとAsset Pipelinという仕組みが関係していることが分かりました。
Asset Pipeline
app/assets以下にcssや、js、画像ファイルといったファイルを配置しています。これらを「高速に」「キャッシュに悪さされないように」本番に反映させるのが、Asset Pipelineの役割です。
「高速に」の方は知っていましたが、今回影響しているのは「キャッシュに悪さされないように」の方でした。
・キャッシュに悪さされないように
「digest」という仕組みで、application.scssやbg-image02.pngといったようにファイルには名前が付いています。
しかし、アップデートしていくと、ファイル名は以前と変化していないが、中身は更新されているという事になると思います。
それがキャッシュによって、更新済みのものではなく、更新前の同じファイル名のものが読み込まれるという事態を防ぐのがこの仕組みです。
具体的には、app/assets以下に配置されたファイルが、コードが更新されるごとにファイル名にユニークな拡張子がつけられる様になります。
今回の例では、bg-image02.png は bg-image02-***.png という様に拡張子が付けられます。
さらに、デプロイされると、app/assets以下のファイルは全て
public/assetsに上記のdigest付きになって移動されます。
これが原因で本番環境では、画像が表示されませんでした。
確かに、ファイル名が変わってしまってはurl指定で読み込める筈がありません。
解決方法
では、どう対処するのかですが
という記述に変更します。
urlを指定するのではなく、Railsが指定しているimage-urlメソッドを使うことで、デプロイ時にapp/assetsからpublic/assetsにファイルが移動する際に、自動的にファイルにdigestを付与してくれるようになります。
今回の事でやはり開発環境とデプロイ後の環境は違い、色々な問題が発生するのだと体感できました。
こういった事を解決し、また一つ学習出来て良い経験になりました。
ここまで読んでくださり、ありがとうございました。
ツイッターで日々の学習をつぶやいています
