How can I clear the cache on a static Cloud Storage website after bucket file changes?

Question

I have a static website that I'm serving through Google Cloud. This is done by storing the static files in a publicly-accessible bucket, and using that bucket as the backend for an HTTPS load balancer. (The CDN option for the load balancer is NOT selected.)

The site loads fine, but my problem is that when I update the bucket contents, those changes take an unpredictable amount of time to reflect in the browser. I am explicitly refreshing, and I am also trying while the Chrome console is open, with "disable cache" selected in the Network tab.

I have ensured that the bucket code is actually updated by navigating to the "object details" page in Cloud Storage for the javascript file in question, and visiting the provided "Link URL". I grep it for my changes and I see them. Then I visit my website, view source, open the linked js file in a new tab, grep for my changes, and do not see them. So they are in the bucket, but being cached somewhere.

I'm not sure if the caching I'm experiencing is happening in the browser or at some layer in Google Cloud. But how can I make it so that when I change the bucket contents, I can see those changes immediately in my browser? How can I ensure the cache, wherever it's happening, clears after each bucket update?

Answer 1

Here an extract of the documentation:

Note also that because objects can be cached at various places on the Internet there is no way to force a cached object to expire globally (unlike the way you can force your browser to refresh its cache). If you want to prevent serving cached versions of publicly readable objects, set "Cache-Control:no-cache, max-age=0" on the object.

So, I recommend you to set the cache max-age to 0 for your file if you don't want to have any latency when you update your bucket. However it's a trade off between low serving latency/low cost (less read in storage, less egress to pay) and low update latency.

All depend of your use case!