CloudFront 重新加载后找不到 Nuxt.js 静态站点的页面

Question

我是部署静态站点的新手。搜索了大概一会，根据我遇到的问题，没有找到有用的信息。

目的：我想在 CloudFront 上运行我生成的 Nuxt.js 静态站点。

问题：
Ran 命令获取nuxt generate

站点的静态文件，例如：

-| dist/
----| about/
------| index.html
----| index.html

我使用所有必要的选项正确配置了 CloudFront，将站点加载到 S3 并将其与 CloudFront 连接。如果我导航应用程序而无需重新加载页面并通过浏览器工具返回上一页，它就可以正常工作。当我尝试请求任何路径时出现问题（除了 root '/'，因为 CloudFront 正确处理它 - image）。例如，每当我尝试请求路径时http://domainname.com/about/（末尾是否带有“/”），我都会收到 XML 错误代码，这意味着未找到该站点页面。

<Error>
   <Code>NoSuchKey</Code>
   <Message>The specified key does not exist.</Message>
   <Key>about</Key>
   <RequestId>request-id-hash</RequestId>
   <HostId>
       host-id-hash
   </HostId>
</Error>

这是因为 CloudFront 等待客户端请求文件的完整路径。

例如：http://domainname.com/about/index.html将按预期返回页面。

另外，我尝试生成带有subFolders: false选项的文件以实现此目的：

-| dist/
----| about.html
----| index.html

但还是遇到了同样的问题：CloudFront 想要请求文件的完整路径，所以http://domainname.com/about不会返回网页。它将像以前一样发送错误代码。

当我请求存储它的文件夹的路径时，如何让 CloudFront 理解我想要获取 index.html 文件？请不要建议使用 Amazon Lambda 或任何其他附加服务来使其成为可能。它必须仅使用 CloudFront 来完成。

有人可以帮我吗？我究竟做错了什么？我很乐意提供任何提示和建议！

Answer 1

正如我所料，该问题与 CloudFront 配置有关。我将 CloudFront 绑定到 S3 存储桶 URL 而不是 S3 网站 URL。问题根本不明显！当您选择 URL（告诉 CloudFront 从何处获取数据）时，Amazon 仅建议您在下拉输入中使用 S3 Bucket URL。所以我不得不手动写下我的 S3 网站的 URL，一切都开始像发条一样工作！