在AWS S3 + Cloudfront上更新Angular应用 [英] Update Angular app on AWS S3 + Cloudfront

问题描述

我在S3 + cloudfront上部署了生产Angular 9应用程序.它工作得很好，但是每次我发布该应用程序的新更新时，我都会遇到一些问题. 我读了很多文章:

I deployed a production Angular 9 application on S3 + cloudfront. It works very well but I've some problems every time I release a new update of the application. I read many articles:

• https://medium.com/@ sumn2u/react-progressive-web-app-s3-and-cloudfront-6c890fa873fb

• 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上带有内部版本号的新文件夹中，如下所示:

I set right caching for index.html and ngsw-worker.js so they are not cached from cloudFront. Every Angular deploy is saved on S3 on a new folder with the build number, like this:

执行此操作后，我更改CloudFront的目录名称以指向新位置.不幸的是，这样做会给使用该应用程序早期版本的客户带来一些问题. 实际上，如果服务工作者在用户加载应用程序时未获得更新，如果用户加载了之前未缓存的应用程序的某些部分，则加载块时会出错(因为它在S3上不再存在) ).

After I do this, I change the directory name of CloudFront in order to point to the new location. Unfortunately, doind this create several problems to customers that have previous version of the application. In fact if the service worker didn't get the update when the user load the application, if the user load some part of the application that were not cached before, I get a error loading chunk (because it doens't exist anymore on S3).

因此，我想知道在AWS S3 + CloudFront上连续部署Angular应用程序的最佳方法是什么.我应该将所有文件加载到同一文件夹中吗? 是不是效率太低(很快我将拥有成千上万个文件)?任何提示都非常感谢.

So I'm wondering what's the best way to continuosly deploy an Angular application on AWS S3 + CloudFront. Am I supposed to load all files inside the same folder? Isn't it too inefficient (very soon I'll have thousands of files)? Any hint is really appreciated.

推荐答案

您可以执行以下操作:

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

1. Directly deploy build folder to S3 bucket.
2. Not required to cached index.html file
3. Whenever you deployed or upload build to S3,do the following step
4. Go to cloudfront
5. Do invalidation of objects
6. Create entry /*

部署脚本

对于连续部署，您可以使用ac的boto3编写脚本，以在文件夹成功上传后自动使缓存无效.

For continuous deployment you can write script using boto3 of aws for automatically invalidate cached once folder uploaded successfully.

这篇关于在AWS S3 + Cloudfront上更新Angular应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！