Docker

[Docker] React.js + Nginx

React.js 앱을 Docker를 이용해 배포 할 때는 Nginx를 이용하면 깔끔하게 처리할 수 있다.
기본적인 원리는, 우선 React로 작성된 앱을 빌드를 하고 생성된 html 파일을 컨테이너의 share/nginx/html 폴더의 기본 html에 덮어 씌우는 방식이다.
그리고 교체된 html 파일들을 가지고 nginx를 시작해주기만 하면 끝.

샘플 프로젝트 보러가기

# build environment
FROM node:9.6.1 as builder
RUN mkdir -p /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@1.1.1 -g --silent
COPY . /usr/src/app
RUN npm run build

# production environment
FROM nginx:1.13.9-alpine
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]