NoSuchKey 访问 S3 中存储的 PWA 的 Angular 路由时出错

Question

我正在使用 Angular 7 和 Ionic 4 开发 PWA，并将其存储在 Amazon S3 中的存储桶中。

当然我的应用程序有路线。例如：

myapp.com
myapp.com/items
myapp.com/items/1

App第一次访问，或者更新时，需要通过root url（myapp.com）访问，否则会出现NoSuchKey错误。当第一次访问应用程序时访问 myapp.com/items 时，会发生此错误。

原因很明显。 Angular 负责处理路线。当通过 root url 访问 PWA 时，它首先将 PWA 下载到浏览器的缓存中。之后，PWA 处理路由。

但是，当首次通过路由（例如 myapp.com/items）访问应用程序时，由于浏览器中没有存储 PWA，请求将由 S3 处理，该 S3 会尝试访问名为 items 的对象存放在桶中。这个物体显然不存在。所以我收到了 NoSuchKey 错误。

使用 Angular 路由和 S3 时如何处理 NoSuchKey 错误？

Answer 1

此问题的解决方法是将找不到页面错误重定向到 PWA 索引页面。在 AWS CloudFront 中，转到错误页面并单击创建自定义错误响应。然后填写：

它对我有用:)

Answer 2

您的 S3 存储桶可能配置为加载默认页面

index.html

（检查 S3 存储桶上的静态网站托管设置）。

然后检查您上传到S3存储桶中的文件。该

index.html

应该上传到 S3 存储桶的根级别，而不是像

website/browser/index.html

这样的子文件夹中。

如果您确实有这样的子文件夹结构，请将其删除，并仅上传 Angular 在

website/browser

中创建的文件。

*NoSuchKey* 访问 S3 中存储的 PWA 的 Angular 路由时出错