[React.js] Socket.io SSL적용 문제

https 서비스에서 Socket.io를 이용해 소켓 통신을 연결하고자 하였다. https 서비스이기 때문에 소켓도 SSL 인증이 필요했다. 간편한 방법인 Nginx를 이용해 ws를 wss로 변환하고자 하였다. 그런데 콘솔에서는 아래와 같은 에러를 하염없이 뱉어 냈다.

net::ERR_SSL_PROTOCOL_ERROR

 

오늘 비로소 해결했는데 해결한 방법은 Nginx의 default 파일에 작성한 server의 server_name을 클라이언트에서 호출하는 것이었다. 그전에는 계속 IP주소로 연결 시도를 했었는데 실패했었다. Nginx default에 작성한 내용은 다음과 같다.

server {
    listen 443 ssl;
    server_name wss.bla.com;

    ssl_certificate /bla bla.../bla.crt;
    ssl_certificate_key /bla bla.../bla.key;
    
    location / {
        proxy_pass http://127.0.0.1:7080/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
    }
}

 

클라이언트에서는 다음과 같이 호출하였다.

const socket = io('wss://wss.bla.com');