配置Nginx部署/admin路径下的React应用并解决React-Router路由404问题

你遇到的404问题根源在于Nginx的location规则匹配逻辑混乱，以及子路由请求没有正确转发到React的index.html进行客户端路由处理。以下是修正后的配置和调整说明：

修正后的Nginx配置 #

gzip            on;
gzip_vary       on;
gzip_proxied    any;
gzip_comp_level 6;
gzip_types      text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;

server {
  listen 5000;
  
  # 统一处理/admin路径下的所有请求
  location /admin {
    alias /usr/share/nginx/html/;
    index index.html index.htm;
    try_files $uri $uri/ /admin/index.html;
  }

  include /etc/nginx/extra-conf.d/*.conf;
}

关键调整点 #

1. 合并重复配置：移除server块内重复的gzip配置，全局配置已生效。
2. 统一location规则：用单个location /admin替代分散的多个规则，避免匹配冲突。
3. 正确路径映射：通过alias /usr/share/nginx/html/将所有/admin开头的请求，映射到React构建文件所在目录（末尾的斜杠确保路径替换准确）。
4. 子路由转发逻辑：try_files $uri $uri/ /admin/index.html的作用：
   • 优先匹配请求对应的静态文件（如/admin/static/js/main.js会映射到/usr/share/nginx/html/static/js/main.js）
   • 静态文件不存在时，尝试访问对应目录
   • 以上都不匹配时，返回/admin/index.html，交由React客户端路由接管子路由（如/admin/login、/admin/dashboard）

生效步骤 #

修改配置后，执行以下命令重启Nginx：

sudo systemctl restart nginx

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