LoginSignup
14

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-10-06

追記

公式のドキュメントが更新されたのでそちらをおすすめします。
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_HOST0.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"

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14