Docker React環境簡単構築

概要

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