SST项目中StaticSite组件对CloudFront函数的支持优化

背景介绍

在AWS架构中，CloudFront作为CDN服务，其边缘计算能力通过CloudFront Functions实现。SST框架中的StaticSite组件为开发者提供了便捷的静态网站部署方案，但在处理CloudFront函数集成时，现有的API设计存在一些值得探讨的优化空间。

当前实现的问题分析

StaticSite组件默认会为每个静态网站创建一个基础的CloudFront函数，主要处理请求URI的重写逻辑。然而，这种默认实现存在几个关键问题：

1. SPA应用场景下的路由问题：对于单页应用(SPA)，默认的重写逻辑会将类似/sign-up的路径重写为/sign-up.html，这与SPA期望的行为不符，可能导致404错误。

2. 缓存效率问题：默认配置下，HTML文件通常不被缓存，导致频繁回源，影响性能。

3. 扩展性限制：开发者无法完全控制函数逻辑，只能通过"注入"模式修改部分行为，这种设计不够灵活。

技术方案对比

现有方案

• ARN引用：允许直接引用已存在的CloudFront函数ARN
• 代码注入：通过字符串拼接方式修改默认函数逻辑

改进建议

1. 完整代码覆盖：提供code属性，允许开发者完全覆盖默认函数实现
2. 组合式API：提供高阶函数模式，开发者可以组合默认逻辑和自定义逻辑
3. SPA专用预设：为单页应用提供优化的默认函数实现

最佳实践建议

对于SPA应用，推荐使用以下CloudFront函数逻辑：

const assetExtensions = ['.js', '.css', '.svg', '.json', '.woff2', '.webp', '.png'];

function handler(event) {
  if (!assetExtensions.some((ext) => event.request.uri.endsWith(ext))) {
    event.request.uri = '/index.html';
  }
  return event.request;
}

这种实现方式：

1. 确保所有非静态资源请求都路由到index.html
2. 保持静态资源的高效缓存
3. 避免不必要的404错误和缓存失效

未来发展方向

SST框架可以考虑引入专门的CloudFront Function组件，提供：

1. 代码压缩和优化功能
2. 跨多个StaticSite实例的函数复用
3. 更友好的开发体验，如本地测试支持
4. 预设模板库，包含常见用例的最佳实践

总结

StaticSite组件的CloudFront函数集成需要平衡易用性和灵活性。当前版本通过恢复ARN支持和改进注入模式解决了部分问题，但从长远来看，提供更完整的函数控制能力和SPA优化预设将是更好的发展方向。开发者应根据具体应用场景选择合适的实现方式，在灵活性和开发效率之间取得平衡。