AWSでデプロイしたサイトがCSS反映されない

Question

ruby on rails でアプリを作成し、
(下準備編)世界一丁寧なAWS解説。EC2を利用して、RailsアプリをAWSにあげるまで
を元にデプロイしました

修正しようと思い、cssを編集したのですが、

ローカル環境では反映されているcssが
gitで更新し、デプロイ上では反映されません。

検索した結果、
[ド素人メモ] Vagrantとnginx使ってたらCSS反映されなくなったときのこと。
を試しましたが、
何も変わらず、
productionでcssが読み込まれない問題
は記述してたので、原因ではなかったです

クッキーの問題かとも思い、別ブラウザで開いてみましたが
反映されてませんでした。

assets:precompile
はしました。
css以外の修正などは反映されており、
原因が見つかりません。

どなたか分かる方教えてもらえますでしょうか。

よろしくお願いします

Comments

[rubytomato]

GitHubを利用されている前提でお聞きします。
1) ローカルで修正したCSSは、GitHubのリモートリポジトリではどうのようになっていますか？ローカルと同じ状態でしょうか？
2) リモートリポジトリにもCSSの修正が反映されている場合、AWSへデプロイする前にpullする必要があると思いますが、この操作は行われたのでしょうか?

[marco]

コメントありがとうございます。
ローカルで修正し、fetch originをし、リモートリポジトリで確認してから、
pullしました。
git pull [e-mail]＊＊＊＊＊＊＊＊＊して、
ターミナルの最後に
app/assets/stylesheets/application.scss | 1 +
app/assets/stylesheets/home.scss | 3 +++
app/assets/stylesheets/media.scss | 10 ++++++++++
3 files changed, 14 insertions(+)
create mode 100644 app/assets/stylesheets/media.scss
がでたので、更新？されたと認識しています。

[rubytomato]

AWS上にも修正が反映されているようですが、一応EC2インスタンス上のcssファイルの内容をcatかlessコマンドで確認してみてください。
更新されているようでしたら、ブラウザから直接cssファイルを開いて、これも内容が更新されていることを確認してみてください。

[marco]

わかりました！

[marco]

catで中身を確認しました。
cssファイル更新されていました。１つ新しいファイルも追加しましたが、それも入っていました。
あと、HTMLで文字の変更を試しにしてみましたが、それは反映できていました。

[rubytomato]

確認ありがとうございました。gitまわりの問題かとおもってコメントしましたが、gitではなさそうですね。
rails周りの問題かと思いますが、あいにくruby, railsのことは知らないので申し訳ありませんが、これ以上はお手伝いできません。

ただ、ちょっと調べてみてところ、よくある現象のようです。回答が付くまでに以下の記事をご覧になってはどうでしょうか？

本番環境でCSSが反映されない
https://teratail.com/questions/103983

productionでcssが読み込まれない問題
http://miyasakura.hatenablog.com/entry/2016/05/14/124147

Railsアプリケーションが本番環境にてcssが効かずに困っています。
https://ja.stackoverflow.com/questions/10699/rails%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E6%9C%AC%E7%95%AA%E7%92%B0%E5%A2%83%E3%81%AB%E3%81%A6css%E3%81%8C%E5%8A%B9%E3%81%8B%E3%81%9A%E3%81%AB%E5%9B%B0%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99

[marco]

参考のサイトありがとうございました。

Answer 1

次のコマンドを実行して試してみてください。

$ rake assets:clobber assets:precompile

rake assets:clobber はコンパイル済みのアセッツを削除します。

それでもだめなら、次のコマンドを試してみてください。

$ find app/assets/ -type f -exec touch {} \;
$ rake assets:clobber assets:precompile

find app/assets/ -type f -exec touch {} \; は app/assets/ 以下のファイルのタイムスタンプを更新します。ファイルが更新されたように見せかけるためです。

Comments

[marco]

回答ありがとうございます。
早速試したところ、
warning Integrity check: Flags don't match
error Integrity check failed
error Found 1 errors.
がでました。
$ find app/assets/ -type f -exec touch {} \;
は何もでなかったのですが、そのあと、
$ rake assets:clobber assets:precompile
をすると同じエラーとなりました。

[kit494way]

もしかしたら言葉足らずだったかもしれません。
本番環境で、RAILS_ENV=production rake assets:clobber assets:precompile を実行しました？

[marco]

本番環境は、AWSの方であってますか？？？
AWSのほうで、RAILS_ENV=production rake assets:clobber assets:precompile
してみたところ、
いろいろ表示がでて、
そのままcssが全て反応なくなり、
rake assets:precompile RAILS_ENV=production を試してみたのですが
cssの反応なくなりました

[kit494way]

> AWSの方であってますか？？？

はい。

> cssの反応なくなりました

css が読み込まれなくなった、という意味ですか？
タイムスタンプ更新したあとに RAILS_ENV=production rake assets:precompile するとどうなりますか？

[marco]

そうです。cssそのものが反映しなくなりました。
無知で恐れ入りますが、タイムスタンプ更新はどうすればできますか？

[kit494way]

これのことです。 find app/assets/ -type f -exec touch {} \;
端折ってすみません。

[marco]

慣れてなくてピンとこまくすみません。
$ find app/assets/ -type f -exec touch {} \;
$ rake assets:clobber assets:precompile
したあと、RAILS_ENV=production rake assets:precompileして、
のあと、もう一度uinicornの再起動と、nginxのリロードをしたらできました！！！！！！！！！

[marco]

cssも反映されていました！！！
どうもありがとうございました！！！！！！！