マルチステージビルドの利用-Docker

Dockerのマルチステージビルドを利用して、Reactアプリの開発環境と本番環境(ビルド環境)を作成する。
※以下の記事の続きとなります。 maya313.hatenablog.com

Dockerで利用するファイル

Dockerfile

FROM node:18.12.1-alpine as common

# Develop
FROM common as dev
WORKDIR /usr/src/app

# Production
FROM common as builder
COPY ./react-app /usr/src/app
WORKDIR /usr/src/app/react-app
RUN npm install
RUN npm run build

FROM nginx:1.23.3 as prod
RUN rm -r -f /usr/share/nginx/html
COPY --from=builder /usr/src/app/react-app/build /usr/share/nginx/html

docker-compose.yml

version: '3.9'

services:
  dev_react_app:
    build:
      context: .
      dockerfile: Dockerfile
      target: dev
    volumes:
      - ./react-app:/usr/src/app
    command: sh -c "cd react-app && npm start"
    ports:
      - "3000:3000"
  prod_react_app:
    build:
      context: .
      dockerfile: Dockerfile
      target: prod
    image: maya/react_app
    ports:
      - "80:80"

開発環境の利用方法

$ docker-compose up dev_react_app

本番環境(ビルド環境)の利用方法

$ docker-compose build prod_react_app