AWSのEC2でデプロイ後、背景画像が本番環境で反映されない・・・

初めに

今回初投稿になります。
私は現在プログラミング学習を始めて約4ヶ月一通り簡単なポートフォリオは作成できる技術はついてきましたが、まだまだ初学者でエラーで止まることが多いため、振り返り学習を兼ねてエラーで詰まったことや日々の学習での気付きをその都度投稿します。

今回EC2でのデプロイ時、ローカル環境で反映されていたポートフォリオの背景画像が本番環境で反映されないエラー解決に苦戦したので私が行った解決方法をまとめておきます。

今回の問題について

Rubyをベースにポートフォリオを作成して、AWSのEC2を利用し設定して本番環境にデプロイを試みたところ、ブラウザー上で作成したポートフォリオの背景画像のみうまく表示されず、背景がまっさらの状態に・・・・

同じimagesディレクトリ内に一緒に置いているロゴの画像は反映されているので、EC2の設定のせいで画像の読み込みが出来ていないということはない様子。
アプリ自体の他の機能も問題ない状態でした。

アプリケーションサーバーはUnicorn
WEBサーバーはNginxを使用しています。

考えられる要因

1.背景画像の容量が大きい為、反映されない
2.画像を適用しているCSSの記述のミス
3.デプロイの設定時のミス

試みた対処法

まずはロゴ画像は反映されている状況から①の画像容量の問題かと思い、画像容量を落とした背景画像の差し替えて再度デプロイして確認しましたが、相変わらず背景はまっさらなままでした。
そのため画像容量の問題ではないと判断。

次に②の背景画像を適用しているCSSの記述の見直しの為、同じ症状のエラーがないか調べて記述を見直ししました。
修正前
・style.css

.big-bg {
background-image: url('main-bg.jpg');
min-height: 95vh;
min-width: 100vw;
}

↓
修正後
・index.scss

.big-bg {
background-image: image-url('main-bg.jpg');
min-height: 95vh;
min-width: 100vw;
}
背景画像の記述をstyle.cssからindex.scssへ書き換え、
background-image: url('main-bg.jpeg') → background-image: image-url('main-bg.jpeg')に変更

調べた限りではこの方法で解消される可能性が高いようなので、改めてデプロイして確認したところ・・・・・　背景まっさら・・・・・なぜ？？？？
他の方で同じ症状の方はこの方法で大抵解消されているようでした。

③のデプロイの設定もまだ初学者の為、カリキュラムを都度都度確認しながら実装しているし、他の機能は問題ない為、設定は間違ってはいないはずなのでエラーログを確認します。
※最終的にまずエラーログから確認するべきでした・・・

EC2内のログをコマンドを入力して確認します
[ec2-user@ip-172-31-23-189 <リポジトリ名>]$ less log/production.log

エラーログを発見し、内容としてはpublicディレクトリ内のassetsディレクトリ内にmain-bg.jpegが無いとゆうものでした。
?????? 読み込み先がpublicディレクトリのassetsディレクトリ？　
普段からassetsディレクトリ内のimagesディレクトリに画像を入れていて問題なかったので、ずっとそうしていましたが、今回はpublicディレクトリを読み込んでいるようです。

その為、さらに同じ症状でのエラー解消をした内容を探してpublicディレクトリ内にassetsディレクトリを作成して、その中にimagesディレクトリを移して背景画像ファイルを配置しました。

その後、改めてデプロイして確認したところ・・・・・　　背景画像が反映されています！！！やりました！！！

解決方法

今回はEC2内のエラーログを確認して、エラー内容を確認。
public/assets/images/main-bg.jpeg(画像)と配置することで解消できました。
その前に行ったCSSの記述をSCSSファイルに記述し直したことも必要だったと思います。

さらにその後、デプロイ時の設定を見直しておそらくですがアセットファイルのコンパイルのコマンドを設定し忘れていたような気もするので、そこも気をつけて今後EC2の設定をしようと思いました。