RailsアプリでCSSの変更が反映されない時の対処【アセットパイプライン】

Railsアプリケーションのレイアウトを修正しても、CSSが反映されない時がある。
そんな時、まずはブラウザのキャッシュを削除するが、それでも反映されないのならアセットパイプラインが原因と考えられる。

CSSなどの静的なファイルは頻繁に変更がされないため、毎回は読み込まれないようになっているらしい。

開発環境

・Rails 5.2.3
・Ruby 2.5.1
・ConoHa VPS
・CentOS 7.6
・Capistrano3
・Nginx
・Unicorn

アセットパイプライン

アセットパイプラインとは、JavaScriptやCSSのアセットを最小化または圧縮して連結するためのフレームワークで、アセットの読み込みを高速化するためのもの。
Railsではデフォルトで有効になっている。

アセットパイプラインの働き

①変換

Saasで書かれたスタイルシートをCSS形式に変換したり、CoffeeScriptのスクリプトをJavaScriptに変換したりする。

②圧縮・結合

CSSやJavaScriptの改行や空白を除去してサイズを縮小し（圧縮）、複数のファイルを1つのファイルにまとめる（結合）。

③キャッシュ

public/assetsディレクトリの下にキャッシュファイルを生成し、ブラウザにはそのキャッシュファイルを送信する。

アセットパイプラインがうまく機能していないと、レイアウトの修正が反映されない。

通常のデプロイ

まずは通常のデプロイ。

# Capistranoで自動デプロイ
$ git add .
$ git commit -m "layout"
$ git push origin master
$ bundle exec cap production deploy

# サーバー再起動
$ systemctl restart nginx

CSSの変更が反映されない時の対処

単にデプロイ時のプリコンパイルがうまくいっていなかっただけの場合

次のコマンドでプリコンパイルを再試行する。

# ローカルでプリコンパイル
$ bundle exec cap production deploy:assets:precompile
# デプロイ
$ bundle exec cap production deploy
# サーバー再起動
$ systemctl restart nginx

解決しなければ次へ進む。

サーバーで手動プリコンパイル

# サーバーで手動プリコンパイル
$ bundle exec rake assets:precompile RAILS_ENV=production 
# サーバー再起動
$ systemctl restart nginx

production.rbの設定修正

上記の手順で解決しなければ、プロダクションの設定を変更。
Railsアプリケーション

config/environments/production.rb

config.assets.compile = true #動的コンパイルを有効化
config.assets.css_compressor = :sass # sass-rails gemを使用している場合コメントアウトを外す
config.public_file_server.enabled = true # publicディレクトリ以下のアセットを返す設定

以上。

これでもダメなら、サーバー自体を再起動して、再度デプロイし直す。
それでもダメなら、リバースプロキシの設定を見直す。

参考

https://railsguides.jp/asset_pipeline.html
https://qiita.com/gymnstcs/items/00ae23b7fdf0c69b57c5
http://thoames.hatenadiary.jp/entry/2018/07/10/225204
https://numb86-tech.hatenablog.com/entry/2018/11/10/002439