

以下のようにDockerfile及びdocker-compose.ymlを設定しました。

Dockerfile:

[code]

    FROM node:16
    
[/code]

docker-compose:

[code]

    version: "3"
    services:
      node:
        build: .
        ports:
          - "3000:3000"
        volumes:
          - ./:/tmp/working
        working_dir: /tmp/working
    
[/code]

このような設定ファイルでvscode上からRemote-Containersを用いてdockerイメージをビルドしました。  
その後`npx create-react-app app`のようにし、/appに移動、`yarn start`を実行しました。  
ブラウザでは初期のreactの画面が表示されるのですが、App.jsを変更・保存してもそれが反映されません。  
どのようにすれば、リアルタイムで変更が反映されるように設定することができるでしょうか。


CC BY-SA 4.0
2021-05-03T16:54:19.490
75657
2023-01-22T23:00:20.073
2021-05-04T10:27:03.320
30396
30396
question
docker reactjs docker-compose
vscodeの拡張機能Remote-Containersを用いたDocker上の開発で、Reactがリアルタイムで反映されない


create-react-
appで試したわけではないのですが、おそらく作業ディレクトリ（volumesでマウントしてるホスト側）がWindowsのファイルシステムにあったりしませんか？

## このような場合の応急処置

変更検知に用いられているchokidarが変更を検知できていないのが一応の原因なのでこれを環境変数`CHOKIDAR_USEPOLLING=true`によってポーリングによって検知させることで機能するようになることが期待できます。  
<https://stackoverflow.com/questions/44643045/running-development-server-with-
create-react-app-inside-of-a-docker-container>

## 本質的な解決

もし、冒頭に示したような環境、とくにDockerがWSL2を利用している場合であれば、ホスト側ワークスペースをWSL2の他のディストリビューション内に置くことが推奨されています。これによってネイティブにコンテナ内外のfsが連携でき、変更も検知できるほか、I/Oも非常に高速化されます。


CC BY-SA 4.0
2021-05-04T10:51:14.110
75670
2021-05-04T10:51:14.110
2376
75657
answer