longbridgeyuk
@longbridgeyuk

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Windows10(home)+Docker+WSL2+Reactでファイルを変更してもコンパイルが実行されない

解決したいこと

Windows10(home) Docker+WSL2でReactの開発環境を作成したのですが、
App.tsxファイルを変更し保存しても、コンパイルが実行されず、ホットリロードがされない状態です。

どうすればファイルを変更した際に、自動でコンパイルされるようになるか、ご教授ください。

発生している問題・エラー

特にエラーは発生していません。

Windows10(home)でDocker+React環境を作成した手順

Docker version 20.10.11

  • reactworkフォルダを作成
  • VsCodeでreactworkフォルダを開き、Dockerfile、docker-compose.ymlを作成
Dockerfile
FROM node:latest
WORKDIR /usr/src/app
docker-compose.yml
version: "3"
services:
    node:
        build: .
        ports:
            - "3000:3000"
        volumes:
            - ./app:/app
        environment:
            - CHOKIDAR_USEPOLLING=true
        stdin_open: true
        command: sh -c "cd react-sample && yarn start"
  • VsCodeのターミナルでコマンドを実行
docker-compose build

docker-compose run --rm node sh -c "yarn global add create-react-app && create-react-app react-sample --template typescript"

docker-compose up
  • chromeでhttp//localhost:3000にアクセスすると、Reactのページが表示される。
  • App.tsxの内容を変更し保存しても、コンパイルが動かず、ブラウザの表示も変わらない。

よろしくお願い致します。

0

4Answer

reactworkフォルダを作成

このフォルダはどこに作成されているでしょう?

もし、Windowsホスト側に作成されているのであれば、/home/<username>/ 以下で試してみてください。

0Like

回答いただきありがとうございます。

reactworkフォルダを作成はFドライブ直下に作成しています。
F:\reactwork

Windowsホスト側に作成されているのであれば、/home/<username>/ 以下で試してみてください。

これはreactworkをWindowsホスト側のC:/Users/<username>/直下に作るということでしょうか?

0Like

これはreactworkをWindowsホスト側のC:/Users//直下に作るということでしょうか?

いえ、Windows管理下ではなくWSL2で動かしているLinuxの中です。

エクスプローラーだと \wsl$\ 以下にWSLのディストロ名、その中にLinux側のファイルシステムを参照できます。

例)
\\wsl$\Ubuntu\home\<username>\reactwork

2022-01-10 (1).png

0Like

Docker Desktopをインストールした際に、WSL2もインストールされるのですが
UbuntuなどはインストールせずにDockerを動かしていました。

image.png

AngularはWindowsホスト側にDockerfile、docker-compose.ymlファイルを作成し、ホットリロードもできたので、Reactも同じ方法でできるかと思っていました。

WSL2にUbuntuをインストールして、試してみます。
また、ご報告させて頂きます。

0Like

Your answer might help someone💌