如何配置NGINX反向代理指定路径到本地运行的React应用

问题根因说明 #

你现有配置下，访问app1.localhost:81/test时，Nginx会把完整的/test路径传递给上游的React应用，实际转发地址是http://localhost:3001/test，但你的React应用是运行在根路径下，没有处理/test前缀的路由规则，所以返回404错误。

你纠结的root/alias参数仅用于Nginx直接返回本地磁盘静态文件的场景，反向代理场景完全不需要配置这两个参数，属于参数场景误用。

两种可用配置方案 #

方案1：proxy_pass加尾斜杠自动截断前缀（最简单）

直接修改location /test配置块即可：

location /test/ {
    proxy_pass http://localhost:3001/;
}

原理：当proxy_pass的地址末尾带斜杠时，Nginx会自动将当前location匹配的前缀路径去除后再转发，你访问app1.localhost:81/test/xxx会被转发到http://localhost:3001/xxx，路径前缀自动被截断。

方案2：rewrite规则手动截断路径

你之前的rewrite规则写法有错误，正确配置如下：

location /test {
    rewrite ^/test(.*)$ $1 break;
    proxy_pass http://localhost:3001;
}

之前rewrite未生效的常见原因：

• 修改配置后未执行nginx -t校验语法、nginx -s reload重载配置
• 正则缺少开头的^匹配符，规则命中逻辑错误

React应用额外适配 #

因为你是在二级路径下运行React单页应用，需要同步修改前端配置避免路由跳转异常：

• 在React Router的根路由配置中添加basename="/test"参数，确保前端路由跳转时自动带上/test前缀
• 如果是生产环境打包，需要在package.json中添加"homepage": "/test"配置

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