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