在 AWS S3 + Cloudfront 上更新 Angular 应用程序

Question

我在 S3 + cloudfront 上部署了一个生产 Angular 9 应用程序。它运行良好，但每次我发布应用程序的新更新时都会遇到一些问题。我读了很多文章：

• https://medium.com/@sumn2u/react-progressive-web-app-s3-and-cloudfront-6c890fa873fb
• https://medium.com/driven-by-code/on-the-importance-of-correct-headers-and-metadata-in-s3-origins-for-aws-cloudfront-50da2f9370ae

我为 index.html 和 ngsw-worker.js 设置了正确的缓存，因此它们不会从 cloudFront 缓存。每个 Angular 部署都保存在 S3 上一个带有内部版本号的新文件夹中，如下所示：

执行此操作后，我更改 CloudFront 的目录名称以指向新位置。不幸的是，这会给使用该应用程序以前版本的客户带来一些问题。事实上，如果服务工作者在用户加载应用程序时没有得到更新，如果用户加载了之前没有缓存的应用程序的某些部分，我会收到一个错误加载块（因为它在 S3 上不再存在） ）。

所以我想知道在 AWS S3 + CloudFront 上持续部署 Angular 应用程序的最佳方法是什么。我应该将所有文件加载到同一个文件夹中吗？是不是效率太低了（很快我就会有数千个文件）？任何提示都非常感谢。

Answer 1

您可以执行以下操作：

1. 直接将构建文件夹部署到 S3 存储桶。
2. 不需要缓存index.html文件
3. 每当您部署或上传构建到 S3 时，请执行以下步骤
4. 转到云前线
5. 使对象失效
6. 创建条目 /*

部署脚本

对于持续部署，您可以使用boto3aws编写脚本，以便在成功上传文件夹后自动使缓存无效。