0

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

RRM1000
  • 347
  • 3
  • 13

2 Answers2

2

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)
tsteve
  • 549
  • 1
  • 7
  • 16
  • Many thanks for the options! I'll remove the cache-control for now and probably think about SSR at some point in the future. Do you think any other Hosting services (other than AWS) may work differently (as I could change to another if needed)? – RRM1000 Jan 21 '19 at 08:17
  • @RRM1000 the fundamental issue here is *browser* behavior, not service provider. – Michael - sqlbot Jan 21 '19 at 19:19
  • 1
    @tsteve note also that one supported configuration is `Cache-Control: max-age=x, s-maxage=y`, CloudFront will cache objects for (longer) y while the browser will cache objects for (shorter) x. – Michael - sqlbot Jan 21 '19 at 19:23
  • No problem! I'm not sure about other services, but invalidating a server cache and invalidating browser cache are separate things (see @Michael - sqlbot's answer). Feel free to mark the answer as correct! – tsteve Jan 21 '19 at 21:20
  • Thanks, I will mark the answer! I drive much of my content through json files held on the server, so I could either split these out of deploy (so they aren't combined with js) and then not cache these, or preferably host these externally (via SQL) and make API calls, which is what I was going to do eventually anyway, but I guess I'll have to do sooner. – RRM1000 Jan 22 '19 at 02:37
1

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

AishuSuhan P
  • 123
  • 5
  • Thank you! This worked for me. I was able to CURL from CMD on windows just fine, but my browser and postman were showing old versions of index.html for SPA. As soon as I followed this step I was getting the latest version. – dataviews Jan 12 '21 at 19:13