Published on

WebSocket connection to wss failed오류의 원인과 해결 방법

Authors
  • avatar
    Name
    Hyo814
    Twitter

웹 애플리케이션에서 WebSocket 연결이 실패하면 사용자 경험에 큰 영향을 미칠 수 있습니다. 특히, "WebSocket connection to 'wss:...' failed"라는 에러는 서버와의 실시간 데이터 교환에 문제가 생겼음을 나타냅니다. 이 글에서는 해당 오류의 원인을 분석하고, 이를 해결하기 위한 방법을 단계별로 설명합니다.

1. 서버 측 문제

1-1. 서버가 실행 중이 아님

  • 서버(13.209.177.247:8080)가 제대로 실행되고 있는지 확인하세요.
  • WebSocket 연결을 처리할 수 있도록 서버가 8080 포트에서 요청을 수신 대기 중인지 점검하세요.
  • 서버 로그에서 WebSocket 연결과 관련된 에러 메시지를 확인하세요.

1-2. 방화벽/네트워크 제한

  • 서버의 방화벽 설정에서 8080 포트가 차단되어 있지 않은지 확인하세요.
  • 클라우드 환경에서는 네트워크 보안 그룹(Security Group)을 점검하여 8080 포트로의 트래픽을 허용해야 합니다.

1-3. 잘못된 WebSocket 엔드포인트

  • 클라이언트에서 사용 중인 WebSocket URL(/ws)이 서버 설정과 일치하는지 확인하세요.
  • 엔드포인트가 잘못되었다면 클라이언트에서 올바른 경로를 사용하도록 수정하세요.

1-4. 서버 과부하 또는 리소스 부족

  • 서버가 과부하 상태이거나 리소스가 부족하면 새 연결을 수락하지 못할 수 있습니다.
  • 서버의 CPU, 메모리, 네트워크 사용량을 점검하고, 필요 시 리소스를 증설하세요.

1-5. SSL/TLS 인증서 문제

  • wss(WebSocket Secure)를 사용할 경우, 서버에 유효한 SSL/TLS 인증서가 필요합니다.
  • 인증서가 만료되었거나 유효하지 않으면 브라우저가 연결을 차단합니다.
  • 개발 환경에서 자체 서명된 인증서를 사용하는 경우, 브라우저에서 신뢰할 수 있도록 설정해야 합니다(권장하지 않음).

2. 클라이언트 측 문제 (JavaScript 코드)

2-1. 잘못된 URL 설정

  • 클라이언트 코드에서 사용 중인 URL이 정확한지 확인하세요. 예를 들어:
const brokerURL = 'wss:...'
  • URL의 도메인, 포트, 경로를 재확인하세요.

2-2. CORS 문제

  • 클라이언트 애플리케이션이 서버와 다른 도메인에서 호스팅되는 경우, 서버의 CORS 정책이 잘못되었을 가능성이 있습니다.
  • 서버에서 올바른 CORS 헤더를 설정하여 클라이언트 요청을 허용하세요. 예:
Access-Control-Allow-Origin: *

2-3. 브라우저 호환성

  • 오래된 브라우저에서는 WebSocket이 지원되지 않을 수 있습니다.
  • 최신 브라우저에서 테스트하거나 브라우저 호환성을 확인하세요.

2-4. 네트워크 연결 문제

  • 클라이언트 기기의 네트워크 연결 상태를 확인하세요.
  • VPN, 프록시, 방화벽 등이 WebSocket 연결을 방해할 수 있습니다.

2-5. SSL/TLS 인증서

  • 클라이언트 측에서 wss를 사용할 때 서버 인증서가 신뢰할 수 있는 기관(CA)에서 발급된 것인지 확인하세요.

3. 디버깅 및 문제 해결

3-1. 서버 로그 확인

  • WebSocket 연결 요청이 서버에 도달했는지 확인하고, 실패 원인을 서버 로그에서 분석하세요.

3-2. 브라우저 개발자 도구 활용

  • 브라우저의 개발자 도구(F12)를 열고 "네트워크" 탭에서 WebSocket 연결 요청을 확인하세요.
  • 실패한 요청의 상태 코드와 응답 메시지를 확인하세요.

3-3. telnet 또는 curl 테스트

  • 터미널에서 서버의 포트로 직접 연결을 시도하여 연결 가능 여부를 확인하세요:
telnet 13.209.177.247 8080
  • 성공하면 포트가 열려 있고 서버가 요청을 수신 중임을 나타냅니다.

3-4. 코드 단순화

  • 최소한의 WebSocket 연결 테스트 코드를 작성하여 복잡한 코드 문제를 분리하세요.
const socket = new WebSocket('wss:...')
socket.onopen = () => console.log('Connection established')
socket.onerror = (error) => console.error('Connection error:', error)

3-5. SSL/TLS 인증서 확인

  • openssl 명령어를 사용하여 서버 인증서를 점검하세요:
openssl s_client -connect 13.209.177.247:8080
  • 인증서가 유효하지 않으면 인증서를 갱신하세요.

3-6. 외부 WebSocket 클라이언트 사용

  • wscat 같은 도구를 사용하여 WebSocket 서버와 직접 통신을 시도하세요:
npx wscat -c wss:...

4. 결론

WebSocket 연결 실패의 원인은 서버 측 문제부터 클라이언트 코드, 네트워크 설정까지 다양합니다. 위에서 제시한 디버깅 단계와 해결 방법을 차례로 실행하면서 문제를 해결할 수 있습니다. 특히, 서버 로그와 클라이언트 개발자 도구를 활용하면 문제의 원인을 더 정확히 파악할 수 있습니다.