Nginx Websocket connection to failed

프로젝트 내에서 실시간 채팅을 웹 소켓을 이용해 구현했고, 개발 환경에서는 아무 문제 없이 동작했는데 배포 환경에서 websocket connection to failed가 발생했습니다. 

해결 방법

/etc/nginx/sites-available/reverse-proxy.conf 파일 수정

 proxy_set_header Upgrade $http_upgrade;
 proxy_set_header Connection "upgrade";

location / { 
    proxy_pass http://127.0.0.1:8081; 
    proxy_http_version 1.1;
    
    # 추가 
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }

 

추가해야 하는 이유

웹소켓은 초기 핸드셰이크를 HTTP 프로토콜을 사용하여 수행한 후, 연결을 웹소켓 프로토콜로 "업그레이드"합니다. 이 과정에서 클라이언트는 웹 소켓 프로토콜을 사용하여 영구적인 연결을 위해 서버에 Upgrade: websocket과 Connection: Upgrade 헤더를 포함하여 요청을 보냅니다.

 

Nginx는 클라이언트와 서버 사이에서 프록시 역할을 수행합니다. 그러나 기본 설정에서는 Upgrade, Connection 헤더를 처리를 하지 않음으로 백엔드 서버에 요청을 전달해도 Upgrade, Connection의 헤더가 전달되지 않아 웹 소켓 연결을 인식하지 못합니다.

 

따라서, Nginx 설정에 proxy_set_header Upgrade $http_upgrade와 proxy_set_header Connection "upgrade"를 추가함으로써, Nginx는 이러한 헤더를 백엔드 서버로 정확히 전달할 수 있게 됩니다. proxy_set_header Upgrade $http_upgrade;는 클라이언트의 요청에서 Upgrade 헤더 값을 동적으로 가져와서 백엔드 서버로 전달하고, proxy_set_header Connection "upgrade";는 연결을 업그레이드하기 위한 명시적인 지시를 백엔드 서버로 전달합니다. 이 설정을 통해 Nginx는 웹소켓 핸드셰이크 요청을 올바르게 처리하고 백엔드 서버에 전달할 수 있으며, 결과적으로 웹소켓 연결이 성공적으로 수행됩니다.