CODEWITHSUNDEEP
angularamazon-web-servicesamazon-ec2amazon-cloudfront
byteC0de
byteC0de

Reputation: 5273

Avoid Cloudfront caching my angular app assets

I have setup CloudFront for my web app with SSL Termination. Subsequent deployments not immediately updates the production and it takes long time to propagate the change. How to reduce the time gap?

Upvotes: 1

Views: 2290

Answers (2)

Ashan
Ashan

Reputation: 19748

There are several options available in CloudFront as well as outside you can do to reduce caching time

  • Run an invalidation after each deployment (This takes around 15 mins but it makes sure the cache is cleaned after each deployment and also can be automated using the CloudFront CLI)
  • Reducing the Cache TTL value (Not recommended since, it will also reduces the caching time, reducing the performance)
  • For each deployment, change the filenames by appending a random value and also referring the new value from the app. e.g /js/test_23434.js (You can automate this with Gulp or any automated script)
  • For each deployment, include a query parameter in the file path url e.g /js/test.js?v=23434 and also enable forwarding query parameters in CloudFront behavior configuration

Upvotes: 2

Deepak Singhal
Deepak Singhal

Reputation: 10876

Few options:

  1. You can set lower TTL ( in cloudfront settings ) on your assets.
  2. If you want to cache your objects for longer duration; and your assets (html/css/js) don't change frequently then you might want to purge those assets manually using CloudFront console. You can do this manually using AWS console also via AWS CLI.
  3. Cleanest design is that put a version number with each assets like js/css file.. Use tool like BURP while building ur angular app.. something app.1235.js.. Whenever your asset changes ; the version changes and automatically it will be loaded fresh.

Upvotes: 4

Related Questions