Nginx负载均衡代理后React站点无法加载且大量返回404问题求助

问题根因 #

1. 核心原因 #

你使用了least_conn最小连接数负载策略，且未配置会话粘滞，同时两台上游服务器的前端代码版本大概率不完全一致：
React（你配置里有_next目录，实际是Next.js框架）打包时会给静态资源文件名生成唯一版本哈希，当用户首次请求页面被调度到节点A，得到的页面里引用的是A节点版本的哈希资源，如果后续静态资源请求被调度到节点B，而B节点没有对应哈希的资源，就会返回404。
当用户的所有请求刚好都落到同一台节点时就能正常加载，这就是你遇到的“桌面端异常、移动端同款浏览器正常”的不稳定表现的根本原因。

2. 配置错误叠加影响 #

• 你在443 server块配置了root /_next/static/chunks，但全站又走代理到上游，该配置会干扰Nginx的资源查找逻辑，可能导致部分静态资源请求没有被正确转发到上游。
• 你给上游传递的Host头带了443端口proxy_set_header Host $host:443，但你代理到上游用的是HTTP协议，如果上游服务没有配置带443端口的虚拟主机规则，会识别不到站点直接返回404。
• 速率限制配置过低：单IP每秒5请求、突发20的阈值远低于Next.js站点首次加载需要的十到几十个并发请求，容易触发限流，加重访问异常。

修复方案 #

第一步：解决跨节点资源404问题 #

将负载策略修改为ip_hash，基于用户IP做哈希调度，保证同一个用户的所有请求始终落到同一台上游节点，避免跨节点访问不存在的资源：

upstream bdipper_node {
  ip_hash; # 替换原来的least_conn
  server cluster.provider-0.prod.sjc1.akash.pub:31375;
  server cluster.provider-2.prod.ewr1.akash.pub:31639;
}

同时保证后续每次发布代码时，两台上游节点同步部署同一版本的代码，从根源消除资源哈希不一致的问题。

第二步：修正错误配置 #

1. 删除443 server块中无用的root /_next/static/chunks配置。
2. 修改Host头配置，去掉端口后缀：

proxy_set_header Host $host;

3. 调整速率限制阈值，适配前端站点的并发请求特性：

# 全局配置调整速率上限
limit_req_zone $binary_remote_addr zone=req_zone:10m rate=20r/s;
# location / 中的burst调整为50
limit_req zone=req_zone burst=50 nodelay;

可选优化（提升性能） #

新增静态资源缓存规则，让Nginx直接缓存Next.js的静态资源，减轻上游服务器压力：

location /_next/static/ {
  proxy_pass http://bdipper_node/_next/static/;
  proxy_cache_valid 200 30d;
  expires 30d;
}

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