webpack でビルドしていたプロジェクトを docker に移す

開発環境で動いている webpack -w を docker-compose に移す。webpack-serve による auto-reload は今回頑張らない。

こういう構造

.
├── README.md
├── docker-compose.yml
└── front
    ├── package.json
    ├── src
    │   ├── index.html
    │   └── index.js
    ├── webpack.config.js
    └── yarn.lock

docker-compose.yml

version: "3.4"
services:
  front:
    image: node:8.11
    working_dir: /front
    command: yarn watch:dev
    restart: always
    volumes:
      - ./front:/front
      - node_modules:/front/node_modules
volumes:
  node_modules:
    driver: local

docker compose up で起動。 yarn は最近はnodeイメージに同梱されている。

最初はCOPYしていたが、頻繁に更新されるのとファイル監視のためにvolumesとしてマウントした。

最初は front/Dockerfile を置いていたが、最終的に何もしなくなったので、node の イメージをそのまま使うことにした。 node-alpine を使うか迷ったが、ネイティブプモジュールでハマる可能性があるのと、node_modules がどうせ肥大化しがちであんまり意味がないのでやめた。

front/node_modules はマウントしない。生成物はクロスプラットフォームなJSだが、 webpack などの ビルドツールはアーキテクチャ環境依存がある。(主にFS周り)

参考: https://shotat.hateblo.jp/entry/2016/12/01/221631

watch:dev タスクの中身。

  "scripts": {
    "watch:dev": "yarn install && yarn webpack --mode development -w",
    "build:prod": "NODE_ENV=production webpack --mode production"
  },

webpack -w は ブランチ切り替えで監視対象に大量に diff が出たときなどに落ちるので、 restart:always にしてある。

出力するだけのコマンド

開発環境ではサーバーを立てるか、デプロイ時などに吐き出したいときはこうする。

docker-compose run --rm front yarn build:prod

webpack-serve を使う場合

最終的に実行されるタスクを webpack -w ではなく webpack-serve にして port 8080 と 8081 を解放する。ブラウザに 8081 はリロード命令を発行する websocket サーバーなので必要。