解决Nginx环境下WebSocket连接ws://localhost:3000的错误

我跟着教程用NodeJS和WebSocket开发聊天应用，网页通过Nginx托管并配置了SSL证书，可通过https://my.site访问，但浏览器控制台提示“WebSocket connection to 'ws://localhost:3000'”连接错误，这是我第一次用WebSocket，求帮忙。

我试着在Nginx配置文件里加了这段代码：

location / {
    # redirect all HTTP traffic to localhost:8080
    proxy_pass http://localhost:8080;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # WebSocket support
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

但重启Nginx时出现错误：

Job for nginx.service failed because the control process exited with error code. See "systemctl status nginx.service" and "journalctl -xeu nginx.service" for details. failed!

问题根源 #

1. 前端连接地址错误：网站用HTTPS协议，浏览器会阻止非安全的ws://请求，必须用加密的wss://协议，且地址要指向你的域名my.site，而非本地localhost:3000。
2. Nginx配置冲突/错误：你配置的转发目标是localhost:8080，但WebSocket服务实际在3000端口，同时原有配置可能和新增的location /存在重复，导致Nginx启动失败。

修复步骤 #

1. 修改前端WebSocket连接代码 #

把前端里的连接代码从：

new WebSocket('ws://localhost:3000')

改成：

// 如果WebSocket服务根路径是/，直接用域名
new WebSocket('wss://my.site')
// 如果WebSocket服务有特定路由，比如/ws
new WebSocket('wss://my.site/ws')

2. 修正Nginx配置 #

找到你的SSL站点配置文件（通常在/etc/nginx/sites-available/my.site.conf），根据服务端口调整配置：

情况一：Web服务（页面）在8080，WebSocket服务在3000

server {
    listen 443 ssl;
    server_name my.site;

    # 保留你原有的SSL证书配置
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # 处理页面等普通HTTP请求
    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 专门处理WebSocket请求
    location /ws {
        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_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

情况二：Web服务和WebSocket服务都在3000端口

server {
    listen 443 ssl;
    server_name my.site;

    # SSL证书配置
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        # WebSocket支持（更灵活的写法）
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }
}

注意：用第二种情况的话，建议在/etc/nginx/nginx.conf的http块里添加以下配置，避免连接头硬编码的问题：

http {
    map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
    }
    # 其他原有http配置...
}

3. 验证并重启Nginx #

• 先检查配置语法是否正确：

  sudo nginx -t
  

• 语法没问题的话，重启Nginx：

  sudo systemctl restart nginx
  

• 如果还是报错，查看详细日志定位问题：

  sudo journalctl -xeu nginx.service
  

4. 调整NodeJS服务监听地址 #

确保你的WebSocket服务监听0.0.0.0:3000，而不是localhost:3000，这样Nginx才能正确访问到服务。

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