最初に
Dockerを用いてReact環境を作ったときの備忘録です。当方、初心者ですので厳密性などは欠きます。皆さんの助けになったらとてもうれしい気持ちです！
環境について
- windows
- Docker version 24.0.2
- remote-container（vscodeの拡張機能）
Macについては動作確認していません。
ディレクトリ構成
最終的な構成
最初に、環境構築後のディレクトリ構成を下に示します。
my-react-app-test
└── Dockerfile
└── docker-compose.yml
└── app
└── react-app
├── node_modules
├── public
├── src
├── .gitignore
├── package-lock.json
├── package.json
└── README.md
最初の構成
my-react-app-test
└── Dockerfile
└── docker-compose.yml
└── app
最初の構成は上記のようになっています。
Dockerfile
Dockerfileの記述は以下の通りです。
FROM node:16.14.2
WORKDIR /usr/src/app
-
nodeのバージョンとして最初に定義しています。また、alpineをつけるとvscodeのdev containerでattachすることができなかったため、消しています。dev containerはalpineには使えないのか。。
-
次に、コンテナ内でどのディレクトリにおいて作業したいかをWORKDIRで決めてあげます。
docker-compose.yml
docker-compose.ymlの記述は以下の通りです。
version: '3.9'
services:
react-app:
build:
context: .
dockerfile: Dockerfile
volumes:
- ./app:/usr/src/app
ports:
- "3000:3000"
stdin_open: true
environment:
- CHOKIDAR_USEPOLLING=true
tty: true
ymlの記述について、environmentを上記のように設定することでホットリロードできるようにしています。しかし、バージョンによっては、package.jsonをいじる必要があるため、後で紹介します。
docker-compose.ymlの詳細
- react-app
- サービスの名前を決めてあげます。
- build
- buildとしてDockerfileを用いるのでdockerfileとしています。また、同じディレクトリにいるため、直接記述して指定してあげます。また、contextについてはDockerデーモンへルートディレクトリを渡しており、今回のような場合は必要が無いと思うのですが、一応記述してあります。Dockerfileとdocker-compose.ymlが同じディレクトリではない場合にはcontext: . の記述が無いとエラーの原因になります。(未検証)
- volumes:
- ローカルの./appとコンテナの/usr/src/appをマウントしてあげます。
- ports:
- ローカルホストのポートを指定します。
- tty:
- コンテナが持続するようにtty:trueとしておきます。
実際に走らせる
docker-compose run --rm react-app sh -c "npm install -g create-react-app && create-react-app react-app"
無事に終了したら、react-appフォルダがappの直下に追加されていると思います。
docker-compose up -d
でコンテナを動かします。一応バックグラウンドでも動くように-dを付けています。
コンテナに入る
vscodeを開いて、remote-containerのattachの機能を使ってコンテナに入ります。コンテナへ入ることに成功したら、実際に/usr/src/app/react-appに入ります。
最後にnpm startをして問題がなければlocalhost3000へ飛ばされるので、reactのロゴがくるくる回っているのを確認すれば成功となります。
ホットリロードについて
ホットリロードについては、package.jsonのscriptsを変更する必要があり、以下のように変更してください
"start": "WATCHPACK_POLLING=true react-scripts start"
最後に
以上となります。参考になりましたら幸いです。
参考記事