Edited at

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


概要

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無しでいけたので追記します。

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

WEBPACKER_DEV_SERVER_PUBLICは0.0.0.0:3035を指定します。


docker-compose.yml

  # 必要な部分だけ抜粋

services:
app: &app
command: ./bin/rails s -b 0
environment:
WEBPACKER_DEV_SERVER_HOST: webpacker
WEBPACKER_DEV_SERVER_PUBLIC: 0.0.0.0:3035
ports:
- "3000:3000"
webpacker:
<<: *app
command: ./bin/webpack-dev-server
depends_on:
- app
ports:
- "3035:3035"