前提
・AWS EC2は導入済み
・背景画像は『app/assets/images』フォルダに格納している
バージョン
rubyのバージョン ruby-2.6.5
Railsのバージョン Rails:6.0.0
はじめに
background-imageプロパティを使って、Herokuやローカル上では背景画像が表示されているのに
AWS EC2でデプロイしたら、背景画像が表示されないので、それを解決したい方向けの記事となっています。
概要
以下2点を変更して、再度デプロイすると背景画像が表示されます。
①CSSファイルをSCSSファイルに変更する。
②背景画像を指定するCSSの記述をbackground-image: image-url("画像名");に変更する。
詳細
①CSSファイルをSCSSファイルに変更する。
以下のどちらかのパターンで行えます。
・ファイル名の拡張子を、 .CSS → .SCSSに変更する。
・背景画像を表示させているviewの拡張子.SCSSファイルに、②の内容を記述する。
※私は後者を選びました。というのも、SCSSに拡張子を変更してしまうと、それまで記述したCSSの記述に影響が出るためです。
②背景画像を指定するCSSの記述をbackground-image: image-url("画像名");に変更する。
SCSSファイルの内容を以下のように変更します。
（変更前）
background-image: url(画像名);
↓
（変更後）
background-image: image-url("画像名");
※""（ダブルクォーテーション）を忘れないようにしてください
③デプロイして確認
確認し問題なければ終了です。
なお、ローカル内でも、同様の表示ができます。
背景画像が表示されない理由
表示されない理由としては、Asset Pipelinの仕組みが関係しています。
仕組みの１つとして、※1)キャッシュされていた既存のアセットを無効化を行います。というのも、キャッシュの効果を使った悪用を防ぎ、デプロイさせる役割をしているためです。
変更前のbackground-image: url(画像名);記述では、「url」がファイル名は以前と変化していないと認識され、既存のキャッシュとしてみなされます。
したがって、既存の古いキャッシュでは読み込めない状態となるので、、画像を読み込んでもらえません。
（変更前）
background-image: url(画像名);
そこで、
「url」を指定するのではなく、Railsが指定している「image-url」メソッドを使うことで、デプロイ時にapp/assetsから読み込めるようにします。
（変更後）
background-image: image-url("画像名");
※1) キャッシュとは、データを一時的に保存することで、データの処理速度を速める考え方、仕組みのこと。
補足
AWS EC2をデプロイする方法を以下に載せていますので、よろしければご参考ください。
https://qiita.com/narimiya/items/2e642b60baa4002c4bee
assetsディレクトリに関しても以下に載せていますので、よろしければご参考ください。
https://qiita.com/narimiya/items/73ca907c74b4c615f39d
以上です。