Docker를 이용해서 React.js를 배포하기 1

인프런의 따라하며 배우는 도커와 CI환경을 듣고 있다고 지난 포스팅에서 언급했는데요. 도커도 처음부터 끝까지 제대로 배우려면 그 엄청난 양으로 우리를 압도합니다. 해당 강의는 초보자를 위한 강의 답게 실제로 쓰이는 필수적인 내용들만 간추려서 예제와 함께 따라 배우는 거라 이해도 쉽습니다. 강추....!

---

Dockerfile.dev

개발환경에서 사용하는 도커 파일은 Dockerfile 끝에 .dev를 덧붙여줍니다. Dockerfile과 마찬가지로 안에 쓰이는 구문은 같습니다만 터미널에서 해당 파일을 실행시킬 때는 다음과 같이 덧붙여줘야 합니다. -f 뒤에 Dockerfile.dev를 명시해주어 지금은 이 파일을 이용해서 이미지를 빌드해줄것이라고 알려주어야 합니다. 그렇지 않으면 Dockerfile을 찾을 것이고, 없으면 에러가 납니다.

 

docker build -f Dockerfile.dev ./

 

 

리액트의 경우, 도커의 이미지를 실행할 때 -it를 반드시 덧붙여줘야 합니다. 붙이지 않으면 리액트의 개발 서버가 계속 유지되는게 아니고 명령어를 시작해준 당시만 돌아갔다가 바로 중단된다고 합니다. -it는 interactive mode를 의미합니다.

 

docker run -it -p 3000:3000 <docker_id/image_name>

 

 

지난번 개발 환경에서 매번 COPY를 이용해서 변경된 내용을 빌드하고 변경된 내용을 확인하는 과정이 번거로워서 'Volume'을 이용해서 필요한 파일을 로컬 파일과 매핑해 실시간으로 변경된 내용을 확인할 수 있었습니다. 이것을 Docker-compose를 이용해서 매번 길게 작성하는 명령어로 부터 자유로워질 수 있습니다.

 

 

docker-compose.yml을 작성하여 기나 긴 도커 실행 명령어를 docker-compose up으로 줄일 수 있습니다.

 

//docker-compose.yml

version: "3"
services:
  react
    build:
      -context: .
      -dockerfile: Dockerfile.dev
    port:
      -3000:3000
    volumes:
      -usr/src/app/node_modules //참조 안할 것
      -.:/usr/src/app
    stdin_open: true
    tty: true

 

마지막의 두 줄 stdin_open: true tty: true은 docker가 interactive mode를 유지하기 위한 명령어 입니다. 없으면 리액트의 변경 내용이 볼륨을 이용하더라도 바로 반영되지 않습니다. 리액트 앱을 개발환경에서 이미지로 생성하고, 앱을 실행해보겠습니다.

 

 

docker build -f dockerfile.dev .
docker run -it <image_name> npm run start

 

 

 

 

---

운영환경, Nginx

리액트는 자체 개발서버를 가지고 있습니다. 개발 서버에는 우리의 개발 내용이 변경되어 저장될 때마다 자동으로 빌드해주고 그 내용을 즉각반영해서 화면으로 띄워주는 기능이 있습니다. 개발 환경에선 변경 내용을 즉각 실시간으로 확인 가능하니 편리한 기능이지만, 실제 운영 환경에선 변경 내용이 즉각 반영되서도 안되며 그 기능 자체가 무거워서 운영 환경에선 필요 없기도 합니다.

 

따라서 운영환경에선 우리가 만든 파일을 정적 파일로 빌드하고, 그 빌드된 파일을 돌리는 운영환경을 위한 서버가 필요합니다. 유명한 Nginx가 대표적인 운영환경 서버입니다. 도커에서도 Nginx가 자주 사용되는 만큼 이미지가 있고, 사용하는 방법이 나와 있습니다.

개발에서 오류가 없고, 배포를 준비한다면 이제는 dev환경에서 나와 prod환경으로 갈 때 입니다. Dockerfile.dev에서 Dockerfile로 갈아타야 합니다.

 

 

// Dockerfile

FROM node:alpine as build
WORKDIR /usr/src/app
COPY package.json ./
RUN npm install
COPY . .
CMD "npm", "run", "build"

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

 

마지막 nginx의 COPY부분을 보면 --from= build로서 생성된 usr/src/app/build폴더를 /usr/share/nginx/html로 카피한다는 내용입니다. 마지막 nginx의 폴더는 기본적으로 설정된 폴더로 변경 가능하지만, 굳이....?!