S3 静态托管 - 没有 index.html 的路径

Question

我们有多个 Angular 项目，我们希望将它们快速上传到 s3 以进行质量检查和测试。我们将它们全部上传到同一个桶，在不同的子文件夹中。所以s3的bucket结构如下：

 -- tests-bucket
    -- project1
       -- index.html
    -- project2
       -- index.html

然后我们有一个云端分发和 route53 设置，例如tests.domain.com.

通过完整路径访问项目时一切正常：

tests.domain.com/project1/index.html
tests.domain.com/project2/index.html

但是，当我们尝试在没有 index.html（tests.domain.com/project1 或 tests.domain.com/project1/）的情况下访问项目时，我们会收到以下错误：

<Error>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
<Key>index.html</Key>
<RequestId></RequestId>
<HostId></HostId>
</Error>

这让我们很难测试，因为在初始页面加载后，index.html 会自动删除，任何额外的重新加载都会导致 404 错误。

存储桶设置为网站静态托管服务，索引和错误文档都指向 index.html。

CloudFront 分发也设置为将 404 错误路径重定向到 index.html。

似乎此设置仅适用于存储桶的根路径tests.domain.com/index.html，但不支持子目录。

This AWS article 让它看起来成为可能，但在我们的例子中，它不适用于 SPA/Angular 应用程序。

通过快速研究，我发现 this tutorial 使用 Lamda Edge 重定向解决了这个问题，但设置似乎有点矫枉过正，而且似乎只支持美国东部分布。

是否有任何简单的配置可以解决这个问题，仅使用不涉及 lambda 函数的 s3/cloudfront/route53？

Answer 1

2022 编辑：

您现在可以通过设置 CloudFront 默认根对象（定义为 here）而不是应用以下答案来完成此逻辑。如果出于某种原因更简单的选项不起作用，则以下答案继续有效。

原答案：

是的，当您在存储桶中启用网站托管时，您可以使用“索引文档”属性配置它。在此处查看 CLI 文档：https://docs.aws.amazon.com/cli/latest/reference/s3/website.html

当您启用此功能时，它将在不以文件结尾的每个路径上启用。因此，如果您将索引文档属性设置为“index.html”[=15=，那么请求“/project1/”将 return“/project1/index.html” ]

更多文档：

https://docs.aws.amazon.com/AmazonS3/latest/dev/IndexDocumentSupport.html

https://docs.aws.amazon.com/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html

使用 Cloudfront 时，cloudfront 中的默认根对象行为将覆盖 S3 中的索引文档使用。要避免此行为，请不要使用 S3 源，而是使用自定义源并通过您的 S3 存储桶 URL 作为源域名。

文档：

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html（具体来说，“但是，如果您定义了默认根对象，则最终用户对您分发的子目录的请求不会 return 默认根对象。例如，假设 index.html 是您的默认根对象，并且 CloudFront 收到最终用户对您的 CloudFront 分配下的安装目录的请求")

S3 静态托管 - 没有 index.html 的路径

S3 static hosting - path without index.html

angular

amazon-web-services

amazon-s3

amazon-cloudfront