如何设置 Cloudfront & S3 以指向每条路由的 index.html?

IT技术 reactjs amazon-web-services next.js
2021-05-10 09:00:13

我有一个托管在 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 但它看起来只为根/域设置它,而不是子文件夹。

谢谢。

3个回答

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

在此处输入图片说明

您可能需要一个Cloud Function这里的基本示例开始,将 index.html 附加到 URI 并根据您的需要修改它。

使用 cloudfront 功能,即:

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