Django部署在Heroku时如何实现JS/CSS本地托管、图片从S3存储桶获取

完全可以实现该需求，Django支持为不同类型的文件配置独立的存储后端，只需将JS/CSS等静态文件配置为Heroku本地存储（通过whitenoise提供访问），图片类媒体文件配置为S3存储即可。

1. 安装依赖包 #

首先安装S3对接和静态文件处理所需的依赖：

pip install django-storages boto3 whitenoise

将storages加入settings.py的INSTALLED_APPS列表：

INSTALLED_APPS = [
    # 其他原有应用
    'storages',
]

2. 自定义S3媒体存储类 #

在项目根目录（和settings.py同层级）新建storages.py文件，定义仅用于媒体文件的S3存储后端：

from storages.backends.s3boto3 import S3Boto3Storage

class MediaStorage(S3Boto3Storage):
    # S3桶内存储媒体文件的目录前缀
    location = 'media'
    # 同名文件不覆盖，避免资源冲突
    file_overwrite = False

3. 配置settings.py参数 #

分别配置静态文件和媒体文件的存储规则：

静态文件（JS/CSS/字体等）配置 #

保持静态文件走Heroku本地存储，通过whitenoise提供访问：

import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
# 使用whitenoise的压缩存储方案
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

# 确保whitenoise中间件已加入MIDDLEWARE列表，放在SecurityMiddleware之后即可
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',
    # 其他原有中间件
]

媒体文件（图片等）配置 #

指定媒体文件走自定义的S3存储后端，敏感参数从环境变量读取：

# 媒体文件默认存储后端，替换为你实际的项目路径
DEFAULT_FILE_STORAGE = '你的项目名称.storages.MediaStorage'

# S3相关配置，参数值配置到Heroku的环境变量中，不要硬编码到代码
AWS_ACCESS_KEY_ID = os.getenv('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.getenv('AWS_SECRET_ACCESS_KEY')
AWS_STORAGE_BUCKET_NAME = os.getenv('AWS_STORAGE_BUCKET_NAME')
AWS_S3_REGION_NAME = os.getenv('AWS_S3_REGION_NAME') # 示例值：ap-northeast-1
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.{AWS_S3_REGION_NAME}.amazonaws.com'
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/media/'

4. 模板调用规则 #

• 引用JS/CSS资源时照常使用{% static '路径/文件名.css' %}，生成的是Heroku本地静态资源地址
• 引用用户上传的图片资源时使用{{ 模型实例.图片字段.url }}，生成的是S3的资源访问地址

5. Heroku部署配置 #

• 把所有新增依赖写入requirements.txt
• 在Heroku控制台的配置变量页面，添加所有AWS相关的环境变量
• 正常执行部署即可，部署时Heroku会自动运行collectstatic收集所有静态文件到本地，不需要再上传静态资源到S3

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