Docker ( React + Nginx ) Dockerizing 하기

 

먼저 리액트 프로젝트 루트에 Dockerfile-prod ( 배포용 도커파일 ) 을 하나 생성한다.

# Dockerfile
# 사용할 노드 버전
FROM node:latest as builder

# 작업 폴더를 만들고 npm 설치
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

# 소스를 작업폴더로 복사하고 빌드
COPY . /usr/src/app
RUN npm run build

FROM nginx
# nginx의 기본 설정을 삭제
RUN rm -rf /etc/nginx/conf.d
# 설정파일을 해당 경로로 복사
COPY conf /etc/nginx

# 위에서 생성한 앱의 빌드결과를 nginx의 샘플 앱이 사용하던 폴더로 복사
COPY --from=builder /usr/src/app/build /usr/share/nginx/html

# 80포트 오픈하고 nginx 실행
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

 

프로젝트 루트에 conf/conf.d/default.conf 파일을 생성한다. ( 아래의 경우는 ssl 인증서 또한 적용 )

# conf file
server {
    listen 80;
    server_name     www.defualt.com;

    location / {
        return 301 https://www.defualt.com;
    }    
}

server {
    listen 443 ssl;
    server_name     www.defualt.com;

    ssl_certificate      ssl/defaultFileName;	
    ssl_certificate_key  ssl/defaultFileName;
	
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;

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

 

여기까지 진행했다면 폴더구조는 다음과 같을 것이다.

 

이제 이미지를 생성하자.

docker build -f Dockerfile-prod -t react-nginx-test .

 

이미지가 정상적으로 만들어졌다면, 컨테이너를 실행해보자.

docker run --name test-app -p 3000:80 react-nginx-test

 

해당 이미지를 공개적으로 사용하고 싶다면 docker hub 를 통해 push / pull 을 진행하면 될 것이고,
이미지를 tar 파일로 변경하여 배포하고 싶다면 이미지를 아래 명령어로 생성한 후

docker save -o test.tar react-nginx-test

 

tar 사용하고자 하는 곳으로 옮겨서 load 하자.
load 명령어는 다음과 같다.

docker load -i test.tar

 

react 와 nginx 를 말아서 배포하는 방법을 알아보았다.
어려울줄 알았지만, 글로 정리하고 나니 생각보다 단순했다.