はじめに

本記事は、初心者の私が個人開発を行う中で、アセットプリコンパイルが分からずハマってしまったので、今後自分自身が迷わないにするためという備忘録、さらには同じような境遇の方のお力になれればと思いを込めて記事にしたいと思います！！

基本

そもそも、アセットプリコンパイルとは？

複数のアセットファイル（JavaScriptやCSS）を圧縮して連結することで一つのファイルにまとめること。

アセットプリコンパイルをすると何が嬉しいの？

アセットプリコンパイルにより、ウェブページの読み込み速度が向上するので、UXやSEOの改善が期待される
キャッシュやバージョン管理の面でもメリットがある

そもそも、「アセット」って具体的に何よ？

Railsにおける、「アセット」とは画像、CSS、JavaScriptファイルなどの静的ファイルのこと。

アセットプリコンパイルの流れ

結合と圧縮:
- アセットプリコンパイラ（Sprocketsなど）が、複数のアセットファイルを結合し、不要な空白やコメントを削除して圧縮する　→'最小化' と呼ばれたりする
ハッシュ化:
- アセットファイルにハッシュ値を追加して、キャッシュの問題を回避する
- これにより、ファイルが変更されるたびにブラウザが新しいバージョンをダウンロードすることが保証される。
本番環境へのデプロイ:
- プリコンパイルされたアセットファイルを本番環境にデプロイし、ウェブページが読み込まれる際に使用される。

各ファイル具体的な設定方法

config/application.rb

config/application.rb

    # アセットパイプラインを有効にする
    config.assets.enabled = true
    
    # アセットのプリコンパイルで生成されるファイルの保存先ディレクトリ
    config.assets.prefix = '/assets'

config/environments/production.rb

config/environments/production.rb

    # public配下のファイルを公開する
    config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present?
    
    # アセットのディレクトリ設定 
    config.assets.digest = true
    
    # アセットプリコンパイル時に圧縮する
    config.assets.css_compressor = :sass
    config.assets.js_compressor = :uglifier

それぞれの環境によっても異なりますが、上記のような形になるかと思います。

特に、config.public_file_server_enabled の部分ですが、この値が false であるとpublic配下のファイルが公開されません。

以下のような形で、直接 true を入れてあげてもよいのですが、プリコンパイルしていないファイルを動的にコンパイルするのでproduction環境ではfalseが良さそうとのことです。

 config.public_file_server.enabled = true

私の場合は、ENV["RAILS_SERVE_STATIC_FILES"] に値が入っていないことからエラーが生じてので、ターミナルから変数に値を代入してあげるのも良いかもしれません。

Dockerfile

dockerfileに、build 時にアセットのプリコンパイルを行うという記述をすることで、Docker立ち上げと同時にpublic/assets 配下にプリコンパイルされたファイルが作成されます。

以下にDockerfile例を載せておきます。

Dockerfile.rb

#~省略~

# アセットのプリコンパイルを実行
ARG RAILS_ENV="production"
ARG NODE_ENV="production"
ENV RAILS_ENV="${RAILS_ENV}" \
    NODE_ENV="${NODE_ENV}" \
    PATH="${PATH}:/home/ruby/.local/bin:/node_modules/.bin" \
    USER="ruby"

COPY --chown=ruby:ruby . .

# プリコンパイルの実行
RUN RAILS_MASTER_KEY=$RAILS_MASTER_KEY rails assets:precompile
RUN SECRET_KEY_BASE=$SECRET_KEY_BASE rails assets:precompile

#~省略~

手動でアセットプリコンパイルをする方法

dockerfile にアセットプリコンパイを実行する記述をするのではなく、手動で行う方法もあります。

terminal

$ bundle exec rails assets:precompile RAILS_ENV=production

おわりに

以上、アセットプリコンパイルに関してでした！

最後までお読みいただきまして、ありがとうございました！
この記事が、どなたかのご参考になれば嬉しいです！

参考リンク