[개발 일기] 2025.05.01 - ws vs wss (Feat: Nginx)

💡 개요

 

오늘은 일반적인 웹 소켓인 ws와 SSL이 적용된 웹 소켓인 wss에 대해 정리해 보자.

 

 

 

🛠️ ws vs wss

 

클라이언트와 서버간의 통신은 기본적으로 HTTP를 사용한다.

 

 

하지만 채팅같은 양방향 통신이 필요한 경우엔 웹 소켓 통신이 사용된다.

 

 

웹 소켓 연결이 성립되면 기존 HTTP 방식처럼 클라이언트가 요청하고 서버가 응답하는 구조를 벗어나, 서버도 클라이언트에게 실시간으로 데이터를 전송할 수 있게 된다.

 

 

ws는 일반 웹 소켓 연결 방식으로, 내부 데이터가 암호화되지 않은 상태로 전송되기 때문에 보안에 취약할 수 있다.

 

 

하지만 wss의 경우, HTTPS 통신과 동일하게 내부 데이터를 암호화하고 메시지를 주고 받기 때문에 보안상 더 안전하다.

 

 

Nginx를 사용해 SSL을 설정하면, 기본적으로 ws에서 wss로의 전환이 간단하게 이루어질 수 있다.

 

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        # SSL configuration
        listen 443 ssl default_server;
        listen [::]:443 ssl default_server;

        ssl_certificate /etc/letsencrypt/live/도메인명/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/도메인명/privkey.pem; 

        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name 도메인명;

        location /api {
                proxy_pass <http://localhost:8080>;
        }

        location /ws {
                proxy_pass <http://localhost:8080>;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_set_header Host $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;
                proxy_set_header Origin "";
        }

        location / {
                proxy_pass <http://localhost:3000>;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

 

 

예를 들어 아래와 같이 Nginx 설정에서 SSL이 적용된 server 블록 안에 WebSocket 경로(/ws)를 포함시키면, 자동으로 wss 통신이 적용된다.