🧸

Docker環境でNextjsのHot Reloadが効かない場合の対策

1 min read

まずは結論から

docker-compose.ymlファイルにenviromentCHOKIDAR_USEPOLLING=trueを追加する事でHot Reloadが使えるようになります。

docker-compose.yml
version: '3.9'
services:
  next:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./next:/next
    working_dir: /next
    command: node
    tty: true
    environment:
      - CHOKIDAR_USEPOLLING=true
    ports:
      - 3000:3000

他の方法もありますが、この方法が一番簡単な対策だと思います。

注意点

コンテナ作成時に設定を追加していれば使えるようになりますが、作成状態のコンテナを変更した場合上手く反映されない場合があります。
以下のコマンドでコンテナを再作成を行うと変更が反映されます。

docker-compose up --build --force-recreate

Hot Reloadが効かなくなった環境

os: Mac OS
subpc os: windows wsl2

versions
node : 17.1.0-alpine3.14
next : 12.0.4
react : 17.0.2
react-dom : 17.0.2

windows wsl2の環境ではHot Reloadが効きましたが、mac osでは効きませんでした。

今回、next v12の為に新しく環境を構築した結果出来なくなりました。
以前まで使用していた環境では起こった事はありません。

以前使用していた環境はこちらです。

os: Mac OS
subpc os: windows wsl2 ubuntu

versions
node : 14.17-alpine3.13
next : 11.1.2
react : 17.0.2
react-dom : 17.0.2

原因について

他の環境や他のPCでの検証はしていないので分かりませんが、考えられる原因はnext v12でコンパイラーがRust製に変更された事が原因だと見ています。
Babelよりも高速なコンパイルが可能なので、とても使いやすくて便利ですので環境構築で時間がかかりましたが満足です。

docker環境は便利だけど、、

外出先で作業する時はmacを、家で作業する時はwindowsといった、windows/macを使い分けて作業する人はdocker環境はかなり便利なツールです。
しかし、windowsでは正常に動くけどmacでは正常に動かないといった事や、その逆も然りで多々起こります。
windowsにwsl2でubuntuを入れた事でこういった差異は減りましたが、それでも起こる物はコード側で対策を打つしかありません。

GitHubで編集を提案

Discussion

ログインするとコメントできます