이전 글 간단한 JVM 메모리 모니터링에서 WebSocket을 이용해 클라이언트와 백엔드 양방향 통신을 구현하고, 로컬에선 잘 되던게 배포 환경에 적용해보니 개발자 도구에서 아래와 같은 오류가 발생했다..!
- 개발자 도구
index-CKYwpsnx.js:485 WebSocket connection to 'wss://domain/api/....' failed: 그래서 SpringBoot 로그를 확인해보니 아래와 같은 에러 로그가 찍히고 있었는데요
- SpringBoot 로그
"Handshake failed due to invalid Upgrade header: null"
우선 해결법은 nginx 설정 파일에 아래와 같은 옵션을 설정하면 됩니다.
location api/example { # 예시 엔드포인트
proxy_pass http://localhost:8080; # 만약 무중단 배포 시 서버 포트번호 파일을 읽어오는 변수 할당
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}그래서 Upgrade header가 뭐지?
UpgradeHeader
HTTP 1.1(전용) Upgrade헤더는 이미 설정된 클라이언트/서버 연결을 다른 프로토콜(동일한 전송 프로토콜을 통해)로 업그레이드하는 데 사용할 수 있습니다. 예를 들어 클라이언트는 연결을 HTTP 1.1에서 HTTP 2.0으로 업그레이드하거나 HTTP 또는 HTTPS 연결을 WebSocket으로 업그레이드하는 데 사용할 수 있습니다.
라고 명시되어 있습니다.
WebSocket은 한 번의 연결 설정 후 지속적으로 양방향 통신을 가능하게 하는 프로토콜인데, WebSocket 통신은 클라이언트에서 서버로 요청할 때 Upgrade 헤더를 포함해 서버에게 WebSocket 연결로 "업그레이드"하고자 함을 알려야 된다고 합니다.
현재 제가 배포중인 서버는 클라이언트 요청이 올 경우, nginx가 앞단에서 요청을 받아 springboot 로 전송해주는 구조입니다.
그래서 nginx에 'api/example' 로 시작하는 엔드포인트에 요청이 올 경우, upgrade header 를 설정해 줌으로써, 서버에 요청 할 때 개발자 도구 - Network 탭을 보시면 아래와 같이 잘 적용된 모습을 볼 수 있습니다.
- Network - Request Headers - Upgrade : websocket
