如何配置Nginx实现WebSocket与后端共用同端口的WSS连接？

第一步：修正客户端WebSocket连接地址 #

客户端无需直接连接后端端口，改为通过域名的443端口（默认HTTPS端口）访问WebSocket，修改代码中的连接地址：

const ws = new WebSocket('wss://mydomain.com/ws');

第二步：调整Nginx配置 #

删除无用的upstream websocket块，在443端口的server配置中添加WebSocket专用的location规则，同时优化API接口的代理配置：

server {
    listen 80;
    server_name mydomain.com;
    # 强制跳转HTTP到HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name mydomain.com;

    ssl_certificate /etc/letsencrypt/live/mydomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mydomain.com/privkey.pem;

    # 前端静态文件服务
    location / {
        root /root/media-buyer-ui/build;
        index index.html;
        # 单页应用路由 fallback
        try_files $uri $uri/ /index.html;
    }

    # API接口代理
    location ~/(auth|getbalance|getprofit|fetchprice) {
        proxy_pass https://localhost:8000;
        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;
    }

    # WebSocket代理
    location /ws {
        proxy_pass https://localhost:8000;
        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_connect_timeout 7d;
        proxy_send_timeout 7d;
        proxy_read_timeout 7d;
    }
}

第三步：验证配置并重启Nginx #

1. 检查Nginx配置语法是否正确：

nginx -t

2. 重启Nginx使配置生效：

systemctl restart nginx

关键说明 #

• 后端代码无需修改：你的WebSocket服务已经挂载在HTTPS服务器的8000端口上，Nginx只需将/ws路径的请求转发到该端口即可。
• 统一端口访问：所有外部请求都通过Nginx的443端口处理，既简化了SSL证书管理，也避免直接暴露后端端口提升安全性。
• 分离HTTP与WebSocket规则：API接口代理移除了WebSocket相关头字段，仅在WebSocket握手时保留必要的Upgrade和Connection头。

内容的提问来源于stack exchange，提问作者Eugene1111