如何解决AWS EC2上React应用的Nginx WebSocket连接错误？

一、修正Nginx反向代理WebSocket配置 #

之前的location配置报错大概率是缺少WebSocket必要的头信息或语法错误，直接用下面的完整配置替换你的Nginx域名配置文件（通常路径为/etc/nginx/sites-available/www.aitechly.com）：

server {
    listen 80;
    server_name www.aitechly.com;
    # 重定向HTTP请求到HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name www.aitechly.com;

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

    # 处理React静态文件（保留原有配置）
    location / {
        root /path/to/your/react/build;
        try_files $uri $uri/ /index.html;
    }

    # WebSocket反向代理核心配置
    location /ws {
        proxy_pass http://localhost:3000/ws;
        # WebSocket必须的协议升级头
        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;
    }
}

配置要点：

• 不要用/ws/（带尾斜杠），避免路径匹配冲突，保持和后端WebSocket服务的路径一致
• 必须添加proxy_http_version 1.1和Upgrade/Connection头，这是WebSocket代理的核心要求
• 延长超时时间，适配流式响应的长连接场景

配置完成后先验证Nginx语法：

sudo nginx -t

无报错后重启Nginx：

sudo systemctl restart nginx

二、修改React端的WebSocket连接地址 #

不要尝试将WebSocket端口改为80——你的网站是HTTPS协议，浏览器会拦截HTTPS页面中的HTTP请求（混合内容限制），应该改用加密的WebSocket协议wss://，修改代码中的连接地址：

// 替换原有WebSocket连接代码
const ws = new WebSocket('wss://www.aitechly.com/ws');

这样既规避了混合内容问题，又无需将3000端口暴露给公网。

三、检查AWS安全组配置 #

• 确保EC2实例的安全组仅开放**80（HTTP）和443（HTTPS）**端口，关闭3000端口的公网访问权限（已通过Nginx代理，无需直接暴露）
• 若之前开放了3000端口，直接移除该规则，降低安全风险

四、验证Node.js服务配置 #

确保你的Node.js WebSocket服务监听localhost:3000（而非0.0.0.0，localhost更安全），且路径为/ws，与Nginx代理路径一致。示例代码（以ws库为例）：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000, path: '/ws' });

wss.on('connection', (ws) => {
  // 你的流式响应逻辑
});

最后重新部署React应用（若修改了代码），即可测试WebSocket连接。

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