[React] 도커 이미지 생성 및 실행

로컬 PC에서 React App 프로젝트의 도커 이미지를 생성하고 클라우드 서버에 배포하기

1. Dockerfile 생성

  /my-react-project
  ├── src/
  ├── public/
  ├── package.json
  └── Dockerfile  <-- 파일 생성 후 이 파일에서 FROM 명령어 작성 

---

2. FROM 명령어 작성

  FROM node:18-alpine as builder  
  WORKDIR /usr/src/app 			 
  COPY package.json ./
  RUN npm install
  COPY . ./
  RUN npm run build

  FROM nginx:alpine
  COPY --from=builder /usr/src/app/build /usr/share/nginx/html
  EXPOSE 80
  CMD ["nginx", "-g", "daemon off;"]

명령어	설명
FROM node:18-alpine as builder	도커 이미지의 기반이 될 이미지를 지정
WORKDIR /usr/src/app	컨테이너 내부에서 명령어들이 실행될 작업 디렉터리를 설정
COPY package.json	의존성 파일 복사
RUN npm install	의존성 설치
COPY . ./	소스 코드 전체 복사
RUN npm run build	배포 파일 생성
FROM nginx:alpine	최종 베이스 이미지 설정
COPY -- from ...	빌드 결과 복사
EXPOSE 80	컨테이너 내부에서 웹서버가 80번 포트를 사용하고 있음을 외부에 알림
CMD ...	컨테이너 실행 명령어

---

3. 도커 이미지 생성

	<!-- vscode 터미널에서 명령어 사용 -->
	<React 프로젝트 경로> $ docker build -t (이미지 이름)

---

4. 배포 및 컨테이너 실행

• tar 파일로 저장

	<!-- vscode 터미널에서 명령어 사용 -->
	<React 프로젝트 경로> $ docker save (이미지 이름) -o (파일저장명).tar

• 서버에 업로드 및 실행

	<!-- 1. FileZilla를 이용하여 원하는 경로에 tar 파일 업로드 -->
    
    <!-- 2. cmd 또는 vscode 터미널에서 서버 접속하여 tar 파일이 업로드된 경로로 이동 -->
	
    <!-- 3. 이미지 로드 -->
    $ docker load -i (tar 파일명)
    
    <!-- 2. 컨테이너 실행 -->
    $ docker run -d -p 80:80 --name (컨테이너명 지정) (이미지 이름)
    
    <!-- 컨테이너 실행 확인 -->
    $ docker ps