Nginx反向代理Node.js部署React应用报Cannot GET错误问题咨询

核心问题排查结论 #

1. 配置遗漏&错误项 #

• 最核心错误：upstream配置未指定NodeJS服务端口，你当前配置的server <PRIVATE IP>;默认转发到目标实例的80端口，但Jelastic环境下NodeJS服务默认监听3000/8080等非80端口，请求根本没有转发到正确的NodeJS服务，这是返回「Cannot GET /」的主要原因。你提到相同配置在其他环境正常，大概率是其他环境的NodeJS服务恰好监听80端口。
• 语法错误：map规则里.<PRIVATE IP>:80$ common;不符合Nginx语法，开头多余的.和结尾多余的$会导致$group变量始终为空，会话粘滞逻辑完全失效。
• 功能遗漏：未配置React单页应用的路由 fallback 规则，如果你用了BrowserRouter模式，后续直接访问子路由或刷新页面也会出现「Cannot GET /xxx」错误。
• 优化遗漏：gzip_types仅配置了text/plain，React打包生成的js、css、json等静态资源没有开启gzip压缩，会导致页面加载速度变慢。

2. 配置修正方案 #

按以下步骤修改你的Nginx配置即可：

修正upstream端口配置

替换你的upstream段，端口改为你NodeJS服务实际监听的端口：

upstream default_upstream{
    server <PRIVATE IP>:3000; # 替换为实际NodeJS端口
    sticky path=/; keepalive 100;
}

upstream common {   
    server <PRIVATE IP>:3000; # 替换为实际NodeJS端口
    sticky path=/; keepalive 100; 
}

修正map规则语法

map $upstream_addr $group {
    default "";
    <PRIVATE IP>:3000 common; # 替换为实际NodeJS服务的地址+端口
}

新增React路由fallback规则

在location /块的开头添加以下规则：

# 适配React BrowserRouter路由模式，404请求 fallback 到index.html
error_page 404 =200 /index.html;

扩展gzip支持类型

修改gzip_types配置：

gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

快速区分问题侧方法 #

直接在Nginx所在节点执行命令curl http://<NodeJS实例的内网IP>:<实际端口>，如果返回结果也是「Cannot GET /」，说明问题在NodeJS侧，否则就是Nginx转发配置错误。

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