如何让Amazon S3存储桶内多个文件夹共用同一个index.html文件

完全可以实现，无需在每个多语言子文件夹下存放重复的index.html文件，同时用户访问的原有URL路径不会发生变化，以下是两种适配不同场景的实现方案：

方案1：仅使用S3原生静态网站托管（未接入CDN） #

核心逻辑是通过S3自带的重定向规则匹配多语言路径，将请求统一指向公共的index.html：

• 首先将统一的index.html上传到固定路径，比如terms-of-use/index.html，删除en/、es/等子文件夹下的重复index.html文件
• 进入S3存储桶的「属性」-「静态网站托管」配置页，在「重定向规则」中添加如下规则：

[
    {
        "Condition": {
            "KeyPrefixEquals": "terms-of-use/"
        },
        "Redirect": {
            "ReplaceKeyWith": "terms-of-use/index.html",
            "HttpRedirectCode": "302"
        }
    }
]

• 注意使用302临时重定向，避免浏览器永久缓存跳转规则，用户的地址栏会保留原始访问路径。

方案2：搭配CloudFront CDN使用（更推荐） #

如果你的S3静态站已经接入CloudFront CDN，用CloudFront Functions做路径改写是更优方案，全程无跳转性能更好：

• 同样先将公共index.html上传到terms-of-use/index.html，清理子文件夹下的重复文件
• 在CloudFront控制台创建新的Viewer Request阶段函数，参考代码如下：

function handler(event) {
    const request = event.request;
    // 匹配所有terms-of-use下两位语言代码子目录的请求
    if (/^\/terms-of-use\/[a-z]{2}(\/|\/index.html)?$/.test(request.uri)) {
        request.uri = '/terms-of-use/index.html';
    }
    return request;
}

• 将函数关联到对应的CloudFront分发即可生效，用户访问/terms-of-use/fr/这类路径时，地址栏不会发生任何变化，CDN会直接返回公共index.html的内容。

补充说明 #

• 如果你的单页index.html需要根据语言做动态渲染，可以直接在前端通过window.location.pathname提取路径中的语言标识，无需服务端额外处理。
• 两种方案均不会改动原有URL结构，已有的外链、用户收藏的地址都可以正常访问。

内容的提问来源于stack exchange，提问作者Tcmxc