운영환경을 위한 Nginx
이제 배포를 할 준비를 해보도록 하겠습니다. npm start를 통해서 앱을 실행시켰을 때 서버는 개발을 도와주기위한 여러가지 기능들(코드가 수정되었을 때 자동반영..등등)을 갖추고있습니다. 하지만 배포의 입장에서는 필요없는 기능들입니다. 그래서 배포시에는 ngnix라는 서버를 사용합니다. nginx는 정적파일들을 요청을 받았을 때 넘겨주고나서 nodejs에 나머지 요청을 전달하기 때문에 일을 분산시켜줍니다.
nginx가 넘겨주는 정적파일들은 npm run build를 통해서 만들어지는 build라는 파일안에 들어있습니다. 따라서 그림과 같이 리액트 컨테이너 안에 ngnix를 포함시켜주고 ngnix가 build에 있는 정적파일을 관리할 수 있게 매핑해주면 됩니다.
dockerfile
##BUILD##
FROM node:alpine as builder
WORKDIR '/usr/src/app'
COPY package.json .
RUN npm install
COPY ./ ./
RUN npm run build
##RUN##
FROM nginx
COPY --from=builder /usr/src/app/build /usr/share/nginx/html배포용 도커파일은 두부분으로 분리가 됩니다. 먼저 npm run build를 통해 build폴더를 만들고 그것을 nginx에게 넘겨줘야하기 때문입니다. 그래서 build부분과 run부분으로 나뉩니다.
build부분에서는 node로 이미지를 받아오고 이전과 같이 작성해줍니다. 이때 npm start가 아닌 npm run build를 해서 /usr/src/app안에 build가 생성되게 해줍니다. 그런뒤에 ngnix 이미지를 받아와서 ngnix에게 build를 넘겨주면 되는데요.
nginx는 default로 /usr/share/nginx/html이라는 경로안에서 build를 찾아서 서브해주기때문에 거기다가 복사해주겠습니다. 그런데 우리가 아까 만들었던 node기반 컨테이너에서 가져오는 것이지 현재 로컬에서 가져오는 것이 아니기 때문에 COPY를 할때 기준을 --from을 통해서 builder로 설정해줍니다. 그러면 builder에서 /usr/src/app/build에 있는 파일들을 모두 ngnix의 /usr/share/nginx/html에 복사해줄 것입니다.
이미지를 빌드하고 컨테이너를 실행해보도록 하겠습니다. ngnix는 기본포트가 80으로 되어있어서 포트매핑을 80으로 해주면됩니다.
> docker build ./
> docker run -p 5000:80 196f25b1e4RUN vs CMD
위에 dockerfile을 보면 CMD가 아니라 RUN으로 npm run build해주고 있습니다. 그 이유는 CMD는 컨테이너를 실행할 때 실행되는 명령어이고 RUN은 이미지 생성시에 실행됩니다. 따라서 지금은 이미지를 생성하는 과정에서 build폴더의 생성이 필요한 것이어서 CMD로 하면 ngnix에서 COPY를 할 수 없어서 이미지빌드를 실패합니다.
개발 vs 배포
여기서 ngnix로 했을때와 개발서버로 했을때의 차이를 비교해보도록 하겠습니다.
개발
먼저 ngnix로 바꾸기 전의 세팅(dockerfile.dev)로 컨테이너를 만들어서 들어가보겠습니다. 여러 정적컨텐츠의 요청들이 왔었고 size도 차지하는편입니다. 또한 새로고침을해도 정적컨텐츠가 전혀 캐시되지 않고 계속 새로 가져옵니다.
X-Powered-By를 보면 Express가 server 역할을 하고있는 것같네요!
배포
이번에는 배포로 세팅을 하고(dockerfile) 컨테이너를 만들어 실행해봤습니다. 요청이 오는 정적컨텐츠의 이름이 조금 다릅니다. 그리고 용량이 작아졌고 새로고침을 하면 캐시된것을 사용해서 효율적인 것을 볼 수 있습니다.
아까와는 다르게 server부분에 ngnix라고 뜨네요!
