アプリをAPサーバー側にデプロイし、Nginxを使ったリバースプロキシ設定を行ったところ、以下画像のようにcssがうまく読み込めない問題が発生したので、その解決までの工程を忘れないようにメモしておきます。
今回の環境
- WEBサーバーにはNginx
- APサーバーにはUnicorn
- ruby -v 2.6.6
- rails -v 5.2.4.4
- PC Windows10
Google Chromeで検証
Chromeでエラーの出ているページを開いたら、F12か右クリックの検証を選択。
すると以下のようなエラーが確認された。
リソースのロードに失敗したと表示されている。
この時の404は表示させているWEBサーバー側、つまりNginxから404が出ている。
念のため、ログでエラーが出ていないかチェックしたいので、APサーバー側（Unicorn）を調べてみる。
APサーバー(Unicorn)のログ確認
rails配下のlogを確認する。
$ cd log
$tail -f unicorn.log
# -fはファイルの記述を監視。
INFO -- : worker=1 ready
INFO -- : worker=0 ready
INFO -- : reaped #<Process::Status: pid 3997 exit 0> worker=0
INFO -- : reaped #<Process::Status: pid 3998 exit 0> worker=1
INFO -- : master complete
INFO -- : Refreshing Gem list
INFO -- : listening on addr=0.0.0.0:3000 fd=9
INFO -- : master process ready
INFO -- : worker=1 ready
INFO -- : worker=0 ready
一度ブラウザをリロード。
特にそれっぽいエラーはないのでctrl+cで離脱。
WEBサーバー(Nginx)のエラーログ確認
Nginx配下(/etc/nginx)にあるnginx.confをvimで開いてみる。
$ sudo vim nginx.conf
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
#error_logの場所が記述されているのでこれをコピー。
$ sudo tail -f /var/log/nginx/error.log
sudo tail -fを叩いてブラウザを一度リロードしてみたが、特にエラーは出なかった。
nginx.confのaccses_logを確認する
先ほどのnginx.confをvimで開いて、accses_logを確認してみる。
$ sudo vim nginx.conf
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
access_log /var/log/nginx/access.log main;
#access_logの場所が記述されているのでこれをコピー。
$ sudo tail -f /var/log/nginx/access.log
叩いて、ブラウザをリロード。
すると、
"GET /assets/application-03e8ae3db0f190f7147e6299a7a6cb74a90a3f8de03988a2de0595377b02fa60.css HTTP/1.1" 404 1722
assetsの404エラーが確認できた。
railsアプリのpublic配下にassetsがあるので行ってみる。
$ cd assets
$ ls
application-03e8ae3db0f190f7147e6299a7a6cb74a90a3f8de03988a2de0595377b02fa60.css
ブラウザのエラーも"03e8"から始まるcssなので一致。
プリコンパイルする際に何かあるっぽい
アプリをデプロイする際、productionでpreconpileしている。
bundle exec rake assets:precompile RAILS_ENV=production
production環境をチェックしたいのでconfig配下のenvironmentsに移動してみる。
$ cd environments
$ vim prodaction.rb
#prodaction.rbをvimで開く。
config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
#これが静的ファイルを読み込んでいない原因らしいので環境変数を定義してあげる。
$ export RAILS_SERVE_STATIC_FILES=true
$ env | grep RAILS
$ RAILS_SERVE_STATIC_FILES=true
# 反映されていたらOK
$ unset RAILS_SERVE_STATIC_FILES
# 以前の環境に戻す場合。
- 補足
present?メソッドはnil, “”, “ “(半角スペースのみ), 空の配列, 空のハッシュが含まれている場合falseつまり、偽とするので元々設定されていない状態だとfalseを返す。
なのでRAILS_SERVE_STATIC_FILESに=falseの状態でもpresent?メソッドは「何か入ってるよ！」つまり真となるのでexport RAILS_SERVE_STATIC_FILES=falseでも結果としてはapサーバ側から静的ファイル
を読み込めるようになるらしい。
UnicornとNginxを再起動させる
Unicornをkillして起動。
Nginxを停止して起動。
これで静的ファイルの読み込みが行われていれば成功。
ブラウザに戻ってWEBサーバーのIPアドレスを叩くと……
やった(´▽｀)！