Docker로 React 환경 구성하기

1. React 개발을 위한 환경 구성

  - create-react-app이란? 페이스북에서 만든 react 웹 개발용 boilerplate

npx create-react-app <my_project_id>

 

2. <my_project id> 디렉토리 진입 후 Docker 실행을 위한 파일 작성

  2.1. docker-compose.yml

version: '3.7'

services:
    react_01_app:
        container_name: react_01_app
        build:
            context: .
            dockerfile: Dockerfile
        volumes:
            - '.:/app'
            - '/app/node_modules'
        ports:
            - '3001:3000'
        environment:
            - NODE_ENV=development
            - CHOKIDAR_USEPOLLING=true #App이 수정되었을 경우 reload가 가능하도록 하는 설정

  2.2. Dockerfile

# base image (https://hub.docker.com/_/node 에서 활용하고 싶은 image 선택)
FROM node:15.5.1-alpine3.10

# 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

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

3. 도커 컨테니어 배포

  - localhost:3001 을 통해 접근 가능

docker-compose up -d --build