React 앱 도커화

Cameron Gibson로 작성

버전

노드 버전: v16.13.0
도커 버전: 20.10.12

링크

GitHub Repository
Here’s How to Dockerize React App

목차

React 앱 만들기

Dockerfile 생성, 컨테이너 이미지 생성 및 실행

1. 반응 앱 만들기

① 다음과 같은 React App 생성official tutorial
② 아래 명령어 실행

npx create-react-app <app name> # witch is going to be the folder name
cd <app name>
npm start

③ 접속http://localhost:3000
React 앱 시작 페이지가 표시되는지 확인합니다.


④ Ctrl + C로 실행 중지

2. Dockerfile, 이미지 생성 및 컨테이너 실행

① 루트 디렉토리에 생성Dockerfile그리고 아래 코드를 복사

# Dockerfile
FROM node:16
WORKDIR /reactapp
ENV PATH /reactapp/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm i
COPY . ./
CMD ["npm", "start"]

② 이미지 구축

docker build -t <image name> . 

③ 컨테이너 실행

docker run \
    -it \
    --rm \
    -v ${PWD}:/reactapp \
    -v /reactapp/node_modules \
    -p 3001:3000 \
    -e CHOKIDAR_USEPOLLING=true \
    <image name>:latest

④ 접속http://localhost:3001
React 앱 시작 페이지가 표시되는지 확인합니다.