Railsでproduction環境だけ背景画像が読み込まれない

Last updated at 2018-10-08Posted at 2017-09-16

Railsを勉強し始めて半年くらいです。

AWSにUnicorn+Nginxでデプロイしたら、背景画像が読み込まれないというエラーが出ました。
直すのに１時間以上かかってしまったので、同じようなエラーに詰まった人の助けになればと思います。

起きた問題

assets/images/以下に画像を配置して、以下のようにして背景画像を指定しました

.hoge {
  background-image: url("hoge.png");
}

ローカル環境だと読み込まれるのに、本番環境だと読み込まれない

検証したら
404 not found
こんな感じのエラー。

<%= image_tag 'hoge.png' %>

だと読み込まれるのに...
ローカルと本番の挙動が違うってことはアセットパイプラインが原因かな？

やっぱりアセットパイプラインでした。

アセットパイプラインの処理はローカル環境と本番環境で違います。
ローカル環境の場合はurl("hoge.png")としてあげればちゃんとassets以下から読み込んでくれます。

ですが本番環境の場合はプリコンパイルするとき、画像のURLにフィンガープリントを付与します。
なのでurl("hoge.png")ではフィンガープリントが付与されずnot foundになってしまいます。

image-url()というRailsが提供しているアセットパイプラインの機能を使うといいみたいです。
この辺りの機能はRailsガイドを見ると良いと思います

プリコンパイルするとちゃんとurl("assets/hoge-*****************.png")に変換してくれます

.hoge {
  background-image: image-url("hoge.png");
}

でちゃんと読み込んでくれました。
アセットパイプライン難しい...