今回はRailsで作成したWebアプリケーションをHerokuやAWSへデプロイした際になぜかCSSが反映されない時の解決方法について書きたいと思います。

なぜか本番環境でCSSが反映されない

先日、就活用に作ったRailsアプリをデプロイした際、なぜかCSSが反映されないという不具合に遭遇し、数時間ハマってしまいました。

最終的に何とか解決できたので良しとしますが、色々と対処法をググる中でかなり勉強になった事があるので、再発防止のための自分用メモといった意味合いでも記録しておきます。

有力な解決方法は主に2つ

僕が調べた限り、「Rails アプリ 本番環境 CSS 反映されない」といった感じのキーワードで検索した場合、解決方法としてかなり高頻度で出てくるのが次の2つでした。

 

  • 「bundle exec rake assets:complie」を行う
  • config.assets.debug」をfalseにする

「bundle exec rake assets:complie」を行う

まず、最有力候補がこちら。どこを見ても「まずはこれを試せ!」といった感じで記載されていました。

どうやらRailsで作ったアプリというのは開発環境と本番環境で静的ファイルの参照元が異なり、開発環境では「app/assets」以下のファイルを、本番環境では「public/assets」以下のファイルを参考にするという仕組みになっているみたいです。

そのため、デプロイを行う際には上記のコマンド「bundle exec rake assets:complie」を叩く事で「app/assets」以下のファイルを圧縮して「public/assets」以下に移動させる必要があるとの事。

 

実際にターミナルで「bundle exec rake assets:complie」と打ち込んでみると、「app/assets」以下に配置されていたファイルが次のように「public/assets」以下へ書き込まれていきます。

当然、この中にはCSSなどのファイルも含まれているため、事前にこちらの手順を行っておかないと本番環境で反映されなくなってしまうというのが最も有力な説になるというわけですね。

この辺については下の記事が非常にわかりやすかったので、もしピンと来ない方は読んでみると良いでしょう。

config.assets.debug」をfalseにする

実際に自分がハマっていたのはこちらのパターンでした。

「config/environements/production.rb」の中に「config.assets.debug」という項目があると思いますが、こちらがfalseではなくtrueになっている場合、本番環境でCSSが反映されないといったケースがあるそうです。

 

Rails.application.configure do
...(中略)...
  config.assets.debug = true # falseに変える
...(中略)...
end

 

もしtrueになっていると、application.css/jsと個別のファイルが二重読み込みがされて上手く作動しない事があるとの事。

 

2020/01/06 23:40:08 [error] 3062#0: *22737 open() "/var/app/current/public/assets/application.self-01f48d20b99e9587448da523ff75d86db93a42bb2f278510963929fd9dbd9a5d.js" failed (2: No such file or directory), client: 172.31.39.69, server: _, request: "GET /assets/application.self-01f48d20b99e9587448da523ff75d86db93a42bb2f278510963929fd9dbd9a5d.js?body=1 HTTP/1.1", host: "ramen-quest-app-dev.ap-northeast-1.elasticbeanstalk.com", referrer: "http://ramen-quest-app-dev.ap-northeast-1.elasticbeanstalk.com/"

実際、僕のエラーログも「public/assets以下のファイルの読み込みに失敗しちゃったよー」的な感じで書かれていました。

 

で、「config.assets.debug」をfalseに変更すると、無事CSSが反映されるようになりました。

とても地味な部分であるため、これが解決策であると気付きにくい点ではありますが、もし「bundle exec rake assets:compile」を入力してもダメだった場合はこちらを疑ってみてください。

一応、デフォルトの状態ではfalseになっているので、変にいじくり回してなければ問題無いはずですが、僕のように初心者の方だったりすると何かの拍子で変更してしまっている可能性もあるかと思います。

まとめ

以上、開発環境では問題無く動いたのになぜか本番環境ではCSSが反映されない場合に試してみるべき2つの方法でした。前者はあまりにも有名であるため、どちらかと言えば後者の方に注目していただければと思います。

Railsで作成したアプリは開発環境と本番環境で挙動が異なる事も多いそうなので、その辺をしっかり勉強してみるとデプロイ時のエラーに対してスムーズに対応できそうだと感じました。

 

 

 

 

 

おすすめの記事