nginx를 활용한 dockerfile 빌드

# 빌드된 결과물만 dockerfile로 생성하여 배포하는 방법이다.

1. dockerfile 내용

# docker로 빌드할 이미지를 설정
FROM node:16.14.2 as builder

# 작업 경로 및 디렉토리 설정
WORKDIR /app

# 디폴트 리스소 경로에 있는 package.json 파일을 /app/package.json로 복사
COPY package.json /app/package.json

# 라이브러리 충동을 무시하기 위해 실행한다.
RUN npm install --legacy-peer-deps

# 웹앱의 구동, 빌드 등 사용시 react-scripts를 사용한다.
RUN npm install react-scripts@5.0.1

# 디폴트 리소스 경로에 있는 모든 파일을 /app 으로 복사한다.
COPY . /app

# 빌드 시작
RUN npm run build:dev

# docker 기본 이미지 설정
FROM nginx:1.13.9-alpine

# nginx의 기본 설정을 삭제한다.
RUN rm -rf /etc/nginx/conf.d

# 디폴트 리소스 경로에 있는 conf 폴더를 도커의 /etc/nginx 폴더로 복사한다.
COPY conf /etc/nginx

# 맨위의 as builder 로부터 복사한다는 것을 선언한다. 
# 그리고 builder의 /app/build를 새로 생성된 컨테이너의 /usr/share/nginx/html로 복사한다.
COPY --from=builder /app/build /usr/share/nginx/html

# 80포트 오픈하고 nginx 실행
EXPOSE 80

# Ubuntu에서 Nginx를 포어그라운드에서 실행할 경우 아래와 같이 실행
CMD ["nginx", "-g", "daemon off;"]

2. default.conf 파일의 내용 살펴보기

- default.conf 파일은 아래와 같이 설정되어 있다.

server {
  listen 3000;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

- 위의 내용을 보면  최종적으로 try_files $uri $uri/ /index.html; 파일이 실행되는것을 볼 수 있다.

index.html을 실행하는 이유는 react가 최종적으로 Conponent.jsx를 실행하는 파일이 index.html 파일이기 때문이다.

관련내용은 아래의 링크를 참조한다.

2022.10.27 - [⭐ React + SpringBoot] - React와 SpringBoot의 흐름, 간단정리

React와 SpringBoot의 흐름, 간단정리

3. 내용 정리

위의 dockerfile의 내용을 보면 멀티 빌드를 수행하는것을 볼 수 있다.
가장 처음에 FROM node:16.14.2 as builder 를 통해 빌드 이미지를 로드할수 있도록 설정하고,
RUN npm run build:dev 를 통해서 1차적인 빌드를 완료한다.
그 후에 FROM nginx:1.13.9-alpine 으로 2차 빌드를 시작한다.
그리고 COPY --from=builder /app/build /usr/share/nginx/html 를 통해 1차 빌드한 이미지에서 /app/build 부분만 nginx/html로 복사하여 빌드된 이미지만을 가지고 하나의 이미지를 최종적으로 생성 한다.
이렇게 멀티빌드를 하는 이유는 간단하다. 쓸데없는 용량을 줄이기 위해서 이다.
빌드된 결과물만을 가지고 이미지를 생성한다면 빠른 퍼포먼스와 적용 용량을 사용하여 이미지를 생성 및 활용할 수 있다.