如何配置Apostrophe-CMS通过CloudFront以HTTPS加载S3资源与附件

我之前也碰到过一模一样的问题，核心就是要让Apostrophe知道通过你的CloudFront分发来加载所有静态资源和用户上传文件，而不是直接调用S3的默认HTTP地址。下面是具体的配置和验证步骤：

1. 全局配置CloudFront CDN前缀 #

在项目根目录的app.js文件中，找到modules配置块，给静态资源、文件、图片模块添加cdn选项，指定你的CloudFront HTTPS域名：

modules: {
  // 配置系统静态资源（CSS、JS、字体等）走CloudFront
  'apostrophe-assets': {
    cdn: 'https://your-cloudfront-domain.cloudfront.net'
  },
  // 配置用户上传的普通文件走CloudFront
  'apostrophe-files': {
    cdn: 'https://your-cloudfront-domain.cloudfront.net'
  },
  // 配置用户上传的图片走CloudFront
  'apostrophe-images': {
    cdn: 'https://your-cloudfront-domain.cloudfront.net'
  },
  // 如果使用了视频、文档等其他上传类模块，也要添加对应的cdn配置
  'apostrophe-s3': {
    bucket: 'your-s3-bucket-name',
    region: 'your-s3-region',
    // 不需要在这里设置S3的endpoint，CloudFront会作为中间层处理请求
  }
}

2. 验证CloudFront与S3的权限配置 #

• 确保你已经给CloudFront配置了Origin Access Control（OAC），允许CloudFront访问你的S3桶（避免直接暴露S3的原始地址）。
• 检查S3桶的CORS规则，确保允许CloudFront域名的HTTPS请求，示例规则如下：

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

3. 清除缓存并重启服务 #

• 重启你的Apostrophe服务，让新的CDN配置生效。
• 登录CloudFront控制台，找到你的分发，进入「缓存」标签页，点击「创建无效」，输入/*清除所有缓存（避免旧的HTTP地址还被缓存）。
• 如果项目本地有public/uploads目录的缓存文件，也可以删除这个目录，Apostrophe会重新从S3拉取资源并通过CloudFront分发。

4. 验证资源加载地址 #

打开你的网站，右键查看页面源码，确认所有静态资源、上传文件/图片的地址已经变成https://your-cloudfront-domain.cloudfront.net/...的形式。如果还有个别资源是HTTP，检查是否有自定义模板里硬编码了HTTP地址，建议改成相对路径或者使用Apostrophe提供的apos.asset.url()这类辅助方法生成资源地址。

内容的提问来源于stack exchange，提问作者Zach B.