如何配置Nginx从不同端口加载Django Admin的CSS静态文件

我来帮你搞定这个问题！结合你用Nginx部署Angular、Daphne跑Channels+Django的架构，核心问题是Django Admin的静态文件没被正确处理——之前你直接访问8080的/admin时，静态文件请求可能走了Daphne，但Daphne作为ASGI服务器，并不擅长（也不应该）处理静态文件，所以导致CSS加载失败。咱们一步步来解决：

第一步：先确认Django静态文件已收集 #

首先得确保你已经执行了Django的静态文件收集命令，这是生产环境的基础操作，千万不能漏：

python manage.py collectstatic

执行这个命令后，Django会把所有Admin的CSS、JS，还有你项目里的静态文件，统一复制到settings.py里配置的STATIC_ROOT目录下（比如常见的/var/www/your-project/staticfiles/，或者你自定义的路径）。

第二步：修改Nginx配置文件 #

接下来调整你的Nginx配置（通常在/etc/nginx/sites-available/或者/etc/nginx/conf.d/目录下），参考下面的配置模板，记得替换成你自己的实际路径：

server {
    listen 80;
    server_name whatever; # 换成你的域名或服务器IP

    # 处理Angular的请求，指向你的Angular打包后的dist目录
    location / {
        root /path/to/your/angular/dist; # 替换成Angular dist文件夹的实际路径
        try_files $uri $uri/ /index.html; # 适配Angular单页应用的路由跳转
    }

    # 关键：直接用Nginx返回Django的静态文件，不走Daphne
    location /static/ {
        alias /path/to/your/django/static_root/; # 替换成你STATIC_ROOT的实际路径
        expires 30d; # 给静态文件加缓存，提升加载速度
    }

    # 把Admin的动态请求反向代理到Daphne的8080端口
    location /admin/ {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 如果你的Django还有其他API路由（比如/api/），也可以在这里添加类似的代理配置
    # location /api/ {
    #     proxy_pass http://127.0.0.1:8080;
    #     proxy_set_header Host $host;
    #     # 复制上面的proxy_set_header配置即可
    # }
}

配置说明 #

• location /：负责处理所有Angular的页面请求，确保单页应用的路由能正常跳转。
• location /static/：这是解决CSS加载失败的核心——让Nginx直接返回静态文件，而不是把请求转发给Daphne，避免静态文件请求出现404。
• location /admin/：把Admin的动态操作请求（比如登录、数据修改）转发给Daphne，保证Admin的功能正常运行。

第三步：验证配置并重启Nginx #

配置改完后，先测试Nginx配置有没有语法错误：

nginx -t

如果输出test is successful，就可以重启Nginx让配置生效：

systemctl restart nginx

额外检查项 #

最后再确认下Django的settings.py配置：

• 生产环境下确保DEBUG = False（DEBUG=True时Django会自己处理静态文件，但生产环境必须用Nginx）
• 确认STATIC_URL = '/static/'，且STATIC_ROOT的路径和Nginx配置里的alias路径完全一致

这样配置后，你访问http://whatever/admin时，Admin的CSS文件会直接从Nginx的静态目录加载，就能正常显示样式了！

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