React + Nginx 를 도커 이미지로 만들어서 배포하기(React Project Docker Image Resize)

React + Nginx 를 도커 이미지로 만들어서 배포하기

# base image 설정(as build 로 완료된 파일을 밑에서 사용할 수 있다.)
FROM node:16.19.0-alpine as builder

# root 에 app 폴더를 생성
RUN mkdir /app

# work dir 고정
WORKDIR /app

COPY . .

RUN apk --no-cache --virtual build-dependencies add \
    python3 \
    make \
    g++ \
    && apk del build-dependencies

RUN apk --update add rsync

ENV PATH /usr/src/app/node_modules/.bin:$PATH

# RUN npm install 
# 안될 시
RUN npm install --legacy-peer-deps 

# 호스트 머신의 현재 디렉토리 파일들을 컨테이너 내부로 전부 복사
COPY . .

# npm build
RUN npm run build

# nginx 이미지를 사용합니다. 뒤에 tag가 없으면 latest 를 사용합니다.
FROM nginx:1.25-alpine

# 이전 빌드 단계에서 빌드한 결과물을 /app/build 으로 복사한다.
COPY --from=builder /app/build /app/build

# nginx 의 default.conf 를 삭제
RUN rm /etc/nginx/conf.d/default.conf

# host pc 의 nginx.conf 를 아래 경로에 복사
COPY ./nginx.conf /etc/nginx/conf.d

# 80 포트 오픈
EXPOSE 80

# container 실행 시 자동으로 실행할 command. nginx 시작함
CMD ["nginx", "-g", "daemon off;"]