Django搭配NGINX、uWSGI部署时静态CSS文件无法加载

仅CSS加载失败、图片和JS正常加载是Django+uWSGI+NGINX部署时的典型问题，核心诱因有三个：

• Django静态配置冲突：STATIC_ROOT（collectstatic命令的静态文件输出目录，供NGINX直接读取）和STATICFILES_DIRS（collectstatic的静态文件源目录）配置为完全相同的路径，会导致collectstatic执行时出现递归拷贝、文件覆盖损坏、权限异常，CSS这类文本文件最容易受影响。
• NGINX MIME类型识别异常：如果NGINX未加载默认MIME映射规则，CSS文件的响应头Content-Type会被错误返回为text/plain或application/octet-stream，现代浏览器会严格拦截MIME类型不匹配的样式表资源，而图片、JS对MIME校验的宽松度远高于CSS，因此可以正常加载。
• 路径匹配与权限问题：/assets的location规则未加尾部斜杠容易出现路径拼接错误；如果css子目录/文件的权限为NGINX运行用户不可读，也会定向出现CSS资源403的问题。

按顺序执行以下操作即可解决：

1. 修正Django静态文件配置
   打开项目的settings.py，将静态相关配置替换为如下内容，从根源上分离静态文件源目录和输出目录：

   import os
   from pathlib import Path
   
   BASE_DIR = Path(__file__).resolve().parent.parent
   
   STATIC_URL = '/assets/'
   MEDIA_URL = '/media/'
   MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
   # collectstatic执行后的静态文件输出目录，供NGINX读取
   STATIC_ROOT = os.path.join(BASE_DIR, "assets/")
   # 存放项目自身编写的静态文件的源目录，禁止和STATIC_ROOT路径重复
   STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static_src/'),)
   

2. 整理静态文件目录
   执行以下命令新建源目录，迁移原有项目自身的静态资源：

   cd /home/nebula/nebula
   mkdir static_src
   # 仅迁移项目自身的静态资源，admin、jazzmin、vendor等第三方资源后续由collectstatic自动生成
   mv assets/css assets/images assets/js static_src/
   

3. 重新归集静态文件并修正权限
   用项目所属用户（nebula）执行静态文件归集，避免root生成的文件权限异常：

   # 切换到项目用户
   su nebula
   cd /home/nebula/nebula
   # 清空旧的异常静态文件目录
   rm -rf assets/*
   # 重新执行静态文件归集
   python manage.py collectstatic --noinput
   # 给NGINX运行用户授予静态、媒体目录的读取权限
   chmod -R 755 /home/nebula/nebula/assets
   chmod -R 755 /home/nebula/nebula/media
   

4. 修正NGINX配置
   打开NGINX主配置（一般路径为/etc/nginx/nginx.conf），确认http块内已引入MIME类型映射：

   http {
       include       /etc/nginx/mime.types;
       default_type  application/octet-stream;
       # 其余原有配置保持不变，不要改动
   }
   

   再替换站点配置中的静态资源location规则，补全斜杠和MIME兜底配置：

   server {
       server_name example.com www.example.com;
       charset     utf-8;
       client_max_body_size 75M;
   
       location /media/ {
           alias /home/nebula/nebula/media/;
           expires 30d;
       }
       # location和alias路径都加尾部斜杠，避免路径拼接错误
       location /assets/ {
           alias /home/nebula/nebula/assets/;
           # 兜底指定CSS文件MIME类型，避免识别错误
           location ~* \.css$ {
               add_header Content-Type text/css;
           }
           expires 30d;
       }
   
       location / {
           uwsgi_pass  django;
           include     /home/nebula/nebula/uwsgi_params;
       }
   }
   

5. 重载服务生效
   执行命令验证NGINX配置无错误后重载服务：

   nginx -t
   # 控制台输出test is successful后执行重载
   systemctl reload nginx
   

• 打开浏览器开发者工具切换到网络面板，强制刷新页面（Ctrl+F5）清空旧缓存，查看CSS文件的响应头Content-Type为text/css即为正常。
• 直接访问单个CSS文件的完整URL，确认可以正常返回文本内容，无403、404错误。

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