使用Nginx反向代理Create React App的配置技术咨询

嘿，我来帮你捋捋这个Nginx反向代理配置的合理性，以及可能遇到的访问问题解决方案～

先说说现有配置的可取之处 #

• 你已经加上了proxy_http_version 1.1和Upgrade/Connection相关请求头，这对WebSocket通信（如果你的React应用或后端API用到的话）非常关键，这点考虑得很到位。
• 按路径拆分代理不同服务的思路是对的，能清晰区分前端React应用和后端API的请求流向。

可能存在的问题&优化建议 #

1. /client/路径的转发路径错误

你当前的proxy_pass http://172.31.23.249:3000;没有加末尾斜杠，会导致Nginx把/client/some-path这类请求转发到http://172.31.23.249:3000/client/some-path，但React开发服务器默认监听根路径，根本没有/client这个路由，必然会出现404。

修正方式：给proxy_pass末尾加上斜杠，改成：

proxy_pass http://172.31.23.249:3000/;

这样请求会被正确转发到http://172.31.23.249:3000/some-path，匹配React的路由规则。

2. 缺失客户端IP传递的请求头

后端服务如果需要记录客户端真实IP，你的配置里缺少了关键的转发头，建议加上：

proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

3. React开发服务器的配套配置

如果你的React应用是用create-react-app启动的开发服务器，需要做两个额外配置：

• 启动时指定监听所有网卡：HOST=0.0.0.0 npm start（不然React服务可能只能在服务器本地访问，Nginx代理会失败）
• 设置公共路径：PUBLIC_URL=/client npm start，这样React生成的静态资源路径会自动带上/client前缀，避免资源加载404。

4. 配置完整性&错误处理

你的配置看起来没写完，要确保每个location块都正确闭合。另外可以加上错误页面配置，提升访问体验：

error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root /usr/share/nginx/html;
}

优化后的完整配置示例 #

server {
    listen 80;
    server_name mentalg.com;

    # 代理后端API服务
    location / {
        proxy_pass http://172.31.23.249:5000;
        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_cache_bypass $http_upgrade;
    }

    # 代理React前端服务
    location /client/ {
        proxy_pass http://172.31.23.249: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;
        proxy_cache_bypass $http_upgrade;
    }

    # 错误页面配置
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

测试&排障步骤 #

1. 先单独测试后端和React服务：直接访问http://172.31.23.249:5000和http://172.31.23.249:3000，确认服务本身能正常响应。
2. 修改Nginx配置后，执行sudo systemctl restart nginx生效。
3. 访问http://mentalg.com测试后端代理，访问http://mentalg.com/client测试前端代理。
4. 如果出现问题，查看Nginx日志定位：tail -f /var/log/nginx/access.log和tail -f /var/log/nginx/error.log。
5. 确保服务器防火墙/云安全组开放了80、3000、5000端口。

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