S3静态托管-不含index.html的路径 [英] S3 static hosting - path without index.html

问题描述

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

We have multiple Angular projects which we like to quickly upload to s3 for QA & testing. We upload all of them to the same bucket, in different subfolders. So the s3 bucket structure is as following:

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

我们然后进行云前端分配和route53设置，例如tests.domain.com。

We then have a cloud front distribution and route53 setup e.g. tests.domain.com.

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

When accessing the projects via the full path everything works:

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

但是，当我们尝试不使用index.html（ tests.domain.com/project1 或 tests.domain.com/project1 / ），我们将收到以下错误：

However, when we try accessing the project without index.html (tests.domain.com/project1 or tests.domain.com/project1/) we get the following error:

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

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

This makes it hard for us to test, since after the initial page load, the index.html is automatically removed and any additional reload will lead to a 404 error.

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

The bucket is set to serve website static hosting and both index and error documents point to index.html.

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

The CloudFront distribution is also set to have a 404 error path redirect to index.html.

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

It seems as this setup only works for the root path of the bucket tests.domain.com/index.html but does not support subdirectories.

这篇AWS文章使其成为可能，但在我们的情况下，它不适用于SPA / Angular应用程序。

This AWS article makes it seems possible, but in our case, it does not work with an SPA/Angular application.

通过对此的快速研究，我发现本教程，它使用Lamda Edge重定向解决了此问题，但设置似乎有点过头了，加上似乎

From a quick research into this, I found this tutorial which resolves this issue using a Lamda Edge redirect, but the setup seems a bit overkill, plus only seems to support the US East distribution.

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

Is there any simple configuration that can resolve this, using only s3/cloudfront/route53 which does not involve lambda functions?

推荐答案

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

Yes, you can configure this using the "index-document" property when you're enabling website hosting in your bucket. Check out the CLI documentation here: https://docs.aws.amazon.com/cli/latest/reference/s3/website.html

启用此功能后，将在所有不支持该功能的路径上启用该功能t以文件结尾。因此，如果将index-document属性设置为 index.html，则请求 / project1 /将返回 /project1/index.html

When you enable this functionality, it will be enabled on every path that doesn't end in a file. So requesting "/project1/" would return "/project1/index.html" if you set your index-document property to "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作为来源域名。

When using Cloudfront, the default root object behavior in cloudfront will override the index-document usage from S3. To get around this behavior, don't use a S3 origin, and instead use a custom origin and pass through your S3 bucket URL as the origin domain name.

文档：

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

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html (specifically, "However, if you define a default root object, an end-user request for a subdirectory of your distribution does not return the default root object. For example, suppose index.html is your default root object and that CloudFront receives an end-user request for the install directory under your CloudFront distribution")

这篇关于S3静态托管-不含index.html的路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！