使用 AWS S3 上托管的 NextJS 静态网站省略 url 路径中的 .html 扩展名

Question

我通过将next export静态包导出 () 到 S3 来托管 NextJS 应用程序。我可以从 S3 存储桶端点访问该页面。例如，https://my-website.s3.ap-southeast-1.amazonaws.com/user/v1/login.html。

但是，我在尝试通过从 URL 路径中省略 .html 扩展名来访问该页面时遇到问题。例如，https://my-website.s3.ap-southeast-1.amazonaws.com/user/v1/login应该产生与/user/v1/login.html.

S3 返回403 Access Denied错误而不是返回 html 页面。我尝试了多种方法，例如配置trailingSlash: true以及配置rewrite()innext.config.js但我仍然无法实现预期的行为。

我还阅读了从 html 文件中删除 .html 的解决方案，但我正在使用 CodeBuild 构建网站，并且该解决方案的扩展性并不好，因为我必须手动重命名从 .html 生成的文件next export。

我是否有其他方法可以在 NextJS 或 S3 中进行配置，以便可以省略 URL 路径中的 .html 扩展名？

更新：

我能够使用 CloudFront 和 S3 网站端点作为自定义源来实现上述预期行为。

但是，我面临另一个问题，即当存在查询字符串参数时，路径会在路径 uri 后附加一个尾部斜杠。

例如，浏览器 url 中的https://abcdefgh.cloudfront.net/dev/v1/login?foo=bar将更改为https://abcdefgh.cloudfront.net/dev/v1/login/?foo=bar小路。如何阻止 CloudFront 在 url 路径末尾添加斜杠？

Answer 1

为了得到所有的

• http://foo/酒吧
• http://foo/bar/index.html
• http://foo/bar.html
• http://foo/bar/

假设下一个导出的文件为：

bar/index.html

你需要aws cp使用

• 将所有内容复制到一个 glob 中，这将按原样更新所有 css/img/js 和 html 并为您提供http://foo/bar/index.html
• 逐步执行所有“index.html”（使用find . -name "index.html"), aws cp it up withs//index.html// . this gives you http://foo/bar`
• 逐步执行所有“index.html”（使用find . -name "index.html"), aws cp it up withs//index.html/.html/ . this gives you http://foo/bar.html`

只有满足以下任一条件，您才会获得http://foo/bar/：

• 编写一个cloudfront函数来拦截和加载，bar/index.html无论请求中是否有尾部斜杠。
• 通过 s3 网站 URL（而不是 s3 Rest 端点）将您的 Cloudfront 加入到您的 s3 存储桶。

这两种选择都会产生额外费用。