如何使用 S3/Cloudfront 在子文件夹中提供 index.html？

Question

有一个名为 www.foo.site 的存储桶。在该站点中，有一个登录页面、一个关于页面和几个bar/* 文件夹中的一些页面。每个bar/* 都有一个 index.html 页面：bar/a/index.html、bar/b/index.html 等。

登陆页面运行良好（意味着 www.foo.site 将在我浏览到它时加载）但是当我点击我的关于链接等时，/about/index.html 页面和/bar/index.html 页面没有得到服务。如果我curl我得到404的URL。我试过分别设置源路径和源域名：

第一次尝试：

domain name: www.foo.site.s3.amazonaws.com
origin path: (blank)

第二次尝试：

domain name: s3-us-west-1.amazonaws.com
origin path: www.foo.site

两者的默认文档都是 index.html。

两者都不起作用。 上面提到的所有 S3 页面都可以直接浏览。 意思是 https://s3-us-west-1.amazonaws.com/www.foo.site/bar/index.html 加载预期的 html。

这一定是我缺少的一些 Cloudfront 设置。可能在我的 DNS 记录中？是否可以通过 Cloudfront 在 S3“文件夹”中提供 html 文件？

Answer 1

CloudFront 使用以 / 结尾的密钥提供 S3 文件

经过调查，似乎可以通过编程方式在 S3 中创建此类文件。因此，我写了一个小 lambda，它在 S3 上创建文件时触发，后缀为 index.html 或 index.htm

它所做的是将对象dir/subdir/index.html复制到对象dir/subdir/中

import json
import boto3

s3_client = boto3.client("s3")

def lambda_handler(event, context):

    for f in event['Records']:

        bucket_name = f['s3']['bucket']['name']
        key_name = f['s3']['object']['key']
        source_object = {'Bucket': bucket_name, 'Key': key_name}

        file_key_name = False

        if key_name[-10:].lower() == "index.html" and key_name.lower() != "index.html":
            file_key_name = key_name[0:-10]
        elif key_name[-9:].lower() == "index.htm" and key_name.lower() != "index.htm":
            file_key_name = key_name[0:-9]
        
        if file_key_name:
            s3_client.copy_object(CopySource=source_object, Bucket=bucket_name, Key=file_key_name)

Answer 2

这里有一些资源在通过 https://domain/folder/ 从 S3 隐式提供 index.html 时很有帮助，而不必显式使用 https://domain/folder/index.html：

• Serving index pages from a non-root location via CloudFront
• Serving index pages from a non-root location via CloudFront (now unavailable)
• Implementing Default Indexes in CloudFront Origins Using Lambda@Edge

配置 CloudFront 分配时的关键是：

不要为您的 CloudFront 分配配置默认根对象

如果您将 index.html 配置为默认根对象，则 https://domain/ 将正确地为 https://domain/index.html 提供服务，但没有子文件夹引用（例如 https://domain/folder/）将起作用。

在将 CF 分发连接到 S3 存储桶时，不使用 Cloudfront 中的下拉菜单也很重要。您需要改用 S3 静态站点的 URL。