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，一切开始像发条一样工作！

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

1 个答案: