現在個人開発でRailsアプリを作っているのですが、正常に動いていたRailsアプリのCSSが突然読み込まれなくなり(画像ファイルも）無駄に時間を食ってしまいました。
結局はっきりとした原因はわかりませんが、解決するまでの過程をここに書いていこうと思います。
開発環境
- windows10 Pro
- Rails: 6.0.3.2
- ruby: 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-linux]
- Docker for windows
- MySQL 5.7
- nginx:1.15.8
エラーが発生した経緯
rspecのシステムスペックでテストを書いて実行、失敗を10回ほど繰り返してlocalhost（root_path)にアクセスしたら
CSSが反映されなくなっていた。
そのときのConsoleのエラー内容↓
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
このエラー自体はよく見るやつで、タイトル通りCSSファイルが読み込まれていないというものでした。
解決手順（？）
この解決策が正しいのか正直微妙ですが、治るまでの経緯をここに書かせて頂きます。
結論から言いますと、nignx.confの内容を適当に書き換えて、dockerコンテナをビルドし直して起動しなおしてエラーを起こしてもう一度ビルドし直してコンテナ起動したら治ったという感じです。普通に再ビルドしただけでは治りませんでした。これのせいで時間がかかりましたね、、たまたまエラー起こせたんで治せましたが、、
これだとわかる人にしかわからないでの以下で詳しく説明します。
1．nginx.confの内容を書き換える
私の開発環境ではなるべく本番環境に近づけるためにWEBサーバーとしてnginxコンテナを起動させています。
そのnginx.confはその設定ファイルです↓
# プロキシ先の指定
# Nginxが受け取ったリクエストをバックエンドのpumaに送信
upstreamwebapp {
# ソケット通信したいのでpuma.sockを指定
serverunix:///webapp/tmp/sockets/puma.sock;
}
server {
listen80;
# ドメインもしくはIPを指定
server_namewebapp ;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
# ドキュメントルートの指定
root /webapp/public;
client_max_body_size100m;
error_page404 /404.html;
error_page505502503504 /500.html;
try_files $uri/index.html $uri @webapp;
keepalive_timeout5;
# リバースプロキシ関連の設定
location @webapp {
proxy_set_headerX-Real-IP $remote_addr;
proxy_set_headerX-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_headerHost $http_host;
proxy_passhttp://webapp;
}
}
この設定ファイルのproxy_passを適当に書き換えてわざとエラーをおこします。（場所はどこでもいいかも）
2.dockerを再ビルドして起動する。
$ docker-compose down
$ docker-compose up -d --build
-dオプションはバックグランドで実行してくれます。
--buildオプションをつけるとビルドから起動まで一気にやってくれます。
そうすると、
$ docker-compose ps
Name Command State Ports
----------------------------------------------------------------------------
webapp_app_1 bundle exec puma -C config ... Up
webapp_db_1 docker-entrypoint.sh mysqld Up 3306/tcp, 33060/tcp
webapp_web_1 /bin/sh -c /usr/sbin/nginx ... Exit 1
エラーが起きて webapp_web_1コンテナがExitするはずです。（コンテナ名は、docker-compose.ymlの設定で変わるので各自置き換えてください。）
3.書き換えたnginx.confを元に戻して再ビルド
ここで適当に書き換えてわざとエラーを起こしたnginx.confのファイルを元に戻します。
そして2を再び実行します。
そしたらなぜか反映されるようになりました！嬉しい！！
最後まで読んでいただきありがとうございます！
正直今回の方法がどういうロジックで治ったのか？そもそも正しいのか？というのはわかりません。もし、わかるかたがいましたらコメントいただけると幸いです。
とりあえず、これをやったら治ったというのは事実です。production環境でプリコンパイル時にCSS読み込みがうまくいかないとかならまだわかるんですが、今回は突然のエラーだったので治すのに時間がかかってしまいました。同じエラーに遭遇している方に、こちらが役に立てばうれしいです！