【Rails6】Docker環境でWebpackerのコンパイルが遅い【対策】

はじめに

こちらの記事の続きとなります。

【Rails6】Docker + Rails + MariaDB のローカル環境でアプリ開発を始めよう【おとなもこどもも、おねーさんも】

CSSファイルを編集してページの更新をするたびに、表示がめちゃくちゃ遅い問題にぶつかりました。

具体的な事象としては、数十秒ほどブラウザの読み込みが発生します。その際にログを確認すると、"webpack: Compiling..." という出力のまま止まり、しばらくすると "webpack: Compiled successfully." となってページが表示されます。

こんな状態ではおちおちCSSの編集ができないので、対策を施しました。

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

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

設定方法

解決のため、webpackerを別のコンテナで稼働させます。

docker-compose.ymlに追記します。（追記部分のみ記載）

docker-compose.yml

  app: のセクション

    environment:
      - WEBPACKER_DEV_SERVER_HOST=webpacker

  webpacker:
    build: .
    environment:
      - NODE_ENV=development
      - RAILS_ENV=development
      - WEBPACKER_DEV_SERVER_HOST=0.0.0.0
    command: ./bin/webpack-dev-server
    volumes:
      - .:/sample_app
      - gem-data:/usr/local/bundle
    ports:
      - '127.0.0.1:3035:3035'

webpackerコンテナでも Gemの永続化を行っています。

コンテナの停止

docker-compose down

稼働中のコンテナがないことを確認します。

docker-compose ps

Name   Command   State   Ports
------------------------------

イメージのビルドとコンテナの起動（同時に）

docker-compose up —build

解消

これ以降、同じ事象は発生していません。
また、command: ./bin/webpack-dev-server という記述のおかげで、CSSを編集すると自動でブラウザのリロードがかかってくれるので、ちょっと便利になりました。