dockerでwebpackerが遅い問題を改善する

追記

公式のドキュメントが更新されたのでそちらをおすすめします。
https://github.com/rails/webpacker/blob/5-x-stable/docs/docker.md

概要

dockerで作った開発環境でwebpackerが遅いので改善できないか試してみました。
ホストOSはlinuxなので他のOSだと起きない問題かもしれません。

なお、完成品はこちらになります。
https://github.com/lisp719/templates/tree/master/rails

普通に使ってみる

Dockerfileはひとまず公式の通りにします。
https://github.com/rails/webpacker/blob/master/docs/docker.md

docker-compose.ymlは公式を参考に別のコンテナで動かすようにします。

  # 必要な部分だけ抜粋
  app:
    command: ./bin/rails s -b 0
  webpacker:
    command: ./bin/webpack-dev-server

適当にjavascriptを変更してコンソールでログを確認してみます。

webpacker_1  | webpack: Compiling...
webpacker_1  | webpack: Compiled successfully.
app_1        | [Webpacker] Compiling…
app_1        | [Webpacker] Compiled all packs in /home/vagrant/code/sandbox/tut/public/packs

2つのコンテナ両方でコンパイルが行われています。
特にappコンテナは画面をリロードしてからコンパイルが始まるので遅いです。

foremanを使う

どうもそれぞれ別のコンテナで動いているのが原因な気がします。
foremanを使って同じコンテナで動かすようにしてみます。
https://github.com/ddollar/foreman

Procfile.dev

app: rm -f tmp/pids/server.pid && rails s -b 0
webpacker: ./bin/webpack-dev-server

docker-compose.yml

  # 必要な部分だけ抜粋
  app:
    command: foreman start -f Procfile.dev -p 3000

また適当にjavascriptを変更してログを見てみましょう。

app_1  | 07:20:35 webpacker.1 | webpack: Compiling...
app_1  | 07:20:36 webpacker.1 | webpack: Compiled successfully.

webpack-dev-serverでのみコンパイルされるようになりました。
ファイルが保存されるタイミングでコンパイルされるのでだいぶ速く感じます。

（追記）環境変数でwebpackerの設定を変える

foreman無しでいけたので追記します。

rails serverのコンテナは WEBPACKER_DEV_SERVER_HOST でwebpack-dev-serverを動かすコンテナ名を指定します。
webpackerのコンテナは WEBPACKER_DEV_SERVER_HOST で 0.0.0.0 を指定します。

docker-compose.yml

  # 必要な部分だけ抜粋
services:
  app: &app
    command: ./bin/rails s -b 0
    environment:
      WEBPACKER_DEV_SERVER_HOST: webpacker
    ports:
      - "3000:3000"

  webpacker:
    <<: *app
    command: ./bin/webpack-dev-server
    environment:
      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
    ports:
      - "3035:3035"