[도커(docker)] Dockerfile를 이용하여 react app 서버 설치 및 개발 환경 구성하기

[도커(docker)] Dockerfile를 이용하여 react app 서버 설치 및 개발 환경 구성하기

📢  작성순서  📌 로컬에서 react app 설치 및 환경구성    📌 Dockerfile 파일 작성 📌 Docker image 빌드 📌 Docker에서 react app 실행

 

📌로컬에서 react app 설치 및 환경구성  

[react] react 설치하기 - Create React App

 

📌  Dockerfile 파일 작성

✔ 루트 폴더에서  Dockerfile 파일을 작성한다. 

FROM node:alpine

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

CMD ["npm", "start"]

 

📌  Docker image 빌드 

✔ docker build 명령을 이용하여 image를 생성한다. 

# react-app 이름으로 이미지를 빌드한다. 
docker build -t react-app .

 

📌  Docker에서 react app 실행

✔ docker run 명령을 이용하여 react app를 실행한다.

docker run -it -p 3000:3000 -v /usr/src/app/node_modules -v %cd%:/usr/src/app react-app

👉 명령에 대한 설명입니다.

docker run 
  # 인터랙티브 모드(-i)와 터미널(-t)을 활성화하여 컨테이너 내에서 명령어 입력 가능하게 함
  -it   
  
  # 호스트의 3000번 포트를 컨테이너의 3000번 포트에 연결
  -p 3000:3000   
  
  # 컨테이너의 node_modules 디렉터리를 볼륨으로 유지하여 로컬파일을 참조하지 않도록 함
  # 로컬 파일과 충돌 방지
  -v /usr/src/app/node_modules  
  
  # 현재 디렉터리(%cd%)를 컨테이너의 /usr/src/app에 마운트하여 실시간 코드 변경 반영
  -v %cd%:/usr/src/app 
  
  # 실행할 도커 이미지 (React 앱을 포함한 이미지)
  react-app

👉 실행결과입니다.