---

---

React+Docker+DockerComposeの開発環境の構築について説明

投稿日：2020年9月23日

dockerとdocker-composeを使ったreactの開発・デプロイ環境の構築方法について、詳しく解説します！

---

はじめに

この記事について

前提知識

環境

---

ディレクトリ構造

.
├── docker-compose.prod.yml
├── docker-compose.yml
└── react_app
    ├── Dockerfile.dev
    ├── Dockerfile.prod
    └── src
        └── my-app
            ├── README.md
            ├── node_modules
            ├── package.json
            ├── public
            ├── src
            └── yarn.lock

react_app/src/my-app

react_app/Dockerfile.dev

FROM node:latest

COPY src /react_app
WORKDIR /react_app/my-app
ENTRYPOINT ["npm", "start"]

react_app/Dockerfile.prod

FROM node:latest AS builder
COPY src /react_app
WORKDIR /react_app/my-app
RUN npm install
RUN npm run build

FROM nginx:latest
RUN rm -r -f /usr/share/nginx/html
COPY --from=builder /react_app/my-app/build /usr/share/nginx/html

react_app/docker-compose.yml

version: "3"

services:
  react_app:
    build:
      context: ./react_app
      dockerfile: Dockerfile.dev
    image: gcr.io/myproject/react_app
    ports:
      - 3000:3000
    volumes:
      - ./react_app/src:/react_app

react_app/docker-compose.prod.yml

version: "3"

services:
  react_app:
    build:
      context: ./react_app
      dockerfile: Dockerfile.prod
    image: gcr.io/myproject/react_app   # 適宜で適切な値を設定
    ports:
      - 80:80

---

開発から公開の流れ

Reactアプリケーションの開発

$ cd react_app
$ sudo docker-compose up --build -d

$ sudo docker-compose down

ローカルでビルドして確認

$ cd react_app
$ sudo docker-compose -f docker-compose.prod.yml up -d --build

公開

---

---

---