로아

리액트는 수정시에 웹소켓으로 React Hot Reload로 웹페이지를 새로 리로드 시켜준다.

그러나 proxy 설정으로 해당 에러 발생시 React 설정

React webSocket connection to 'wss://주소:3000/ws' failed

#에러
React webSocket connection to 'wss://주소:3000/ws' failed

#구성

[사용자 브라우저]
   ⇅ HTTPS (443)
[Caddy 서버]
   ⇅ (localhost:3000 으로 프록시)
[SSH 터널링으로 연결된 3000포트]
   ⇅
[docker-compose codeserver에 React 3000]

#caddy 설정 
URL주소 {
    reverse_proxy localhost:3000
    tls mail@mail.com
    log {
        output discard
    }
}

#docker-compose 설정
services:
  code-server:
    image: lscr.io/linuxserver/code-server:latest
    container_name: code-server
    restart: always
    environment:
      - PUID=1000
      - PGID=1000
      - TZ=Asia/Seoul
      - PASSWORD=
      - SUDO_PASSWORD=
      - PROXY_DOMAIN= URL 주소
      - DEFAULT_WORKSPACE=/config/workspace
    volumes:
      - D:\codeserver/config:/config
    ports:
      - 8085:8443
      - 3000:3000

#해결 .env 설정
React root에 .env 파일 생성


#WebSocket 설정
WDS_SOCKET_PORT=0        <-------------해당 설정만 넣으면 해결가능
#WDS_SOCKET_HOST=url 주소
#WDS_SOCKET_PORT=443
#WDS_SOCKET_PATH=/ws
#HTTPS=true

# 폴링 설정
CHOKIDAR_USEPOLLING=true
WATCHPACK_POLLING=true

나는 라즈베리파이로 낮은 성능이라 caddy로 proxy설정하였는데

Nginx Proxy Manager로 proxy 설정시에도 동일할로 예상합니다.