サーバー起動後、エラー画面が表示された

デプロイはできたようだが、サーバーを立ち上げてみると以下のような、nginxのエラーではなく、Railsアプリケーションのエラーが表示された。

ちなみに、サーバー起動のコマンドはこちら👇

ターミナル

[ec2-user@ip-xx-xx-xx-xx アプリケーション名]$ rails s -e production

原因

/config/enironments/production.rbにおける本番環境でのアセットプリコンパイルの設定ができていなかった。
Bootstrapのバージョンが最新版だったため、詳細は分からないのですが、何らかの依存しているファイルの影響で正常に反映されなかった。
　→こちらの解決方法は以下の記事で確認できます。
https://qiita.com/kkarimata/items/796a4b3fe5710ed1a699

私がやった原因の特定方法

エラーログを表示させてみる

ターミナル

[ec2-user@ip-xxx-xx-xx-xxx "アプリ名"]$ sudo tail -f log/production.log

そうすると、コンパイルに失敗している時に出る以下のようなエラーが出ていました。

ターミナル（エラー内容）

ActionView::Template::Error (The asset “application.css” is not present in the asset pipeline.):

そのため、以下のコマンドでコンパイルしてみようと試みました。

ターミナル

[ec2-user@ip-xxx-xx-xx-xxx "アプリ名"]$ bundle exec rails assets:precompile RAILS_ENV=production

無事に完了するかと思ったら、エラーが吐き出されました。

ターミナル（エラー内容）

ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 38

エラーだけを見ると、./app/javascript/stylesheets/application.scssこのファイル内の1行目でSyntaxエラーだということですが、この時の該当ファイルの中身は以下の通りです。

./app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

何が気に食わないんでしょう。。。全く原因がわからず、作業がストップしてしまいました。

そんな時にやったこと

ファイルの中身を一度全部コメントアウトしてみた

./app/javascript/stylesheets/application.scss

//@import '~bootstrap/scss/bootstrap';　
//@import '~@fortawesome/fontawesome-free/scss/fontawesome';

力技ですし、個人の自学習用のアプリだったからできたことですが、
一度、./app/javascript/stylesheets/application.scssの中身を全てコメントアウトしてみました！！
（ごめんなさい）
そのままコンパイルしてみると当たり前ですがエラーは出なくなりました。
サーバーも立ち上げてみると、アプリは表示されましたがBootstrapやFont Awesomeが反映されていないので本来の姿ではありません。

ファイルの中身を戻してみた

もう一度ファイルの中身を戻し（以下の通り）、もう一度コンパイルしてみましたが同じエラーが吐き出されますが、Font Awesomeは反映され、Bootstrapは反映されていませんでした。

./app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

👆この状態で、以下のコマンドによりコンパイルしてみる

ターミナル

[ec2-user@ip-xxx-xx-xx-xxx "アプリ名"]$ bundle exec rails assets:precompile RAILS_ENV=production

以下の通り同じエラーが吐き出された。

ターミナル（エラー内容）

ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 38

これで、Bootstrapの導入方法か何かが間違っているためにエラーが出ているという可能性が高くなり、本番環境でBootstrapが反映されない時の対処法を探っていきました。

色々調べた結果、参考記事に行き着いた。

記事を参考にすると、/config/enironments/production.rbのファイルに本番環境におけるアセットプリコンパイルの設定が必要とのことでした。
（参考にした記事は記事の一番下に掲載しております。）

設定していこう！！

以下のような記述になればOKなはずです。

/config/enironments/production.rb

# ~割愛~
config.public_file_server.enabled = true
config.assets.css_compressor = :sass
config.assets.enabled = true
config.assets.compile = true
# ~割愛~

以下の記述に関して少し解説をします。

/config/enironments/production.rb

config.public_file_server.enabled = true

アプリを作成する際にデフォルトで、以下の記述になっているはずです。

/config/enironments/production.rb

# ~割愛~
# Disable serving static files from the `/public` folder by default since
# Apache or NGINX already handles this.
config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
# ~割愛~

コメントアウトを見てみると、「デフォルトで /public フォルダからの静的ファイルの提供を無効にする」と書かれていることを確認できると思います。
どういうことかというと、

本番環境でアセットプリコンパイルをすると、public/assets/配下にプリコンパイルされたアセットが存在するようになります。
これをデフォルトでは参照しない、と言っているんです。

ということは、色々書いてますが、こういうことを書いていると考えられるはずです。

/config/enironments/production.rb

config.public_file_server.enabled = false
#デフォルトの記述の意味

これをtrueに変更すれば参照してくれるということなんです！

もう一度コンパイルしてみる

ターミナル上にエラーが出なくなりました✨✨
解決かと思いきや、サーバーを立ち上げてみるとBootstrapだけ反映されていない！！
　→ こちらの解決方法は以下の記事で確認できます。
https://qiita.com/kkarimata/items/796a4b3fe5710ed1a699

まとめ

スクールのメンターさんを頼れなくなった状態でのデプロイで苦戦していました。
調べてみるとかなり基本的なことらしいので、自分の勉強不足を反省しました🥲

やっぱり自分で考えて自力でやってみるってすごく勉強になりますね！
同じ問題で困っている人がいらっしゃいましたら参考にしていただければと思います😌

至らない点や改善点がございましたらぜひご意見ご指摘をお願いいたします！！

参考記事