VPS部署Django+React的Nginx配置问题及Admin路径错误修复

我使用VPS（Ubuntu 20系统）、Nginx、Gunicorn部署Django项目，<my_ip>:8000可正常运行Django应用。期望<my_ip>运行React前端，<my_ip>/api/运行Django后端。

当前Nginx配置文件（/etc/nginx/sites-available/default）内容：

root /home/ubuntu/client/build;

server {
    listen 80;
    server_name <my_ip>;
    access_log  /var/log/nginx/example.log;

    location /media/ {
        root /home/ubuntu/api;
        expires 30d;
    }

    location /static/ {
        root /home/ubuntu/api;
        expires 30d;
    }

    location /api/ {
        rewrite /api/(.*) /$1 break;
        proxy_pass http://<my_api>:8000;
        proxy_set_header Host $server_name;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location / {
        try files $uri $uri /index.html
    }
}

目前前端、后端、静态文件及媒体文件均可正常工作，但进入/api/admin页面后，所有链接仍指向根目录，例如点击“Orders”链接时，跳转地址为/admin/orders/，期望路径为/api/admin/orders/，导致Gunicorn日志中出现大量“未找到”错误。

此外曾遇到静态文件夹冲突问题：原Nginx配置中Django静态文件规则导致React构建无法运行，已通过以下配置解决：

location /static/ {
        try_files /../../api/$uri /$uri;
        expires 30d;
    }

请问能否通过Nginx或Django配置修复Django admin页面的路径错误问题？

方式一：修改Django配置（推荐） #

Django生成的admin链接由项目配置决定，直接在settings.py中配置API前缀即可从根源解决问题：

1. 打开Django项目的settings.py，添加/修改以下配置项：

# 指定API前缀，与Nginx路由规则匹配
FORCE_SCRIPT_NAME = '/api'

# 让静态/媒体文件URL自动带上前缀
STATIC_URL = '/api/static/'
MEDIA_URL = '/api/media/'

2. 重新收集静态文件（确保静态资源路径正确）：

python manage.py collectstatic

3. 重启Gunicorn服务使配置生效：

# 替换为你的Gunicorn服务名，示例为gunicorn-api.service
sudo systemctl restart gunicorn-api.service

配置完成后，Django生成的所有admin链接会自动带上/api前缀，完全匹配Nginx的路由规则。

方式二：修改Nginx配置（临时方案） #

若不想改动Django配置，可通过Nginx规则拦截根路径的admin请求并转发，但这种方式仅能处理表层跳转，无法解决Django内部生成的链接问题，仅作临时应急：

修改Nginx配置文件，新增根路径admin的处理规则：

server {
    listen 80;
    server_name <my_ip>;
    access_log  /var/log/nginx/example.log;

    # 保留已解决静态文件冲突的规则
    location /static/ {
        try_files /../../api/$uri /$uri;
        expires 30d;
    }

    location /media/ {
        root /home/ubuntu/api;
        expires 30d;
    }

    # 拦截根路径的admin请求，转发到/api/admin/
    location /admin/ {
        rewrite ^/admin/(.*)$ /api/admin/$1 break;
        proxy_pass http://<my_api>:8000;
        proxy_set_header Host $server_name;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /api/ {
        rewrite /api/(.*) /$1 break;
        proxy_pass http://<my_api>:8000;
        proxy_set_header Host $server_name;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }
}

修改后重启Nginx服务：

sudo nginx -t && sudo systemctl restart nginx

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