DRF静态文件与React应用Nginx配置部署问题求助

当你取消注释location /static/配置后，Nginx会拦截所有以/static/开头的请求，直接到/var/www/html/static/目录查找文件。但React应用的main.js等静态文件由serve -s build托管在localhost:3000，Nginx不再将这些请求转发给React服务，因此找不到文件返回404。

方案1：区分Django与React的静态文件路径 #

直接避免路径冲突，操作步骤如下：

1. 修改Django配置文件中的STATIC_URL为/admin/static/
2. 重新收集Django静态文件：python manage.py collectstatic，此时静态文件会被放到/var/www/html/admin/static/目录
3. 更新Nginx配置，将原/static/的location改为针对Django Admin的路径：

server {
    listen 80;
    server_name server_ip;
    
    location / {
      proxy_set_header   X-Forwarded-For $remote_addr;
      proxy_set_header   Host $http_host;
      proxy_pass http://localhost:3000;
   }

    location /admin/static/ {
        root /var/www/html;
    }

    location ~* ^/(api|path/admin) {
       include proxy_params;
       proxy_pass http://unix:/run/gunicorn.sock;
    }
}

这样/static/开头的请求仍会转发给React服务，只有/admin/static/的请求会读取Django的静态文件，两者互不干扰。

方案2：直接用Nginx托管React静态文件（推荐） #

serve -s build适合开发环境，生产环境用Nginx直接托管静态文件更高效，还能避免代理转发问题：

1. 停止serve服务，将React的build目录复制到服务器的某个路径，比如/var/www/react/build
2. 修改Nginx配置，直接托管React静态文件并处理SPA路由 fallback：

server {
    listen 80;
    server_name server_ip;
    
    # 托管React静态文件，处理SPA路由
    location / {
        root /var/www/react/build;
        try_files $uri $uri/ /index.html;
    }

    # 处理Django Admin静态文件
    location /static/ {
        root /var/www/html;
    }

    # 转发Django的API和Admin请求
    location ~* ^/(api|path/admin) {
       include proxy_params;
       proxy_pass http://unix:/run/gunicorn.sock;
    }
}

这种方式无需运行serve服务，Nginx直接处理所有静态资源，性能更优，也不会出现路径冲突。

方案3：仅拦截Django Admin相关的静态请求 #

如果不想修改Django的STATIC_URL，可以让Nginx只拦截/path/admin/static/这类和Django Admin绑定的静态请求：

server {
    listen 80;
    server_name server_ip;
    
    location / {
      proxy_set_header   X-Forwarded-For $remote_addr;
      proxy_set_header   Host $http_host;
      proxy_pass http://localhost:3000;
   }

    # 只匹配Django Admin路径下的静态文件
    location ~* ^/path/admin/static/ {
        root /var/www/html;
        # 去掉路径前缀，正确定位文件
        rewrite ^/path/admin/static/(.*)$ /static/$1 break;
    }

    location ~* ^/(api|path/admin) {
       include proxy_params;
       proxy_pass http://unix:/run/gunicorn.sock;
    }
}

该配置会将/path/admin/static/开头的请求映射到/var/www/html/static/目录，其他/static/请求仍转发给React服务。

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