Docker(WSL2) + Rails6 + webpacker でめちゃくちゃハマった

Docker(WSL2)でRailsコンテナを作り、webpackerを導入しましたが、
更新されたjavascriptやcssを監視してwebpackのコンパイルをするwebpack-dev-serverが
どうもうまく動かず数時間悩んだので、自分が解決できた方法を記載します。

事前にしたこと

docker-compose.yml

version: '3'
services:
  web: &web
    build:
      context: .
    environment:
      WEBPACKER_DEV_SERVER_HOST: webpacker
  webpacker:
    <<: *web
    environment:
      WEBPACKER_DEV_SERVER_HOST: "0.0.0.0"
    ports:
      - '3035:3035'

※端折って書いています、別途RailsコンテナのDockerfileが必要になります。

webpackerコンパイル用のコンテナを作成

Railsコンテナを作成しますが、Railsコンテナをクローンするようなかたちでwebpackerコンパイル用コンテナも作成します。

以下のように

web: &web

コンテナに対してのエイリアスを設定し、

  webpacker:
    <<: *web

とすることでエイリアスに紐づくコンテナの設定を全て継承することができます。

webpackerのコンテナでコンパイルをするための設定

Railsコンテナでwebpackerのコンパイルをするコンテナに接続するために以下の設定をします。

WEBPACKER_DEV_SERVER_HOST: webpacker

webpackerでコンパイルした結果をRailsコンテナに戻すために以下の設定をします。

WEBPACKER_DEV_SERVER_HOST: "0.0.0.0"

こちらのソースを確認すると環境変数WEBPACKER_DEV_SERVER_HOSTを使って接続先を制御しているのが分かります。

config/webpacker.yml

dev_serverのhostをwebpackerとします。

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: webpacker

#ここまでやった結果
webpack-dev-serverが起動時にコンパイルが動作するだけで、以降は全く動かん・・・。
ここから数時間ハマった・・・。

そして解決方法

config/webpacker.yml の watch_options にpollの設定値を追加。

development:
  <<: *default
  compile: true
  dev_server:
    # ～省略～
    # https://webpack.js.org/configuration/watch/#watchoptions 
    watch_options:
      ignored: '**/node_modules/**'
      poll: 1000 # ファイル更新を何m秒間隔で監視するかの設定

私の場合は、前述に記載した通りrailsコンテナと全く同じコンテナをwebpakcerコンパイル用コンテナとしてビルドし、

./bin/webpack-dev-server

を実行して、ファイルの変更を監視するようにしていましたが、
どうやら前述のpollオプションが設定されていないとファイルの変更を検知しないようです。

こちらを見ると、webpackerのコンパイルが動作しないときはこの辺の値を調整してみてくれ！って書いています・・・。

参考にさせていただいた記事