重新加载后 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 将按预期 return 页面。

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

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

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

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

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

Answer 1

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

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

CloudFront can't find page of Nuxt.js static site after reloading

amazon-cloudfront

nuxt.js

static-site