Update Angular app on AWS S3 + Cloudfront

Question

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/driven-by-code/on-the-importance-of-correct-headers-and-metadata-in-s3-origins-for-aws-cloudfront-50da2f9370ae

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:

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).

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.

Answer 1

You can do following :

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 /*

Deployment script

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