概要
Dockerを使って簡単にReact環境を構築する方法をご紹介します。
環境
macOS Big Sur 11.4
Docker 20.10.6
docker-compose 1.29.1
構成
.
├ docker
│ └ node
│ └ Dockerfile
├ node
│ └ react-sample
└ docker-compose.yml
手順
今回は、react-sampleという名前でアプリケーションが作成されます。
1. docker-compose.ymlの作成
他の名前が良ければ以下のreact-sampleを変更してください。
docker-compose.yml
version: '3.9'
services:
node:
build: ./docker/node
volumes:
- ./node:/usr/src/app:cached
command: sh -c "cd react-sample && yarn start"
ports:
- "3000:3000"
2. Dockerfile作成
FROM node:16-alpine
WORKDIR /usr/src/app
3. Reactアプリの構築
他の名前が良ければ以下のreact-sampleを変更してください。
docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app react-sample"
4. 起動
docker-compose up -d
5. 確認
http://localhost:3000 にアクセスしてみましょう。
以下のような画面が表示されれば成功です。
コンテナが立ち上がってから、画面表示されるまで少しラグがある場合があります。
参考
5分で始めるReact with Docker
↧