背景

現在、Webアプリ開発をしたくReactを勉強中の身です。

yarn start(npm start)でローカルサーバーを立てた後はファイルを変更すれば自動的に再読み込み(Hot Reload)されるはずなのに一向にされないので原因を調べてた結果、原因と対策が分かりましたので備忘録をつけておこうと思い、書いております。

環境

Windows 11
Docker Desktop v4.9.0

Dockerの/workspaceフォルダ直下にプロジェクトを作成したのが問題でした。
どうやらworkspace直下だとファイルを監視できないみたいですね。

takashiuesaka様の記事に書いてありました。ありがとうございます。

devcontainer.json内のworkspaceFolderをhomeディレクトリに変えれば解決されました。

devcontainer.json

//"workspaceFolder": "/workspace/ui",
"workspaceFolder": "/home"

上記を実行したことで、HotReloadされるようになり、ビルド時間もだいぶ短縮されました。

Docker上でReact開発している人で同じような現象が出ている人は参考にしてください。

他の解決策がある人は教えていていただけると嬉しいです。