如何将 Cloudfront 和 S3 设置为指向每条路由的 index.html？答案

【问题标题】：How to setup Cloudfront & S3 to point to index.html for every route?如何将 Cloudfront 和 S3 设置为指向每条路由的 index.html？
【发布时间】：2021-10-30 05:22:37
【问题描述】：

我有一个托管在 AWS 上的 NextJS 应用程序。我的文件夹结构是这样的：

- index.html

- /articles
-- index.html

-- /article1
---- /index.html

-- /article2
---- /index.html
.
.
.

如何设置路由到 /articles 指向 /articles/index.html，/article1 指向 /article1/index.html 等等。我的应用程序中的每个文件夹都有一个对应的 /index.html。我在 S3 上托管了我的一方，并且正在使用 cloudfront。我已经尝试将默认根对象设置为 /index.html，但看起来它只为根/域设置它，而不是子文件夹。

谢谢。

【问题讨论】：

标签： reactjs amazon-web-services next.js

【解决方案1】：

您不需要 Cloudfront 功能。以下 S3 设置将 index.html 设置为所有文件夹的默认值，而不仅仅是根目录。

【讨论】：

所以我这样做了。如果我使用 S3 原始 URL 浏览我的网站，它会起作用。但是，如果我使用我的域名（映射到云端），那么只要我不刷新页面，它就可以工作。如果我刷新页面，我会收到 S3 存储桶的访问被拒绝消息。但是，当我在使用 S3 原始 URL 时刷新页面时，我没有遇到同样的问题。知道有什么问题吗？我一直在寻找，我发现了为云端添加 403 和 400 页面的建议，但这会使用户在刷新时返回主页。
只有所有路由都发生在客户端的 SPA 才需要 400 或 403 个页面。对于带有文件夹的真实网站，它是不相关的。它对您不起作用的原因可能是因为您尝试使用 S3 存储桶的 REST 端点而不是网站端点。在这里阅读更多：aws.amazon.com/premiumsupport/knowledge-center/…
这救了我。我不是故意使用 S3 的 REST 端点。我刚刚从 CF 来源的下拉列表中选择。但是，文档中最重要的信息是“不要从下拉列表中选择存储桶。下拉列表仅包含此配置中未使用的 S3 存储桶 REST API 端点。”我这样做了，它解决了这个问题。非常感谢。我已经为此苦苦思考了 3 周了。

【解决方案2】：

您可能需要Cloud Function。从将 index.html 附加到 URI 的基本示例 here 开始，并根据需要对其进行修改。

【讨论】：

【解决方案3】：

使用云端函数，即：

function handler(event) {
    var request = event.request;
    var uri = request.uri;
    
    if (uri !== '' && uri !== '/' && uri.indexOf('.') === -1) {
        request.uri = uri + '.html';
    }
    return request;
}

【讨论】：