时间戳

首页 > 解决方案 > S3 静态托管 - 没有 index.html 的路径

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

问题描述

我们有多个 Angular 项目，我们喜欢快速上传到 s3 进行 QA 和测试。我们将它们全部上传到同一个存储桶中的不同子文件夹中。所以s3桶结构如下：

 -- 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但不支持子目录。

这篇 AWS 文章使之成为可能，但在我们的案例中，它不适用于 SPA/Angular 应用程序。

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

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

标签： angularamazon-web-servicesamazon-s3amazon-cloudfront

解决方案

2022年编辑：

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

原答案：

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

当您启用此功能时，它将在不以文件结尾的每个路径上启用。因此，如果您将 index-document 属性设置为“index.html”，则请求“/project1/”将返回“/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（具体来说，“但是，如果您定义默认根对象，则最终用户对您的分配的子目录的请求不会返回默认根对象。例如，假设 index.html 是您的默认根对象，并且 CloudFront 收到最终用户对您的 CloudFront 分配下的安装目录的请求”）

推荐阅读