はじめに
Windows + WSL2 + Docker で React アプリを開発していると、ソースを保存しても Hot Reload が効きませんでした。
これは、ファイル監視ライブラリ chokidar が Linux（WSL2やDocker）から見た Windows 側のファイル変更をうまく検知できないために発生します。
そんなときの対処法を紹介します。
環境
- OS：Windows 11
- WSL2（Ubuntu）
- Docker CE
- React（
create-react-app） - ソースコードは Windows 側に配置
問題：Hot Reload が効かない
Docker コンテナからバインドマウントされた Windows 側のソースは、Linux 側からはネイティブなファイル監視が効かないため、React の開発サーバーで使用されている chokidar による変更検知がうまく動作しません。
解決策：CHOKIDAR_USEPOLLING を使う
CHOKIDAR_USEPOLLING=true
この環境変数を使うことで、chokidar はネイティブ監視を諦めて、ポーリング方式（定期チェック）でファイル変更を検知するようになります。
ポーリングの欠点と改善：CHOKIDAR_INTERVAL
デフォルトではポーリング間隔が非常に短いため、CPU使用率が上がってしまうことがあります。
CHOKIDAR_INTERVAL=1000
と設定すれば、ポーリング間隔が1秒になり、負荷が大きく下がります。開発時には十分な応答性があります。
Docker Compose での設定方法
docker-compose.yml に次のように環境変数を追加します：
version: '3'
services:
frontend:
build: .
volumes:
- .:/app
working_dir: /app
ports:
- "3000:3000"
environment:
- CHOKIDAR_USEPOLLING=true
- CHOKIDAR_INTERVAL=1000
command: npm start
その他の設定方法
.env.development を使う
CHOKIDAR_USEPOLLING=true
CHOKIDAR_INTERVAL=1000