如何将Chart.js资源存入Django静态文件夹，实现CloudFront缓存并脱离Cloudflare依赖

1. 先把Chart.js下载到本地静态文件夹 #

• 找到你之前用的Cloudflare CDN对应的Chart.js版本，直接下载同名的chart.min.js（如果需要源码映射文件也一并下载）
• 将文件放到Django项目的静态目录中，比如your_project/static/js/chart.min.js，路径可根据项目结构调整，只要在静态文件夹范围内即可

2. 检查Django静态文件配置 #

• 打开项目的settings.py，确认以下配置无误：

  STATIC_URL = '/static/'
  STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')  # 生产环境收集所有静态文件的目录
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, 'static'),  # 开发环境存放静态文件的目录
  ]
  

• 生产环境下，必须运行python manage.py collectstatic命令，把分散在各个app里的静态文件统一收集到STATIC_ROOT指定目录，方便后续部署到CloudFront的源服务

3. 修改HTML模板里的资源引用 #

• 把原来的Cloudflare CDN链接替换成Django的静态文件标签：
  旧的CDN链接示例：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
  

  替换为：

  <script src="{% static 'js/chart.min.js' %}"></script>
  

• 务必在模板最顶部添加{% load static %}标签，否则Django无法识别静态文件模板标签

4. 配置CloudFront缓存静态资源 #

• 将STATIC_ROOT中的所有静态文件上传到S3存储桶（或你使用的其他源服务器）
• 在CloudFront控制台创建新分发，将源设置为你的S3存储桶（若用S3需配置权限，允许CloudFront访问）
• 配置缓存行为：
  • 针对/static/*路径设置缓存策略，TTL可设长一些（比如30天），毕竟静态资源不会频繁变更
  • 调整缓存键和源请求策略，确保CloudFront能正确缓存这些静态文件
• 最后更新Django的STATIC_URL为你的CloudFront分发域名，示例：

  STATIC_URL = 'https://your-cloudfront-domain/static/'
  

  这样模板中的静态资源会直接指向CloudFront缓存地址，用户访问时走CloudFront缓存，同时彻底摆脱对Cloudflare的依赖

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