[2020.05.24] Docker 기초 - React을 Docker로 배포하기

 

 

작년 쯤 도커 개념과 컨테이너 실행 정도만 공부하고 블로깅 했었는데, 이번에 컨테이너 기반으로 다루는 기술의 중요성을 많이 깨닫고 Docker부터 다시 공부해보려고 한다. 

 

#도커라이징

현재 프로젝트 및 개발환경을 도커 이미지로 생성하는 작업이다.

우선 이와 같이 가볍게 express 서버를 하나 생성한다.

해당 서버 및 환경을 도커 이미지로 변경하기 위해서는 도커 파일을 생성하여 실행시켜야 한다.

 

# 리액트 프로젝트 생성

리액트를 써본 개발자들에게 매우 익숙한  create-react-app을 이용해서 리액트 프로젝트를 하나 생성한다.

$ create-reate-app react-docker // 도커 컨테이너로 올릴 리액트 프로젝트 생성

 

# Docker파일 생성

리액트 프로젝트 환경을 구성했으면, 해당 프로젝트 환경을 이미지로 도커라이징을 하기 위한 도커파일을 생성해보자.

Docker 컨테이너를 생성하기 위해서는 Docker 이미지가 있어야 한다. 그리고 이 이미지를 생성하는 방법은 DockerFile을 이용해서 도커라이징을 해야한다.

여기서는 Docker Compose를 사용할 것이다.

Docker Compose란? 
여러 컨테이너를 생성하는 Docker 어플리케이션을 정의하고 실행하도록 하는 도구이다. 각 어플리케이션의 설정과 연관된 모든 서비스를 함께 설정 및 실행을 할 수 있다.

 

root경로에 docker-compose.yml 파일을 생성한다.

// cocker-compose.yml
version: "3.7"

services:
  sample:
    container_name: react-dockerize
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ".:/app"
      - "/app/node_modules"
    ports:
      - "3001:3000"
    environment:
      - NODE_ENV=development
    stdin_open: true
    tty: true

 

 

그리고 실제 Docker image를 생성하는 작업을 하는 Dockerfile을 만들어준다.

// Dockerfile

FROM node:12.2.0-alpine

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json /app/package.json
RUN npm install 
RUN npm install react-scripts@3.0.1 -g


CMD ["npm", "start"]

 

# Docker 실행

이제 아래 명령어로 Docker-comoise.yml을 실행시켜주면, docker 이미지와 컨테이너가 실행이 된다.

$ docker-compose up -d --build

 

docker images 명령어를 이용해 확인해보면, 해당 React의 이미지를 확인할 수 있고, docker ps -a 명령어로 컨테이너에 마운트 되어 실행되고 있는 것을 확인할 수 있다.

해당 컨테이너를 종료하려면 아래 명령어를 실행하면 된다.

$ docker-compose stop

 

이슈 사항 정리

# docker-compose.yml 파일을 실행시켰는데, 아래와 같이 에러가 나요!

ERROR: yaml.scanner.ScannerError: while scanning for the next token found character '\t' that cannot start any token.
=> 해당 에러는 yml 파일에 탭 문자가 들어가서 그런 것이다. 들여쓰기를 탭이 아니라 띄어쓰기로 변경해서 하면 해결이 된다.

ERROR: yaml.scanner.ScannerError: mapping values are not allowed here
=> 들여쓰기 레벨이 안맞아서 나는 에러이다. 들여쓰기 다시 확인하고 맞추면 된다.