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

Question

我对部署静态站点是陌生的。搜索解决方案已有一段时间了，根据遇到的问题，我没有找到任何有用的信息。

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

问题：跑命令nuxt generate得到了网站的静态文件，例如：

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

我使用所有必要的选项正确配置了CloudFront，将站点加载到S3并将其与CloudFront连接。万一我浏览应用程序时无需重新加载页面并通过浏览器功能返回到上一页，该方法就很好用。当我尝试请求任何路径时，事情出了问题（除了根目录“ /”，因为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存储桶URL。因此，我不得不手动写下S3网站的URL，一切开始像发条一样工作！