使用 s3 和 Cloudfront 提供 React 应用程序

Question

我想知道这是否可行。我正在考虑使用 s3 和 Cloudfront 提供 React 应用程序。

有些路由是预渲染的，可以作为静态 index.html 文件提供。而其他路由则需要由客户端路由处理。

我希望 s3 做的是，如果有人要求一条未预渲染的路线，我会提供默认的 index.html 文件而不是 404。我不想返回重定向响应，因为 url 需要保持不变才能由客户端路由处理。

可以使用 s3 执行此操作吗？或者也许从 Cloudfront 中，有没有办法检测来自 s3 的 404 响应并返回默认文件？

我所说的“路由”是指 URL。因此，有些 URL 我想要为其提供 html 文件，而对于所有其他 URL，我想要为其提供默认 html 文件。（如果请求的 mimetype 为 text/html）

Answer 1

如果我正确理解了您的问题，您希望将所有 404 错误转发到特定的 HTML 页面，并向用户返回 200 响应而不是 404。

这可以通过 CloudFront 轻松配置。查看此内容博客文章了解如何操作。具体来说，请阅读有关 CloudFront 的最后一节。

基本上，CloudFront 配置中有一个区域允许您执行您想要执行的操作，并允许您将特定错误映射到文件，并返回您想要的任何响应代码。

如果您使用 CloudFormation 来概述您的 CloudFront 分发，并且想要更新您的 CloudFormation 模板来实现这一点，您可以在DistributionConfig资源属性下添加以下内容：

CustomErrorResponses:
  -
    ErrorCode: 404
    ResponseCode: 200
    ResponsePagePath: /index.html