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

【问题标题】：CloudFront can't find page of Nuxt.js static site after reloadingCloudFront 重新加载后找不到 Nuxt.js 静态站点的页面
【发布时间】：2020-04-07 04:22:48
【问题描述】：

我是部署静态网站的新手。搜索了大约一段时间的解决方案，根据我遇到的问题，我没有找到任何有用的信息。

目的：我想在 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 完成。

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

【问题讨论】：

您的服务器在线吗？ nuxt generate 将为您生成一个静态文件，但您需要运行 npm start 才能使用您的应用程序。我认为我不太了解您的问题。
@HenriqueVanKlaveren 是的，它肯定在线。当我尝试手动请求任何非根 URL 时，CloudFront 无法在文件夹中查找 index.html 文件。我发现了完全相同的问题（但不是 Nuxt）here。这是我想要克服的。我会尝试上面链接中提出的解决方案，我会尽快回复。

标签： amazon-cloudfront nuxt.js static-site

【解决方案1】：

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

【讨论】：

感谢您发布您的解决方案。我之前只发现了一些奇怪的 lambda@edge hack 并重写了似乎有点过分的 URL