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

Question

我在 S3 + 云端部署了一个生产 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. 创建条目/*

Deployment script

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