5
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

本番環境にアセットが反映されない場合

事象

Railsチュートリアルの5章の最後でGit push herokuしたら、追加したはずのSCSSが反映されていなかった。
しかし、ローカルにはきちんと反映されている。
ファイルの追加やコミットを忘れていたのかと思いきや、そうでもない。

原因

実行環境によってアセットパイプラインの挙動が異なるため。


アセットパイプラインはCoffeeScript(.coffee)やSCSS(.scss)を以下のように処理する。

1. コンパイル

.coffeeや.scssを.jsや.cssにコンパイル(変換)する。

user.coffee => user.js
company.coffee => company.js

user.scss => user.css
company.scss => company.css

2. 統合

コンパイル済みの.jsや.cssを統合する。

user.js
company.js
 => application.js

user.css
company.css
 => application.css

3. 圧縮

統合済みの.jsや.cssを圧縮する。
(コメントや改行、空行を除去)

4. ダイジェスト付与

圧縮済みの.jsや.cssのファイル名にダイジェスト(ハッシュ値)を付与する。

application.js
 => application-x1x2x3x4x5x6x7x8x9x0.js

application.css
 => application-x1x2x3x4x5x6x7x8x9x0.css



ただし、開発環境(development)では2,3の処理を行わない。
(デバッグの際に、原因箇所の特定がしづらくなり、可読性も落ちるため)
よって、開発環境と同じように本番環境(production)を動作させようとすると、.jsや.cssに正しくアクセスできない。

解決策

本番環境にデプロイする前に、.jsや.cssをプリコンパイルする。

rails assets:precompile RAILS_ENV=production

参考

Ruby on Rails 5アプリケーションプログラミング
Ruby on Rails チュートリアル

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
5
Help us understand the problem. What are the problem?