React 와 Nginx Dockerizing

현재 학교에서 개발중인 웹 어플리케이션이 있는데 마땅히 웹서버를 배포할 좋은 서버가 없어서 교내 아무 컴퓨터에다가 우선 가배포실시하려 합니다. 추후에 새로운 서버에 새로 배포를 하게 될 구조이기 때문에 docker를 이용해서 React의 빌드된 파일을 담고있는 nginx Image를 그려놓으면 편리할 것 같다는 생각이 들었습니다. 그래서 React와 Nginx Dockerizing 하는 방법에 대해서 간략히 포스팅해보려 합니다.

React를 Dockerizing(도커화)하기

먼저 React 앱이 있어야 합니다. 현재 제가 재학중인 학교에서 개발중인 어플리케이션을 준비했습니다.

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

FROM node:10 as builder

여기서 node 버전은 10.13.0인데, 저의 PC에서 저 버전을 쓰기 때문에 동일하게 맞춰주었습니다.

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

작업 폴더의 위치를 /usr/src/app 으로 맞춰주었습니다. 그리고 package.json 파일을 작업 폴더로 복사해놓은 후 npm install 명령어를 통해서 앱에 필요한 모든 depencencies를 설치하여 주었습니다.

COPY . /usr/src/app
RUN npm run build

현재 프로젝트 내부에 있는 모든 파일들을 복사해준 후, 소스코드를 build 해주는 명령어를 입력해줍니다.

FROM nginx:1.13.9-alpine

이번엔 nginx 설정차례입니다.

RUN rm -rf /etc/nginx/conf.d

nginx의 기존 설정파일을 삭제해주었습니다. 그리고 저의 프로젝트 폴더 내부 conf/conf.d/default.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;
}
}

평소 nginx 에 react 를 배포할때와 같은 모양새로 설정파일을 맞추어줍니다. 그리고 다시 Dockerfile 로 돌아오도록 하겠습니다.

COPY conf /etc/nginx

conf 폴더 내부에 있는 모든 contents를 Docker container 내부의 /etc/nginx 경로에 복사해주었습니다.

container 내부에는 /etc/nginx/conf.d/default.conf 이런식으로 저장되어졌을 것입니다.

COPY --from=builder /usr/src/app/build /usr/share/nginx/html

위에서 생성한 앱의 빌드산출물을 nginx의 샘플 앱이 사용하던 폴더로 이동합니다.

EXPOSE 80
CMD [ "nginx", "-g", "daemon off;" ]

80 포트로 container를 오픈하고 nginx를 실행 및 docker daemon 을 종료하여 줍니다.

이제 이미지를 만들어봅니다.

docker build . -t kbucard-app-client

kbucard-app-client 라는 태그이름으로 IMAGE 가 생성됩니다. 이제 해당 IMAGE 를 동작시켜봅니다.

docker run -it -p 80:80 kbucard-app-client

• it 옵션으로 실행시켜주었기 때문에 background에서 진행되진 않습니다. background 에서 실행시켜주고 싶다면 docker run -itd -p 80:80 kbucard-app-client 라고 입력해줍니다.

localhost 에서 잘 돌아가는 것을 확인 할 수 있습니다. 이제 이상태로 그대로 배포해주기면 하면 쉽고 빠르게 nginx 를 이용해서 웹 어플리케이션을 배포해줄 수 있습니다.

여기서 조금만 더 기능을 덧붙여볼게요.

배포할때마다 항상 image 를 빌드하고, image 를 run 하는 명령어를 수시로 치기는 불편하니, docker-compose.yml 파일을 하나 작성해줍니다.

version: '3'
services:
   app:
      container_name: nginx-react
      restart: always
      build: .
      ports:
         - '80:80'

포트는 80 번, 그리고 image는 현재 위치에있는 Dockerfile 을 빌드해서 만든다고 명시해주고,

docker-compose up
docker-compose down
docker-compose start
docker-compose stop
docker-compose build

등의 짧은 명령어만으로, 네트워크를 구축, 서버 시작, 중지, 빌드 등등을 간단하게 진행할수있게 되었습니다.

추후에 안정된 서버를 구하게 되면 ssl key를 구해서 https 로 감싸주려고 합니다. 추후에 https 로 감싸는 부분도 포스팅할 수 있으면 포스팅하도록 하겠습니다.