More than 1 year has passed since last update.

Docker上のReactでのHot Reloadがうまくいかない。

Posted at 2023-03-05

はじめに

初めてQiitaに投稿する＆見習いエンジニアです。

Windows11
Docker
React 18.2.0
Typescript 4.9.4
react-scripts 5.0.1

Docker上にcreate-react-appを利用してReactの開発環境を作成しています。

バージョンは後日記載します。

ソースを修正してもブラウザ上ですぐに反映されませんでした。
いわゆるHot Reloadがうまくいきませんでした。

Ubuntu上でDockerを用いている時には特に問題なく動くのですが、Windows11条のDockerを用いる際にはどうしてもうまくいきませんでした、

以下の2つを併用して解決しました。

.env

CHOKIDAR_USEPOLLING=true
WATCHPACK_POLLING=true

docker-compose.yml

    environment:
      - CHOKIDAR_USEPOLLING=true
      - WATCHPACK_POLLING=true

Hot Reloadはできるようになったもののソース変更してからブラウザに反映されるまでの時間がかなり長いです。。
後々解決したいとおもいます。