React/Django/nginx项目static文件夹路由冲突配置问题咨询

以下两种方案均为可直接落地的生产可用配置，优先推荐方案1，路由逻辑更清晰无额外性能开销。

方案1：修改React端静态资源路径前缀（长期维护推荐） #

你之前配置不生效的核心原因是变量名写错：CRA（包括eject后的版本）识别的公共路径变量是PUBLIC_URL，不存在PUBLIC_APP这个配置项，这不是React未修复的Bug，该方案不需要修改webpack源码，3步即可完成配置：

• 在React项目根目录的.env（生产环境对应配置文件为.env.production）中添加一行配置：PUBLIC_URL=/react-project
• 若使用React Router，给路由根组件添加basename属性匹配前缀，以React Router v6为例：

  <BrowserRouter basename="/react-project">
    {/* 你的路由配置 */}
  </BrowserRouter>
  

• 重新构建React项目后，所有静态资源（js/css/图片/字体等）的引用路径会自动统一为/react-project/static/xxx格式，不会出现路径丢失或引用错误的问题。

对应Nginx配置直接按前缀拆分路由即可，完全不存在冲突：

# Django静态资源路由
location /static/ {
    proxy_pass http://django-project:8000; # 替换为实际Django服务端口
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

# React静态资源路由
location /react-project/static/ {
    proxy_pass http://react-project:3000; # 替换为实际React服务端口
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

# 原有业务接口、页面路由保持不变即可

方案2：Nginx 404回退配置（快速修复用，无需改前后端代码） #

你之前写的配置逻辑成立，但Nginx原生try_files仅支持检查本地文件，跨服务回退需要通过拦截后端404状态码实现，正确配置如下：

location /static/ {
    # 优先转发到Django服务
    proxy_pass http://django-project:8000; # 替换为实际Django服务端口
    # 拦截Django返回的404响应，转发到React静态资源池
    proxy_intercept_errors on;
    error_page 404 = @react_static_fallback;

    # 通用代理头配置
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

# React静态资源回退逻辑
location @react_static_fallback {
    proxy_pass http://react-project:3000; # 替换为实际React服务端口
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

配置注意事项：

• 确保Django服务在静态资源不存在时返回标准404状态码，不要自定义404页面返回200状态，否则回退逻辑不会触发
• 该方案每次React静态资源请求都会先打到Django服务，会产生额外的404请求开销，仅适合临时上线应急使用

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