如何通过rewrite解决proxy_pass的404错误及React静态资源路径问题

现有Nginx配置如下：

location /projects/test/2.0.0 {
#  modsecurity on;
  rewrite ^/(.*) /projects/test/2.0.0$request_uri break;
  proxy_pass http://10.1.0.6:3000/;
}

后端http://10.1.0.6:3000是静态React项目，返回的HTML文件会请求/static/js/123.js这类CSS/JS资源，但当前请求路径是https://example.com/static/js/123.js，实际资源应从https://example.com/projects/test/2.0.0/static/js/123.js获取，需要调整配置解决资源加载失败的问题。

推荐两种可行方案，优先选择第一种，更符合React项目的部署规范：

方案1：修改React项目的基础路径（最优） #

React支持通过配置homepage参数，让打包后的资源自动带上路径前缀：

• 在项目根目录的package.json中添加以下配置：

"homepage": "/projects/test/2.0.0"

• 重新打包项目并部署，此时HTML中的资源引用路径会自动变为/projects/test/2.0.0/static/js/123.js，无需修改Nginx即可正常加载资源。

方案2：调整Nginx配置适配资源请求 #

如果无法修改React项目代码，可通过Nginx拦截静态资源请求，转发到对应前缀路径：

1. 修正原有location块的rewrite规则（原规则会导致循环重写，引发异常）：

location /projects/test/2.0.0 {
#  modsecurity on;
  proxy_pass http://10.1.0.6:3000/;
}

2. 新增一个location块专门处理/static开头的资源请求：

location /static {
  rewrite ^/static/(.*)$ /projects/test/2.0.0/static/$1 break;
  proxy_pass http://10.1.0.6:3000/;
}

这样所有https://example.com/static/xxx的请求都会被转发到后端的/static/xxx，同时路径前缀被正确补全，资源可以正常加载。

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