Django+Gunicorn+Nginx部署AWS ECS：CSS加载但页面仅显示文本

在AWS ECS上部署了基于Gunicorn+Nginx的Django应用，Nginx可正常加载静态文件（无404错误），但页面仅显示纯文本样式。使用runserver直接运行时UI显示正常，切换为Gunicorn部署后出现异常。

相关配置 #

Nginx配置 #

server {
  listen 80;
  listen [::]:80;

  server_name api.example.com;

  location /health {
    access_log off;
    return 200;
  }

  proxy_read_timeout 300;
  proxy_connect_timeout 300;
  proxy_send_timeout 300;

  # Main app
  location / {
    if ($request_method !~ ^(GET|POST|HEAD|OPTIONS|PUT|DELETE|PATCH)$) {
      return 405;
    }

    include  /etc/nginx/mime.types;

    proxy_pass http://example-api:8000;
    proxy_redirect     off;
    proxy_set_header   Host                 $host;
    proxy_set_header   X-Forwarded-For      $proxy_add_x_forwarded_for;
    proxy_set_header   X-Forwarded-Proto    $http_x_forwarded_proto;
    proxy_set_header   X-Forwarded-Port     $http_x_forwarded_port;
  }

  location /static/ {
    autoindex on;
    alias /my_app/static/;
  }
}

Django settings.py配置 #

STATIC_URL = '/static/'
STATIC_ROOT = '/my_app/static/'

效果对比 #

• Gunicorn+Nginx部署效果：
• runserver运行效果：

1. 验证模板静态文件引用方式 #

确保Django模板中使用标准静态文件标签引用资源：

• 顶部添加{% load static %}
• 引用时使用{% static 'css/style.css' %}而非硬编码路径

runserver会自动处理静态文件路由，但Gunicorn依赖Nginx转发，硬编码路径可能导致浏览器无法正确识别样式资源。

2. 检查静态文件的Content-Type响应头 #

即使静态文件加载成功，若Nginx返回的Content-Type错误（比如CSS返回text/plain），浏览器会将其当作纯文本解析，不会应用样式。

• 打开浏览器F12→网络标签，刷新页面后查看CSS/JS文件的响应头，确认Content-Type是否正确（如CSS应为text/css）
• 若类型错误，在Nginx的/static/ location中手动添加类型声明：

location /static/ {
  autoindex on;
  alias /my_app/static/;
  types {
    text/css css;
    application/javascript js;
    image/png png;
    image/jpeg jpg;
    # 按需补充其他静态文件类型
  }
}

3. 确认静态文件收集与权限 #

• 部署时必须执行python manage.py collectstatic，确保静态文件同步到Nginx指定的/my_app/static/目录
• 进入ECS容器检查静态文件内容是否与本地一致，同时确保文件权限为Nginx进程可读（建议设置为chmod 644，所属组为nginx/www-data）

4. 排查Host头传递问题 #

Django生成绝对URL依赖正确的Host头，若Nginx转发的Host异常，可能间接影响样式解析。可尝试修改Nginx的Host配置：

proxy_set_header Host $server_name;

5. 检查中间件与CSRF设置 #

• 临时禁用非必要的自定义中间件，排查是否存在响应头篡改导致的样式解析异常
• 确认settings.py中CSRF_TRUSTED_ORIGINS包含域名api.example.com，避免CSRF验证影响页面渲染

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