도커컴포즈로 리액트 환경 구성하기

도커 컨테이너를 이용해서 React App 개발 환경을 구성해보도록 하자.

리액트를 사용하기 위해서는 먼저 npx 라이브러리가 설치되어 있어야 한다.

npm -i npx -g

 

npx를 설치한 후에 아래 명령어를 통해 리액트를 로컬 환경에서 셋업할 수 있다.

npx create-react-app movie_app

create-react-app

로컬 개발 환경을 구성했다면, 이제 Docker-compose.yml과 Dockerfile를 통해 도커 환경을 구성하자.

아래와 같이 Docker-compose.yml 파일을 생성한다. 

마지막 CHOKIDAR_USEPOLLING=ture은 App이 수정되었을 경우 Reload이 가능하도록 하는 설정이다. 이거 찾느라 2시간을 삽질했다.

version: '3.7'

services:
  movie_app:
    container_name: movie_app
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/app'
      - '/app/node_modules'
    ports:
      - '3001:3000'
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING=true

 

그리고 Dockerfile을 아래와 같이 생성한다.

# base image
FROM node:12.2.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install --silent
RUN npm install react-scripts@3.0.1 -g --silent

# start app
CMD ["npm", "start"]

 

그리고 docker-compose up 명령어를 수행하면 로컬 도커 환경에서 리액트 데몬이 기본적으로 구동되는 것을 알 수 있다.

PS D:\nomad\movie_app_2019> docker-compose up -d --build
Building movie_app
Step 1/7 : FROM node:12.2.0-alpine
 ---> f391dabf9dce
Step 2/7 : WORKDIR /app
Step 4/7 : COPY package.json /app/package.json
 ---> Using cache
 ---> 279531576161
Step 5/7 : RUN npm install --silent
 ---> Using cache
 ---> 20600f46a22e
Step 6/7 : RUN npm install react-scripts@3.0.1 -g --silent
 ---> Using cache
 ---> a11fc76f5b93
Step 7/7 : CMD ["npm", "start"]
 ---> Using cache
 ---> 0e4679697f24

Successfully built 0e4679697f24
Successfully tagged movie_app_2019_movie_app:latest
Starting movie_app ... done

 

실제로 브라우저를 통해 포트 바인딩 한 3001 포트로 접속하면 아래와 같이 로컬 도커 환경에서 리액트 기본 화면이 보이는 것을 확인할 수 있다.

도커에서 구동중인 리액트 기본 화면

 

정지는 아래와 같이 docker-compose stop을 통해 가능하다.

PS D:\nomad\movie_app> docker-compose stop
Stopping movie_app ... done

참고로 docker-compose stop: 컨테이너를 정지 시킨다.

docker-compose down: 컨테이너와 네트워크를 중지 및 삭제한다.

docker-compose down:  --volumes의 경우 볼륨까지 삭제한다.

docker-compose rm: 컨테이너와 연결된 볼륨 삭제

(docker-compose down과 차이를 모르겠으나, 아래와 같이 패키지가 꼬였을 때 사용)

docker-compose rmModule not found: Can't resolve 'axios' in '/app/src'

 

docker-compose down --rmi의 경우 이미지까지 삭제한다.

 

 

React를 통해 토이 프로젝트를 만들며, 부족한 내용은 계속 업데이트를 하도록 하겠다.

 

또한 Powershell이나 VScode 터미널에서 yarn 이나 기타 혹은 명령어를 이용할 때 "이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다." 라는 메시지나, 영문으로 "execution of scripts is disabled on this system." 이라는 에러 메시지가 발생할 경우는 터미널에서 아래 명령어를 통해 권한을 변경해주면 동작한다.

PS D:\nomad\movie_app> Set-ExecutionPolicy RemoteSigned
PS D:\nomad\movie_app> Get-ExecutionPolicy