React container reloading(HMR) 안되는 경우

Published in

sjk5766

3 min readFeb 21, 2020

docker-compose를 이용해 React App을 container로 올렸습니다. 헌데 VSCode로 소스를 수정하면 container 내부의 소스는 수정 되지만 HMR, 리로딩이 되지 않은 문제가 발생했습니다. 제 환경은 아래 그림처럼 Nginx가 웹 서버 역할을 하고 뒤에 React App이 작동하는 container가 있습니다.

해결은 간단했지만 몇 일을 시간낭비 했기 때문에 현상과 해결방법을 아래에 정리하겠습니다.

현상

Nginx는 localhost 80번 포트로 접속하는 일반적인 설정으로 컨테이너를 구성했고 React도 역시 인터넷에 대부분 나오는 create-react-app을 이용해서 구성했습니다. 물론 reloading을 지원하는 아래 설정도 있었습니다.

CHOKIDAR_USEPOLLING=true

아래는 전체 docker-compose 소스입니다.

한참 구글링을 하던 중, 과거 리로딩 이슈의 원인 중 하나가 웹 소켓 설정 때문이라는 글을 봤습니다. docker compose로 container를 올리고 localhost에 접속하면 개발자 도구 console에 아래와 같이 보입니다.

이제 생각이 리로딩을 위해 내부적으로 웹 소켓이 사용되는데 내 PC의 브라우져가 connect를 못하고 있는건가? 그리고 머리속에 번쩍 nginx에 웹 소켓 설정이 안 되어 있음을 깨달았습니다.

해결 방법

Docker로 Nginx를 container로 올려보신 분이라면 conf 파일이 필요하단 걸 아실 겁니다. conf 파일에 웹 소켓을 위한 아래 설정을 추가합니다.

# 기존 설정.
upstream docker-nginx {
  server client:3000;
}# 추가된 웹 소켓 설정
location /sockjs-node {
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  proxy_pass http://docker-nginx;
}

이제 개발자 도구에서 위에 발생하던 에러는 사라졌습니다.

그리고 리로딩도 매우 정상적으로 되었습니다. 감사합니다. ^_^

React container reloading(HMR) 안되는 경우

Written by Jeongkuk Seo