react Websocket connection failed (webpack) 문제해결

프로젝트를 서버에 올리고 나서 화면은 정상으로 떳지만 계속해서 Websocket 오류가 났다..

WebSocket connection to 'wss:/서버주소:3000/ws' failed: WebSocketClient.js:16

왜 나는 웹소켓을 안쓰는데 오류가 나나 할 수 있는데,
웹팩은 파일이 변경될 때 다시 로드하기 위해 WebSocket을 사용한다고 한다 ..
자세한 내용은 해당 링크 참고: https://webpack.kr/guides/development-vagrant/

웹 팩 설정에서 위 오류를 고치기위해 많은시도를 해보았는데 의외로 간단하게 해결 되었다

해결방법
webpack.config.js 파일에 webSocketURL을 지정해 주면된다.

devServer: {
    port: 3000,
    liveReload: true,
    // host 지정
    host: "0.0.0.0",
    allowedHosts: "all",
    open: true,
    client: {
      overlay: true,
      // 웹소켓용 url 지정
      webSocketURL: "ws://0.0.0.0:80/ws",
    },
    compress: true,
  },

주의
url 주소는 지정된 호스트와 동일하게 주고 ( devServer: { host: "0.0.0.0" } )
포트는 80 또는 443 으로 줘도 된다. ("ws://0.0.0.0:80/ws" or "ws://0.0.0.0:443/ws")

참고
만약, 로컬 콘솔에서 나는게 신경 쓰이고 서버에서 소켓을 쓰지 않는다면 아래처럼 작성하면 된다!

devServer: {
    port: 3000,
    liveReload: true,
    // host 지정
    host: "0.0.0.0",
    allowedHosts: "all",
    open: true,
    client: {
      overlay: true,
      // 웹소켓 설정
      webSocketURL: { hostname: undefined, pathname: undefined, port: '0' },
    },
    compress: true,
  },

위 두개를 짬뽕해서 쓴다면 아래처럼 사용 가능 ( env 환경 파일로 실행 환경 구분 )

devServer: {
    port: 3000,
    liveReload: true,
    // host 지정 ( .env 파일로 실행 서버 구분 )
    host: webpackArgv.nodeEnv === "local" ? "localhost" : "0.0.0.0",
    allowedHosts: "all",
    open: true,
    client: {
      overlay: true,
      // 웹소켓 설정
      webSocketURL:  webpackArgv.nodeEnv === "local" ? 
					{ hostname: undefined, pathname: undefined, port: '0' } : 
					 "ws://0.0.0.0:443/ws",
    },
    compress: true,
  },