Webpacker::Manifest::MissingEntryError at / のエラーに悩まされた(備忘録)

Rails、Dockerで作業をしていたら以下のようなエラーが出てしまい、解決に時間がかかりました。

エラーについて

エラーは以下の通りです。

エラー内容

Webpacker::Manifest::MissingEntryError at /

Webpacker can't find application.js in /myapp/public/packs/manifest.json. Possible causes: 
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server. 
2. webpack has not yet re-run to reflect updates. 
3. You have misconfigured Webpacker's config/webpacker.yml file.

調べてみると、webpackerがコンパイルされていないことが原因のようです。
したがって、以下のコマンドをターミナルで実行してみました。

$ docker compose exec web bash
$ bundle exec rails webpacker:install
$ bundle exec rails webpacker:compile

しかし、再度Webpacker::Manifest::MissingEntryError at /のエラーが出てしまいました。

エラー内容

Webpacker::Manifest::MissingEntryError at /

Webpacker can't find application.js in /myapp/public/packs/manifest.json. Possible causes: 
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server. 
2. webpack has not yet re-run to reflect updates. 
3. You have misconfigured Webpacker's config/webpacker.yml file.

そこで、以下のコマンドを実行してみました。

$ docker-compose run web bin/rails assets:precompile

これは、docker-compose で web コンテナを一時的に起動し、その中で bin/rails assets:precompile コマンドを実行して、Railsアプリケーションのアセットを事前にコンパイルする、という意味です。

簡単にまとめると、Railsアプリのアセット(CSSやJavaScript)を本番環境用にコンパイル(より効率的な形式｟圧縮、結合｠に変換して、ブラウザが読み込みやすく)するということです。

その後、以下のコマンドを実行します。

$ docker compose up

すると、エラーがなくなりました！

応用編

$ bundle exec rails webpacker:compile

このコマンドは、Webpackerを使ってJavaScriptや関連するファイル（CSSや画像など）をコンパイルするためのコマンドです。
上記 $ docker-compose run web bin/rails assets:precompile との違いについて調べました。

結論でいうと、モダンなJavaScript(ES6やReact、Vueなど)を使っているなら、webpacker:compileを実行、伝統的なRailsアセット(Sprockets)を使っているなら、assets:precompileを実行という違いでした。

どちらも、「アセットを、本番環境用に最適化・コンパイルするために使われるコマンド」という点は共通していました。
状況によって使い分けることが大切なようです！