[React] WSL에 Dockerfile로 React 환경 구축

React 프로젝트 생성

npx create-react-app frontend

Dockerfile로 Image Build

FROM node:18-alpine

# 유저 설정
USER root

# 작업 디렉토리를 /usr/src/app으로 설정
WORKDIR /usr/src/app/frontend

# 호스트의 package.json, package-lock.json 파일을 작업 디렉토리에 복사
COPY package*.json .

# 필요 패키지 설치
RUN npm install

# 컨테이너 외부로 노출할 포트 설정 (React dev server 기본값: 3000)
EXPOSE 3000

# 컨테이너 실행 시 npm start 명령 수행
CMD ["npm", "start"]

docker build -t react-image .

Container 생성

docker run -dit --name [CONTAINER NAME] -p [HOST PORT]:[CONTAINER PORT] -v [HOST DIR]:[PROJECT DIR] [IMAGE NAME]
docker run -dit --name web_server -p 3000:3000 -v ${PWD}:/usr/src/app/frontend react-image