Let us help you in your digital transformation process. With thorough and clear understanding of modern technologies, we help companies across the globe achieve their technology goals thereby enabling them to excel in their businesses.

Gallery

Contacts

India

Office No. 509, 165 Fortune Business Center, RNT Marg, Indore, (M.P) India 452001

Canada

Office Address: 609 Williams street, London , Ontario N6V3G1

Office Address: 265- 7025 Tomken Road, Mississauga L5S1R7 Ontario, Canada

info@techfrolic.com

+1-9059560903
+1-6479922645

Development

Updating Angular 8 code in S3 while using CloudFront for distribution.

Problem Statement

Whenever we deploy updated Angular 8 code in S3, it does not get reflected in CloudFront, it still points to old code (caching feature). But after few hours it starts behaving fine and distributes new files, of course that is something not acceptable to any organization and we always wonder on why CloudFront takes so much time to refresh S3 files is that the default behavior or we are missing something during deployment.
After some sort of Googling ( ( default way to solve the problem)I found the root cause and resolution which fortunately worked for me. I would like to share my experience with you here. Let’s have a look.

Root Cause

CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer speeds, this speed it gets by caching at edge location, so it does not contact to S3 (origin) all the time whenever there is request for the same resource, and that is the reason when you deploy the updated code to S3 you would still see the same response on Browser. By default, CloudFront caches files in edge locations for 24 hours

Resolution

There are few ways to tackle this and all are good but this depends on your choice & use case

Create new folders with version number and point Cloud Front to that folder.

This is the mostly used and popular way, since it allows you to have old as well as new code available and any time you can roll back to old code in case that is required. But this would add a new step in deployment process to change in CloudFront distribution list everytime you do the deployment.

Invalidate Angular build files from edge caches so that after deployment CloudFront returns to the origin to fetch the latest code. I found this better as once admin & team will decide and configure list of files those need to be taken latest, CloudFront would take care of this.

Invalidation steps:
  • Determining Which Files to Invalidate : you can invalidate all the files in bucket, all the files in any given folder of the bucket or you can also provide type of files which you want to invalidate say JPEG files, TS files etc.
  • To invalidate the default root object (file), specify the path the same way that you specify the path for any other file
  • You can invalidate only files that are associated with a web distribution
  • Case sensitive : index.jpg is different from Index.jpg
  • Select the distribution for which you want to invalidate files.
  • Choose Distribution Settings.
  • Choose the Invalidations tab.
  • Choose Create Invalidation.
  • For the files that you want to invalidate, enter one invalidation path per line
  • Note: Invalidation is not for free.

Author

wptechfrolic