[Docker] 리액트 핫로딩(hot reloading)이 안되는 경우

hot reloading

소스 코드를 변경했을 때 페이지를 새로고침하지 않고 바뀐 소스 코드만 빠르게 교체해 준다.

 

 

---

윈도우 환경을 사용 중이며, 리액트 핫로딩이 적용되지 않는 문제가 발생했습니다.

이를 해결하기 위해 Dockerfile 안에다 WATCHPACK_POLLING=true를 적용해 주면 됩니다.

 

 

 

스택오버플로우를 찾아보니까 react-script v5.0.0 이상부터는 CHOKIDAR_USEPOLLING=true  대신에 WATCHPACK_POLLING=true을 사용한다고 합니다.

 

https://stackoverflow.com/questions/44643045/running-development-server-with-create-react-app-inside-of-a-docker-container

 

 

 

그리고 Dockerfile을 수정했으므로 이미지를 다시 빌드하고 run 해야 합니다. 

 

#어떤 이미지로부터 새로운 이미지를 생성할지를 지정함
FROM node:alpine

#해당 경로를 WORKDIR로 지정함
WORKDIR /usr/src/app

# package.json을 먼저 복사해서 캐싱된 모듈을 사용하게 함으로써 빌드 시 불필요한 설치과정을 패스하게 됨
COPY package.json ./

RUN npm install

# COPY [복사 할 파일 경로] [컨테이너 내에서 파일이 복사될 경로]
COPY ./ ./

#리액트 핫리로딩을 위해 설정함
ENV WATCHPACK_POLLING=true

#환경변수 NODE_ENV 의 값을 development 로 설정
#ENV NODE_ENV development

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

#ENV CHOKIDAR_USEPOLLING=true