-1

I've looked through just about every related question on here that I can find and none of the suggested solutions seem to resolve my problem. I'm currently hosting a website on Amazon AWS using strictly the S3 and Route 53 tools to host a static website and re-route from a couple of different URL queries to our site. This morning I attempted to update the CSS files being used to style the webpage, as well as a bunch of new image files and some minor updates to the HTML pages, and noticed that all of my changes showed up immediately on the webpage except the changes I had made to my CSS file. I've checked, and the version of the file on the S3 is the correct/updated version, but when I attempt to use the Developer Tools in my web browser to inspect the webpage displayed, it's still showing an older version of the css file. This doesn't make any sense to me, as all of the other changes show up immediately except for this particular file. Does anyone have any thoughts on how to fix this/what could be going wrong?

NOTE: I'm not using AWS CloudFront on this webpage at all so I don't believe that any of the "invalidation" suggested elsewhere will help me. In the past, I've updated the files and seen immediate changes when loading my webpage.

Sean Bills
  • 19
  • 2
  • May be browser cache? Did you try clearing the browser cache? – INVOKE Cloud May 09 '18 at 17:24
  • Wow. I knew it had to be something incredibly stupid. Thanks a lot for pointing that one out. Is there a way that I can essentially force other user's browsers to update their caches for my site or do I have to wait for AWS to update its own caching of my website (which I know typically takes about 24 hours)? – Sean Bills May 09 '18 at 17:31
  • You can use S3 Object --> Meta Data --> tags to specify cache invalidation age. something like specified here https://stackoverflow.com/questions/33880838/how-to-set-cache-control-header-on-aws-s3-management-console . For existing clients, either they need to clear the cache (or) wait until it expires. – INVOKE Cloud May 09 '18 at 17:36
  • If you aren't using CloudFront then AWS isn't caching the file at all, and you should only be dealing with browser cache issues here. Your statement about AWS typically caching for 24 hours is incorrect if you are not using CloudFront. – Mark B May 09 '18 at 17:43
  • Thank you for all of the help – Sean Bills May 09 '18 at 17:46
  • @MarkB so is there a way to force users to clear their cached versions of files from my webpage? – Sean Bills May 09 '18 at 17:47

1 Answers1

3

You already know this is a browser cache issue - which you can clear the cache, but if you want to force everyone to automatically get the new CSS, what I usually do is add a query parameter to the file include, i.e. instead of 

<link href="~/css/plugins/thickbox/thickbox.css" rel="stylesheet" />

do this:

<link href="~/css/plugins/thickbox/thickbox.css?v=1001" rel="stylesheet" />

and you can up the 1001 each time you push out an update - the browser will automatically grab the new file.

Google 'cache-busting' for other options.

E.J. Brennan
  • 45,870
  • 7
  • 88
  • 116