DockerでReactのホットリロードが効かない

はじめに

Docker上でReactとTypeScriptと使って開発をしている時に、ファイル保存時に自動的にブラウザに反映(hot reload)されなくなったので、その解決策をここに備忘録として書き残します。

開発環境

Windows10
Docker for windows
React 17.0.2
TypeScript 4.3.2

解決策

create-react-app/Trouble shootingに書かれている通りに、.envファイルを作成し、polling modeをtrueと記述しました。が直りませんでした。おそらくDockerに何かありそうです。

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.

React-create-app/Trouble shooting

Dockerにも追加

docker-compose.ymlに.envと同様の記述しました。そしたら、ちゃんとhot relodeが効くようになりました。

docker-compose.yml

environment:
      - CHOKIDAR_USEPOLLING=true

あとがき

普段macで開発をしているので、windowsで何かあるとwindowsのせいにすることをやめようと思います。しっかりと問題の本質を見極める必要がありそうですね。