Rails環境でwebpack-dev-serverのHot Module Replacementをdocker-composeで使えるようにする

Hot Module Replacementについて詳しくはこちらで。

自分はRails 5.2.1の環境で使いたかったので設定してみました。
まずは、config/webpacker.ymlのdev_serverのhmrの部分をtrueにします。

config/webpacker.yml

〜（略）〜
development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: true # ここ
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/
〜（略）〜

docker-compose.ymlでの対象のホスト名を環境変数で指定して、ポートが通るようにする。

docker-compose.yml

version: '3'
services:
  web:
    build: .
    command: foreman start
    volumes:
      - .:/app
    environment:
      - DOCKER_DB_HOST=db
      - WEBPACKER_DEV_SERVER_HOST=web # ここ(servicesで指定している名前を設定する)

    ports:
      - "3000:3000"
      - "3035:3035" # ここ
    depends_on:
      - db
〜(略)〜

起動でForeman使っているのでProcfileにwebpack-dev-serverの分を追加。

web: bin/rails s -p 3000 -b '0.0.0.0'
webpack-dev-server: bin/webpack-dev-server <- 追加

あとは起動するだけ。

docker-compose up -d