如何优化 CloudFront 以便为我的单页应用程序提供服务？

解决方案

**注意：**在以下解决方法中，原始服务器示例为 Amazon Simple Storage (Amazon S3) 存储桶。

配置您的查看器与 CloudFront 之间的安全通信

执行以下操作：

• 要求在查看器和 CloudFront 之间使用 HTTPS 进行通信。将 CloudFront 配置为自动将 HTTP 请求重定向到 HTTPS，或拒绝 HTTP 请求。
• 要使用您的域名进行安全连接，请从 AWS Certificate Manager (ACM) 或第三方获取 SSL/TLS 证书。
• 选择包含您的查看器连接支持的密码和协议的安全策略。

限制访问您的 AWS 来源

如果您使用 Amazon S3 作为 AWS 来源，请限制对 S3 存储桶的公开访问。

**注意：**最佳做法是使用来源访问控制 (OAC) 设置来保护您的来源。

要限制对其他来源的访问，请参阅限制对 AWS 源的访问。

解决 SPA 客户端路由的问题

当您导航到 index.html 以外的路由（例如 https://example.com/about-us），然后刷新页面时，会出现 403 或 404 HTTP 状态码错误。S3 存储桶没有 /about-us 的路径或前缀。

**注意：**当 OAC 的存储桶策略不包含 s3:ListBucket 权限时，Amazon S3 会返回 403 错误。

当 Amazon S3 返回 403 或 404 错误时，CloudFront 会提供 index.html 文件，该文件是 SPA 的有效路由。要解决这些问题，请为 403 和 404 错误配置错误响应。

完成以下步骤：

1. 打开 CloudFront 控制台。
2. 在导航窗格中，选择 Distributions（分配），然后选择您的分配。
3. 选择 Error pages（错误页面）选项卡。
4. 选择 Create custom error response（创建自定义错误响应）。
5. 对于 HTTP error code（HTTP 错误代码），请选择 403: Forbidden 或 404: Not Found。
6. 对于 Error caching minimum TTL（错误缓存最低 TTL），您可以输入 0 或您的首选值。
7. 对于 Customize error response（自定义错误响应），选择 Yes（是）。
8. 对于 Response page path（响应页面路径），输入 /index.html。
9. 对于 HTTP Response code（HTTP 响应代码），请选择 200: OK。
10. 选择 Create custom error response（创建自定义错误响应）。
11. 选择 General（常规）选项卡，然后等待部署完成。

实施缓存策略

要平衡 SPA 的内容新鲜度和交付速度，请执行以下操作：

• 为不可变资产（例如 JavaScript 和 CSS 文件）实现较长的缓存时间。例如，要将资源缓存 1 年，请在 S3 对象元数据中使用 Cache-Control 标头，其值为 public, max-age = 31536000。
• 对于 index.html 文件，使用短存活时间 (TTL)（例如 public, max-age = 60）缓存文件 60 秒。使用 stale-while-revalidate = 2592000 的短 TTL，以便 CloudFront 能够在后台重新验证期间为过期的缓存版本服务最多 30 天。
• 使用适当的 CloudFront 缓存策略，该策略既适用于频繁更新的内容的短 TTL，也适用于静态资产的长 TTL。例如，您可以使用 Managed-CachingOptimized 策略。

有关详细信息，请参阅 Host single page applications (SPA) with tiered TTLs on CloudFront and S3（在 CloudFront 和 S3 上使用分层 TTL 托管单页应用程序 (SPA)）。

选择适当的 CloudFront 价格等级

要降低交付内容的成本，请选择与用户位置相符的价格等级。要确定您的大多数用户所在的位置，请查看您的 CloudFront 使用情况报告。如果您的用户主要位于一个 AWS 区域，请选择价格等级 200 或 100。但是，如果性能很重要，请保留默认价格等级“All”（全部），以向全球受众提供您的内容。有关每个价格等级所服务的区域的信息，请参阅价格等级。

相关信息

将基于 React 的单页应用程序部署到 Amazon S3 和 CloudFront