Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

事象

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 チュートリアル

yonsuke
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away