Nginx WebSocket 설정, Nginx WebSocket 안될 때

웹 사이드 프로젝트 진행 중 실시간 채팅, 알림 기능을 WebSocket을 이용하여 구현했다.

 

AWS EC2 서버에 프로젝트를 배포하고 WebSocket으로 구현한 채팅, 알림 기능도 별 문제없이 동작하였는데.

 

*탄력적 IP DNS, 8080 포트로 접근

const socket = new WebSocket('ws://주소:8080/chatroom');

 

자동 배포, 무중단 서비스를 만들기 위해 Nginx를 사용하는 순간 WebSocket 연결에 문제가 생겼다.

 

배포 과정에 서비스가 중단되지 않기 위해 Nginx 리버프 프록시를 이용해 8081, 8082 포트에 번갈아 가며 요청을 전달

 

하도록 하였는데 ( 이 과정은 생략 )

 

Nginx는 80(http), 443(https) 포트를 할당하며, 80번 포트는 기본적으로 포트 번호가 제거된 상태이므로 

 

아래와 같이 WebSocket Url을 변경해야 했다.

const socket = new WebSocket('ws://주소/chatroom');

 

하지만 socket url을 변경해도 연결이 되지 않았는데 

 

Nginx는 클라이언트와 백엔드 서버 간 터널을 설정하여 WebSocket을 지원하기 때문에

 

클라이언트에서 보낸 Upgrade 요청을 전달하기 위해 Upgrade 및 Connection 헤더를 명시적으로 설정해야 한다.

location / {
    //기존 설정들
    /////////////
    
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
}

 

이렇게 설정을 마치면 WebSocket 연결이 정상적으로 된다.