部署在AWS的Django站点CSS不生效，需调整settings.py配置

问题背景 #

使用Django开发并部署在AWS上的网站，执行collectstatic命令将CSS文件上传至Amazon S3后，CSS样式无法正常生效。已确认S3上存在目标CSS文件，但不确定settings.py中的URL配置是否正确。

执行命令：

[ec2-user]$ python manage.py collectstatic

环境信息：Python 3.9、Django 4.1、Apache 2

相关代码 #

settings.py

import os
BASE_DIR = Path(__file__).resolve().parent.parent

#################################################################
#####     Static Files (CSS, JavaScript, Images)
#################################################################
STATIC_URL = "\/static\/"
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

#################################################################
#####     Amazon S3
#################################################################
DEFAULT_FILE_STORAGE = "storages.backends.s3boto3.S3Boto3Storage"
STATICFILES_STORAGE = "storages.backends.s3boto3.S3StaticStorage"    
AWS_LOCATION = "static"  
AWS_STORAGE_BUCKET_NAME = "mydomain-bucket"
AWS_S3_REGION_NAME = "ap-northeast-1"    
# AWS_S3_CUSTOM_DOMAIN = "%s.s3.amazonaws.com" % AWS_STORAGE_BUCKET_NAME
AWS_S3_CUSTOM_DOMAIN = "{}.s3.{}.amazonaws.com".format(AWS_STORAGE_BUCKET_NAME, AWS_S3_REGION_NAME)
# AWS_DEFAULT_ACL = None
STATIC_URL = 'https://%s/%s/' % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)

index.html

{% load static %}
{% load django_bootstrap5 %}

<head>
  <link href="{% static 'some-of-app/assets/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
</head>

Firefox中渲染的链接

<link href="https://mydomain-bucket.s3.ap-northeast-1.amazonaws.com/static/some-of-app/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

排查与修复方案 #

1. 修正S3文件访问权限（ACL） #

当前settings.py中AWS_DEFAULT_ACL被注释，默认情况下S3上传的文件权限为private，浏览器无法直接访问。需要修改配置：

• 取消# AWS_DEFAULT_ACL = None的注释，改为：

  AWS_DEFAULT_ACL = 'public-read'
  

• 重新执行collectstatic命令，确保新上传的文件拥有公开读权限；对于已上传的文件，可在S3控制台批量修改ACL为「公开读」。

2. 配置S3 Bucket的跨域规则（CORS） #

如果网站域名与S3存储桶域名不同，浏览器会因跨域策略拒绝加载CSS资源。需在S3控制台配置CORS规则：

1. 进入目标Bucket的「权限」标签
2. 找到「跨域资源共享(CORS)」，添加以下规则（替换为你的网站域名）：

   <CORSConfiguration>
     <CORSRule>
       <AllowedOrigin>https://your-website-domain.com</AllowedOrigin>
       <AllowedMethod>GET</AllowedMethod>
       <AllowedHeader>*</AllowedHeader>
     </CORSRule>
   </CORSConfiguration>
   

3. 确认静态资源路径一致性 #

• 检查S3存储桶中static目录下的文件路径，是否与模板中{% static %}生成的路径完全匹配（比如some-of-app/assets/vendor/bootstrap/css/bootstrap.min.css是否存在）。
• 当前STATIC_URL的配置生成的URL是正确的，末尾斜杠不影响路径解析，可保持不变。

4. 重新执行collectstatic并验证上传结果 #

执行命令时添加--verbosity 2查看详细日志，确认文件是否成功上传到S3的static目录：

python manage.py collectstatic --noinput --verbosity 2

内容的提问来源于stack exchange，提问作者K-Yuuma