AWS CloudFront Caching Issue

Question

I'm using AWS CloudFront linked to an S3 bucket to host a static (React) website. Everything seems to work ok except when I upload altered files to the bucket. I know that by design CloudFront will cache files, and you have to invalidate changed files for CloudFront to pick up new changes asap. However, whenever I browse to the website (on different devices), I will get older versions of the files still. Sometimes, I will see the latest versions of the webpage but then later when I browse to the same page, it gets an old version (even after clearing the cache or browsing in Incognito)?! Very strange.

I have some questions regarding my set up:

• I am linking from CloudFront to S3 using the S3 endpoint hostname, not just selecting the bucket from the list, as I found that AWS misinterpretted my website as a REST service (it was expecting XML), and I found an article on SO stating that I need to link the full name . Is it ok to do this, and could it be causing the weird caching issue?
• I am invalidating files using /*. I'm unable to confirm if this is working, as CloudFront will not go into detail about which files have been invalidated. Will /* invalidate all subfolders within the bucket, or just files in the root?
• Does adding a cache-control value on all files affect the invalidation?
• Would logging from CloudFront help me identify the strange issues I'm seeing?

Would appreciate some feedback on this as I'm new to AWS and there's so many configurable elements it does seem daunting at times!

Thanks

Answer 1

Does adding a cache-control value on all files affect the invalidation?

Yes, that's your issue.

If you're adding cache-control on files, they are being cached on the client (browser), and an invalidation in Cloudfront will not remove those files from a client's cache.

You have several options:

• Don't add cache-control for files (BAD -- slows down page load times)
• Set cache-control for files to shorter timespan (LESS BAD -- slows down page load times after cache expires)
• Clear browser cache for your website (NOT GREAT -- your users may still see old content)
• Disable cache for your browser entirely (NOT SO GOOD -- slows down just about every website)
• Drop single page React and move to a Server-Side Rendered (SSR) React app (BEST BET, but a lot of work. Totally worth it, though)

Answer 2

Yeah really Caching kills but in AWS you have a solution for that....

1. AWS Cloud front
2. In that Click the ID you want
3. You can able to see the Invalidations tab, click that
4. Then Create Invalidation
5. Enter -> /*   and click Invalidate 

After Invalidation done, You can able to see your latest changes