【Rails+EC2+Capistrano】cap production deployしてもCSSが反映されない問題

やりたいこと

こちらの2記事の続きとなります。

実装環境が気になる方はこちらを参照してください。

become-a-programmer.hatenablog.com

ほぼ素の状態（rails newしてトップページのルーティングしただけ）のRailsアプリをAWSのEC2インスタンスに載せ、Capistranoを導入してラクにデプロイできるようにしたい。

というのがやりたいことの概要となります。

起きているエラー

前回までで、Unicorn、Nginx、Capistranoの設定が終わりました。

bundle exec cap production deploy

を実行すると、自動でデプロイ作業を全部やってくれるようになっています。

しかし、一つうまくいってないことが…

CSSが反映されていない！！アセットのコンパイルに失敗してる？

上記のコマンドでcapistranoが走り、処理は無事終了します。

しかし、いざデプロイされているURLに行ってみると、HTMLベタ張り状態のサイトが…！！

とっても見苦しい（苦笑）

デバッグしよう

cssが読み込まれないということは、assetのprecompileあたりが非常に怪しい。

作戦① Unicornを再起動させる

そこで、ターミナル上でEC2インスタンスにログインし、

kill -QUIT `cat tmp/pids/unicorn.pid

でunicornをストップ。

sudo service nginx reload

でnginxにも再度読み込みさせる。

ローカルに戻り、

bundle exec cap production deploy

で再度デプロイ！！

しかし、うまくいかない。

作戦② config/production.rbの設定をいじる

再起動系がダメなら、設定ファイルがどこかおかしいのかと疑う。

config.assets.compile = true
config.assets.css_compressor = :sass
config.assets.enabled = true

といった設定を行ったが、まだうまくいかない。。

作戦③ ついに成功！Nginxの設定ミスを発見！！

再起動系をもう一度やってみるも、未だダメ。

ここで、Nginxの設定を疑う。

EC2の本番サーバの方で、

sudo vim /etc/nginx/conf.d/rails.conf

を実行し、設定ファイルを見る。

upstream app_server {
  server unix:/var/www/newspicks_teamA/shared/tmp/sockets/unicorn.sock;
}

server {
  listen 80;
  server_name <Elastic IP>;

 root /var/www/newspicks_teamA/current/public;

location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
    root   /var/www/newspicks_teama/current/public;
  }

  try_files $uri/index.html $uri @unicorn;

  location @unicorn {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://app_server;
  }

  error_page 500 502 503 504 /500.html;
}

ジーーーッとみて見ると、assetの設定をしている部分。

アプリケーション名タイポしとるやんけ…

タイポに半日以上ハマってたんかい！！

悔しさを噛み締めながら修正。

改めて、cap production deployを実行。

すると、うまく行きました。

まとめ

複雑そうなエラーほど、足元の単純なミスがないか、しっかり調べるべし。

文系人間がエンジニアを目指すブログ

大学の文系学部を卒業した私が、ソフトウェアエンジニアになって、一人前を目指す過程を書くブログです。