Rails+unicorn+Nginxの構成で初めて本番環境に移行したけどビューが正しく表示されないときにやったこと2つ
はじめに
タイトル長い！
初めてRailsアプリを作って、本番用のサーバーにデプロイして、WebサーバーやDBなどの諸々の設定も終えて、さあブラウザからアクセスしてみよう・・・と試したものの、ブラウザの表示が何やらおかしい。
そんな、先日「えもったー」という練習用アプリを作った際に遭遇したトラブルについて、原因と対応を書いていきます。
発生しうるトラブルは無数にあるでしょうし、今日書く2つの問題についても、以下に書くものが原因とは限らないと思います。
発生した事象に対して問題の切り分けはせず、「こうしたら直ったことあるよ！」という即席の対応策をとりあえず書き留めるのが今日の記事の目的です。
環境
事象１：画面が真っ白になる
状況
Nginxとunicornの設定を終え、サーバーを起動して、もちろんiptablesでHTTPを許可するようにして、準備万端のはずという状態でした。
ブラウザからRailsアプリのURLにアクセスしてみると、画面が真っ白に表示される、というトラブルです。
RailsやNginxのエラー画面が返るわけではなく、ひたすら何もない真っ白なビューが返ってきている様子でした。
ログを確認してみると、Nginxは問題なくリクエストを受け取っているようですが、unicornでエラーが出ているようでした。
原因：secret_key_baseの設定漏れ
config/secrets.ymlで、secret_key_baseが設定されていなかったことが原因でした。
私の環境のsecrets.ymlの場合、
- development/test環境ではsecret_key_base直書き
- production環境ではENV[“SECRET_KEY_BASE]から取り出す
という方法をとっていました。（Rails 5.0現在、デフォルトの設定のはずです）
そのためproduction環境に移行するにあたり、環境変数を代入してあげなければいけなかったのでした。
対応：secret_key_baseを設定する
私の場合は前述の通り環境変数を使っているため、exportしてあげればオーケーでした。
$ export SECRET_KEY_BASE=`rails secret`
rails secretでsecretな値を生成してくれるらしいです。
上記の通り環境変数設定後、unicornを再起動してあげたところ問題が解決しました。
事象２：レイアウトが崩れる（CSSが効かない）
状況
前述の画面真っ白現象が解消し、画面が表示された・・・と思ったらレイアウトが崩れまくってる、という事象です。
生のHTMLが表示されているように見えることから、CSSが効いていないということはすぐに分かりました。
原因：プリコンパイル後のCSSが参照できていない
production環境ではアセットパイプラインなる機能が使われるということで、以下コマンドによるプリコンパイルは済ませていました。
$ rails assets:precompile RAILS_ENV=production
どうやら、これにより生成されたプリコンパイル後のファイルを参照できていないことが原因のようでした。
プリコンパイル後のファイルは/public/assets配下に作られます。
しかし、ブラウザに表示したhtmlのソースを見てみると分かりますが、production環境のCSSやjavascriptは/assets/hoge.cssというパスで参照されます。
このようにパスのずれがあることで、CSSやjavascriptが全く機能しなくなっていた、というのが原因です。
対応：nginxに/assetsの参照先を設定する
nginxの/etc/nginx/conf.d/xxx.confファイルに、ターゲットが/assetsだった場合の参照先を設定してあげればオーケーです。
該当の部分を抜粋すると以下のような感じになります。
（略）
server {
listen 80;
server_name hogehoge.com;
root <RailsのRoot>;
location ~ ^/assets/ {
root <RailsのRoot>/public;
}
（以下略）
おわりに
練習用アプリの本番移行時に遭遇したトラブルのうち、ブラウザに正しく表示されなかったケース2つについて書きました。
はじめに書いた通り細かな問題の切り分け等はしておらず、限定的な状況でのみ役に立つメモだと思いますが、将来の自分の役に立つ日が来ると信じて書き留めておきます。
・・・いや、役に立つ日は来ないほうがいいのですけど。
