Next.js + Docker 開発で Hot Reload を有効化する

発生していた問題

コードを変更する ↓ なんでや・・？ 何度リロードしても変更がうまく反映されへんぞ。。？ ↓ めちゃハマってるな・・(´・ω・｀)

って事があったんですが、Hot Reload が効いてませんでした。

解決方法

create-react-app.dev

If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an .env file in your project directory if it doesn’t exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start, the watcher uses the polling mode, as necessary inside a VM.

CHOKIDAR_USEPOLLING を True にする事が必要、とのことでした。

Dockerfile であれば

env CHOKIDAR_USEPOLLING=true

ですし、 docker-compose.yml であれば 以下のように environment で 指定すればOKでした。

services:
  front:
    build: 
      context: ./front
    ports:
      - 3000:3000
    volumes:
      - ./app:/app
    working_dir: /app
    tty: true
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: sh -c "yarn dev"