React와 Nginx를 Dockerizing하는 방법

Docker(도커)로 React와 Nginx를 함께 배포하는 방법에 대해서 알아보겠습니다. React를 배포할 때 Nginx를 세팅하는 것이 귀찮았는데 Docker로 세팅을 해두면 나중에 서버를 변경할 때 편리합니다.

완성된 코드는 GitHub에 있습니다.

이전 글 Nginx로 React를 배포하는 방법에서 nginx 웹서버로 react를 배포하는 방법에 대해서 알아보았습니다.

React를 Dockerizing(도커화)하기

먼저 React 앱이 있어야 합니다. 이전 글과 같이 기본 앱을 만들었습니다.

$ create-react-app myapp
$ cd myapp

그리고 설정파일인 Dockerfile파일을 만들어야 합니다. 프로젝트 폴더에 파일명을 Dockerfile으로 하고 내용은 아래와 같이 넣어주세요.

FROM node:8.10.0 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@2.1.3 -g --silent

# 소스를 작업폴더로 복사하고 앱 실행
COPY . /usr/src/app
CMD ["npm", "start"]

여기서 node 버전은 8.10.0인데, 저의 PC에서 저 버전을 쓰기 때문에 동일하게 맞춰주었습니다. Dockerfile을 보시면 먼저 앱이 실행될 폴더를 만들고, 그곳에 npm을 설치한 이후 앱을 실행하도록 되어있습니다.

준비는 모두 끝났습니다. 이제 docker 이미지를 만들어야 합니다.

$ docker build -t sample-app .

docker 이미지가 생성되었으면, container를 만들고 실행합니다.(포트는 3000으로 설정)

$ docker run -it -p 3000:3000

잘 동작하나요? 저는 잘 동작됩니다. PC에서 사용하던 개발환경을 Docker에 설정하지 않아 문제가 발생할 수 있습니다. 동작이 잘 안된다면, 다시 한번 확인해주세요.

React와 Nginx를 Dockerizing하기

개발을 마치고 배포를 해야한다면 웹서버와 함께 Dockerizing이 되어야 합니다. 여기서는 웹서버로 Nginx를 사용하여 React와 함께 dockerizing하였습니다.

Dockerfile을 새로 생성해야 합니다. 파일명을 Dockerfile-prod로 생성해주세요.

FROM node:8.10.0 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@2.1.3 -g --silent

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



FROM nginx:1.13.9-alpine
# 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;"]

위와는 조금 다르게, npm을 설치하고 앱을 실행하지 않고 빌드만 합니다. 그 이후의 설정은, nginx설정과 빌드산출물을 nginx 경로의 폴더로 옮기고 nginx를 실행합니다.

nginx를 설정하기 위해, nginx 설정파일을 미리 만들어둬야 합니다. 프로젝트 폴더에 conf/conf.d/default.conf 폴더와 파일을 생성합니다.

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

주요 설정 내용은, 80포트를 사용하고 root 경로를 react의 빌드 산출물이 있는 폴더로 설정합니다.

이제 설정은 끝났습니다. 도커 이미지를 만들어야 합니다. Dockerfile-prod를 사용하기 때문에 명시적으로 이 파일을 지정해주었습니다.

$ docker build -f Dockerfile-prod -t sample-app-prod .

이미지가 만들어지면 container를 만들고 실행합니다.

$ docker run -it -p 80:80 sample-app-prod

잘 실행되시나요? 문제가 없다면 정상적으로 실행이 되어야 합니다.

정리

React와 Nginx가 실행되도록 도커 이미지를 만들어보았습니다. 도커 이미지를 만드는 과정이 귀찮지만 한번 만들어두면 AWS, Azure, Gcloud와 같은 클라우드에 앱을 세팅하는 과정이 매우 쉬워집니다.

참고

• 완성된 코드는 GitHub에 있습니다
• Dockerizing a react app - mherman