はじめに

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