部署后Django应用/app路由样式渲染异常求助

• 检查模板静态文件引用方式
  所有静态资源必须使用Django的{% static %}模板标签生成URL，绝对不能用相对路径。示例：

  <link rel="stylesheet" href="{% static 'css/tailwind.css' %}">
  

  同时在settings.py中确保STATIC_URL配置为绝对路径或S3完整域名，比如：

  STATIC_URL = 'https://your-s3-bucket.s3.amazonaws.com/static/'
  

  若使用django-storages，需确认AWS_S3_CUSTOM_DOMAIN配置正确，保证{% static %}能生成正确的S3资源地址。

• 验证Nginx路由转发配置
  检查Nginx配置中，静态文件规则的优先级必须高于/app的转发规则，避免把静态请求误发给Uvicorn。参考配置示例：

  server {
      listen 80;
      server_name mydomain.com;
  
      # 静态文件直接代理到S3
      location /static/ {
          proxy_pass https://your-s3-bucket.s3.amazonaws.com/static/;
          proxy_set_header Host your-s3-bucket.s3.amazonaws.com;
      }
  
      # /app路由转发给Uvicorn
      location /app/ {
          proxy_pass http://127.0.0.1:8000/app/;
          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;
      }
  
      # 主站其他路由转发
      location / {
          proxy_pass http://127.0.0.1:8000/;
          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;
      }
  }
  

• 查看浏览器控制台的请求错误
  打开浏览器开发者工具（F12）的Network标签，刷新/app页面：

  • 若出现404错误，说明静态资源URL拼接错误，调整模板引用或Nginx配置；
  • 若出现CORS错误，需在S3桶的权限配置中添加CORS规则，允许mydomain.com的跨域请求。

• 确认Tailwind CSS构建配置
  检查tailwind.config.js的content字段是否包含/app路由对应的模板文件路径，示例：

  module.exports = {
    content: [
      "./templates/**/*.html",
      "./app_sub/templates/app_sub/**/*.html", // 确保覆盖/app的模板文件
    ],
    theme: {extend: {}},
    plugins: [],
  }
  

  重新构建Tailwind CSS并上传到S3，确保样式文件包含/app页面所需的类。

• 验证子应用静态资源收集情况
  若/app是通过include挂载的子应用，确认已执行python manage.py collectstatic，将子应用的静态文件同步到S3桶中。

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