WebSocket connection to 'ws://localhost/_next/webpack-hmr' failed;

1. 개발 환경

• MacOS
• Rocky Linux 8.6(Docker)
  • NginX, 80->3000으로 리버스 프록시 사용 중
  • NextJS v12.1.6

 

2. 이슈

개발 서버를 올렸을 때, 브라우저 콘솔 창에 아래와 같은 에러가 계속 발생함

WebSocket connection to 'ws://localhost/_next/webpack-hmr' failed;

 

3. 원인

NextJS가 WebSocket을 사용해 서버 상태를 유지하려는데, WebSocket에 대한 NginX 설정이 되어 있지 않아서 오류가 발생

 

4. 해결

NginX config 파일 중 location 항목에 3가지 속성을 추가

$ sudo vi /etc/nginx/nginx.config

location / {
    ...(생략)
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}

$ sudo systemctl restart nginx