React Docker로 개발 모드 Hot reload 해보기

세니·2025년 3월 17일

서론

React 프로젝트를 매일 npm run start하면서 실행하거나 다른 사람과 프로젝트를 공유할때 node 버전을 맞추고 의존성 패키지 설치할때 매일 맞춰야하는 상황이 너무 번거로웠다. 그래서 나는 React 프로젝트를 로컬에서 Dev모드로 실행하도록 이번에 업그레이드를 고민해보았다.

폴더 구조

일단 React 프로젝트를 CRA를 이용해서 생성하자.

~~(CRA 이제 지원안한다고 뜸...)~~


└── react_test/
    ├── public
    ├── src
    ├── Dockerfile.dev
    ├── docker-compose-dev.yml
    ├── package.json
    ├── .dockerignore

여기서 주의할 점이 로컬의 node_modules를 copy에서 빼야하기 때문에 .dockerignore을 생성해 추가해줘야한다.

Dockerfile.dev

# 사용할 Node 버전
FROM node:20.18.1

# 작업 디렉터리 설정
WORKDIR /app

# package.json를 /app에 copy
COPY package.json .

# package 설치
RUN npm install

# 소스코드와 그 외 파일들 copy
COPY . .

# port 열기
EXPOSE 3000

CMD ["npm","run","start"]

이 Dockerfile만을 가지고 run을 할 수 있지만 난 명령어를 길게 사용하고 싶지도 않기때문에 docker-compose를 추가하기로 했다.

docker-compose-dev.yml

version: "3.8"

services:
  app:
    container_name: react_dev
    image: react_dev_img
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - ./src:/app/src
    ports:
      - "3000:3000"
    environment:
       - WATCHPACK_POLLING=true
      #  - CHOKIDAR_USEPOLLING=true

여기서 environment가 중요한데 React의 Hot reload를 지원해주기 위해서는 CHOKIDAR_USEPOLLING 을 true로 설정해줬어야 했다.

docker-compose 실행

docker-compose -f docker-compose-dev.yml build

docker-compose up -d

그런데 Hot reload가 되지 않아 또 다른 해결책인 WATCHPACK_POLLING 환경변수를 true로 둬야 정상적으로 실행이 되었다.

CHOKIDAR_USEPOLLING 만 true로 실행

WATCHPACK_POLLING 만 true로 실행

Docker logs를 보면 WATCHPACK_POLLING 으로 실행했을때 변경사항이 있으면 Compiling... 되면서 화면이 바뀌는것을 볼 수 있다.

그렇다면 왜WATCHPACK_POLLING은 되고 CHOKIDAR_USEPOLLING은 안되냐?
~~내 환경은 윈도우 wsl2 docker를 기준으로 사용하고 있다.~~

이유는 react-scripts버전에 있다.

{
  "name": "react_test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.1.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

react-scripts 버전이 v5.x.x이상부터 CHOKIDAR_USEPOLLING 을 지원하지 않는다.

왜냐하면 버전5부터 webpack5로 대체되었으며 webpack5 부터는 chokidar 파일 감시 시스템 대신 watchpack을 사용했기 때문이다.

아래에 관련 글이 있다. 심지어 webpack docs를 보면 더 이해가 쉽다.