Heroku でcssが突然読み込まれなくなったので、改善方法を知りたい。

Question

初めまして、プログラミング初心者です。
railsで作成したアプリをHerokuにUPし、しばらく
CSSで見た目の調整等を行っておりました。

昨日、いつも通りにCSSの変更を行いHerokuにUPしたのですが、
CSSの変更が反映されなくなりました。
その後、何度か試しましたが、CSSの変更が全く反映されない状態です。

画像の追加は問題なく行えます。

心あたりとしては、

rake assets:precompile

を実行した後から、反映されなくなった気がします。

rake assets:precompile を実行したら、
public/assets 内に app/assetsディレクトリの中のファイルの内、.jsと.cssファイル以外の
全てのファイルが作成されました。

お恥ずかしながら、rake assets:precompile を実行した理由については
特に意味もわからず、実行してしまった感じです。

###以下、試したことです。
.gitignore の中に public/assets/*を記述しましたが、
特に改善されず。

.gitignoreの以下の部分に記述しました。

# See https://help.github.com/articles/ignoring-files for more about ignoring files.
#
# If you find yourself ignoring temporary files generated by your text editor
# or operating system, you probably want to add a global ignore instead:
#   git config --global core.excludesfile '~/.gitignore_global'

# Ignore bundler config.
/.bundle

# Ignore all logfiles and tempfiles.
/log/*
!/log/.keep
/tmp
public/assets/*  ←ここに記述してみました。
/.env

あとは、以下のコマンド

bundle exec rake assets:clean

を実行すれば、
public/assets内のファイルが消えるという記事を見つけたのですが、
よく分かっておらず、実行できていない状態です。

改善方法がわからずに困っております。

改善方法をご教示頂けますと幸いです。
よろしくお願いいたします。

Answer 1

通常railsでは自動でプリコンパイル(js, css群を一つのファイルにまとめてそれらにアクセスする回数を減らす)をしてくれるのですが、rake assetsコマンド打ってしまうと、質問者様のようにpublic以下に、ファイルが残ってしまいます。これの解決策としてはbundle exec rake assets:precompile ENV=productionをデプロイ前に実行するかpublic/assets以下を丸ごと削除して、gitにあげることです。

手間を考えるとassets以下を削除して、gitを更新するのが良さそうです。

Comments

[daikitakaya]

本番環境とローカルの違いはプリコンパイルによって、ファイルを一つにまとめて*.cssや*.jsへのアクセスを減らすことで、それらのファイルへの余分なアクセスを減らしたり、それらのファイルの余分な余白を削除してくれるために高速化できるという利点があります。

turbolinksではそれらを利用して、さらに高速化しているというわけです。

[mofuo222]

ご回答ありがとうございます。
public/assets以下のファイルを削除したところ無事に更新されました。
本当に助かりました。
ありがとうございました。

[daikitakaya]

解決して、よかったです。ちなみにrake assetsするとlocalでもrakeコマンドを打たないと更新されなくな流ので、気をつけてください。.gitignoreにpublic/assetsを追記してあげるとproductionでこのようなことがなくなって良いですね
アセットの仕組みは調べると面白いので、ぜひ。

Answer 2

ブラウザで直接cssのURLにアクセスしてみてください。
http://localhost/xxxxxx/css/style.css
修正したcssが表示されますか？
またブラウザの管理者ツール(ChromeならF12)でそのcssが読み込まれていますか？
cssは200で返って来てますか？
304 not modified（更新されていない）になってませんか？
304の場合キャッシュを使っているので、キャッシュをクリアしてください。
簡単にクリアする方法はスーパーリロードをするとその画面に必要な情報はキャッシュをクリアして全て読み込みなおします。
windowsの場合 ctrl + shift + r
macの場合 Cmd + shift + r

まずはパスとキャッシュを疑ってください。

Comments

[mofuo222]

早速の回答ありがとうございます。

ローカル環境では問題なく反映されます。
スーパーリロードも試しましたが変化がありませんでした。

状況を再度整理させていただきますと、
ローカル環境だと、更新したCSSファイルが読み込まれるが、
本番環境だと、CSSファイルは読み込まれているが、
更新前のCSSファイルが読み込まれている。

という状況です。