React Nginx Docker 최적화 이미지 빌드

https://kdg-is.tistory.com/277

React & Docker & Jenkins CI&CD 배포 방법

 

위의 과정을 진행하면서 react로 docker image를 만들었는데 용량이 600MB ~ 650MB정도 나왔는데 23.7MB로 최적화를 진행하였습니다. 

 

React 프로젝트 생성

# 명령어 입력
npm install -g create-react-app

# 프로젝트 생성할 디렉토리 이동 후
create-react-app hello-react

// => hello-react 라는 프로젝트가 생성됩니다.

 

전체 프로젝트 구성

 

.dockerignore 파일 생성

• node_modules 폴더를 제외합니다.

/node_modules

 

Dockerfile 파일 생성

• Docker image를 만들기 위해 해당 파일을 생성합니다.
• 아래 명령어 중 COPY conf /etc/nginx에 대해서는 기존에 있는 conf.d 폴더를 지웁니다.
  • conf라는 폴더는 나의 로컬 호스트에 있는 conf 폴더를 말합니다. 아래 사진 참고
  • /etc/nginx 경로는 서버에 있는 nginx의 경로입니다.
  • 나의 conf 폴더를 해당 서버 경로에 있는 곳으로 복사합니다.

# step 1 빌드를 하기 위한 과정
FROM node:16-alpine AS build
COPY    ./package* /usr/src/app/
WORKDIR /usr/src/app
RUN     npm install
COPY . /usr/src/app
RUN npm run build

# step 2 실행 스테이지를 위한 과정
FROM nginx:stable-alpine
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx
COPY --from=build /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

 

1. Build Stage 

# 1. 16 버전의 node를 기본 베이스로 삼고 별칭을 build라고 줍니다.
FROM node:16-alpine AS build

# 2. package로 시작하는 파일들을 /usr/src/app 디렉토리에 복사합니다.
COPY ./package* /usr/src/app/

# 3. cd /usr/src/app 와 같은 의미로 해당 디렉토리로 이동합니다.
WORKDIR /usr/src/app

# 4. 해당 경로에서 npm을 다운 받습니다.
RUN npm install

# 5. 소스를 작업폴더로 복사합니다.
COPY . /usr/src/app

# 6. 빌드를 시작합니다.
RUN npm run build

 

2. Run Stage 

# 1. stable-alpine 버전의 nginx 기본 베이스로 설정합니다.
FROM nginx:stable-alpine

# 2. 기본 베이스로 설정한 nginx의 디렉토리에서 아래 경로의 폴더를 삭제합니다.
RUN rm -rf /etc/nginx/conf.d

# 3. 내가 로컬에서 만든 conf 폴더를 nginx의 서버에 복사합니다.
COPY conf /etc/nginx

# 4. nginx가 동작하기위해 필요한 파일들을 시스템으로 복사합니다
#    --from=build 태그를 이용하여 위에서 빌드한 것을
#    작업 디렉토리(/usr/src/app/build)를 nginx의 디렉토리로 파일을 복사합니다.
#    Nginx의 기본 웹 디렉터리의 주소가 /usr/share/nginx/html 입니다.
COPY --from=build /usr/src/app/build /usr/share/nginx/html

# 5. 80포트 오픈합니다.
EXPOSE 80

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

 

nginx의 설정을 바꾸기 위한 conf 파일을 생성합니다.

• conf 폴더 생성 후 내부에 conf.d 폴더를 생성하고 그 안에 default.conf 파일을 생성합니다.

server {
    listen 80;

    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;
    }
}

 

EC2 인스턴스의 인바운드 규칙 추가

• nginx를 통하여 접속할 수 있도록 80번 포트를 추가해줍니다.

 

Docker Hub에  이미지 push

• 위에서 만들어 놓은 이미지를 도커 허브에 푸시를 합니다.
• 젠킨스를 이용하는 방법은 젠킨스, 도커를 이용하여 React 배포를 참고해주세요.

sudo docker build --no-cache -t cova1256/react-dev .
~ 로그인 과정 생략
sudo docker image tag react-dev cova1256/react-dev || true
sudo docker push cova1256/react-dev

 

Docker hub에 있는 이미지 pull

sudo docker run -d -p 80:80 --name react-container cova1256/react-dev

 

이미지 용량 확인

 

접속 확인

• 퍼블릭 IPv4 주소를 입력하여 접속합니다.