Table of Content
Docker上でReactのhot-reloadが効かない
React.jsのWeb開発で、ファイル保存時に自動的にre-loadされなくて困った方、参考にしてください。
目的
ファイル保存時に自動的にre-loadされ、Viewの変更箇所など簡単に確認できるようにする。（毎回docker-compose restartしていられない。）
(参考)
環境
Windows10 for Pro
Docker for Windows
create-react-appを使用
解決策
解決策は参考リンク[create-react-app/Trouble shooting]に記載されていたので、それに従います。いくつか考えられる事象があるようですが、今回はコンテナで開発したので、下記に示す手順のとおり、.envファイルを作成し、polling modeをtrueにすることで無事解決しました。
- 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.jsのプロジェクトフォルダのルートに空白の.envを作成し以下を追加する。
CHOKIDAR_USEPOLLING=true以上、です。
本当にcreate-react-appは、ドキュメントも豊富で助かります。個人開発にとって欠かせないです。
初めての人はぜひcreate-react-appでの開発をおすすめします。
