如何借助CloudFront让Prismic托管的图片从自有域名加载？

针对你的需求，完全可以通过CloudFront的边缘计算能力解析HTML内容并重写图片URL，以下是两种实用方案：

方案1：CloudFront函数（轻量首选） #

CloudFront函数是边缘节点执行的轻量级工具，适合简单的URL重写场景，延迟低、成本可控。

• 操作步骤：

  1. 进入AWS控制台的CloudFront服务，创建新的CloudFront函数
  2. 编写响应处理代码，替换Prismic图片域名并可优化文件名：

     function handler(event) {
         const response = event.response;
         const headers = response.headers;
     
         // 仅处理HTML类型的响应
         if (headers['content-type'] && headers['content-type'].value.includes('text/html')) {
             let body = response.body.data;
             // 替换实际的Prismic CDN域名和你的自有域名
             const prismicCdn = 'prismic-cdn.your-prismic-domain.com';
             const customDomain = 'your-own-domain.com';
             // 正则匹配img标签的src属性，替换域名，可按需调整匹配规则
             body = body.replace(new RegExp(`src="https?://${prismicCdn}/(.*?\\.(jpg|jpeg|png|webp))"`, 'gi'), `src="https://${customDomain}/seo-images/$1"`);
             // 若需优化文件名，可在此添加额外替换逻辑（比如清理特殊字符）
             // 更新响应体和内容长度
             response.body.data = body;
             headers['content-length'] = { value: body.length.toString() };
         }
         return response;
     }
     

  3. 将函数关联到你的CloudFront分发的Viewer Response事件
  4. 测试验证HTML中的图片URL是否被正确替换

• 优势：边缘执行无额外延迟；免费额度内几乎无成本；配置简单。

方案2：Lambda@Edge（复杂场景适配） #

如果需要更复杂的逻辑（比如动态生成SEO友好文件名、关联图片元数据），可以使用Lambda@Edge，支持完整的Node.js功能。

• 操作步骤：

  1. 在AWS us-east-1区域创建Lambda函数（Lambda@Edge仅支持从此区域部署）
  2. 编写响应处理代码：

     exports.handler = async (event) => {
         const response = event.Records[0].cf.response;
         const headers = response.headers;
     
         if (headers['content-type'] && headers['content-type'][0].value.includes('text/html')) {
             // 解码响应体
             let body = Buffer.from(response.body.data, 'base64').toString('utf-8');
             const prismicDomain = 'prismic-cdn.your-prismic-domain.com';
             const customDomain = 'your-own-domain.com';
             // 替换域名并优化文件名
             body = body.replace(new RegExp(`https?://${prismicDomain}/(.*)`, 'gi'), (match, filename) => {
                 // 清理文件名中的特殊字符，生成SEO友好名称
                 const seoFilename = filename.replace(/[^a-zA-Z0-9.-]/g, '-').toLowerCase();
                 return `https://${customDomain}/seo-images/${seoFilename}`;
             });
             // 重新编码响应体并更新头部
             response.body.data = Buffer.from(body).toString('base64');
             headers['content-length'] = [{ key: 'Content-Length', value: body.length.toString() }];
         }
         return response;
     };
     

  3. 将Lambda函数关联到CloudFront分发的Viewer Response事件
  4. 部署并测试功能

• 优势：支持复杂业务逻辑；可集成S3、DynamoDB等服务存储图片或映射关系。

关键注意事项 #

• 缓存失效：修改重写逻辑后，需手动触发CloudFront缓存失效，确保用户获取最新内容
• 图片资源映射：重写后的URL需指向有效资源，可选择两种方式：
  • 定期同步Prismic图片到自有域名的存储（如S3），通过CloudFront分发
  • 将自有域名的CloudFront配置为Prismic CDN的反向代理，直接转发请求无需同步
• 正则准确性：根据实际HTML中图片URL的格式调整正则表达式，避免误替换其他内容

内容的提问来源于stack exchange，提问作者Sébastien