DEV Community

loading...
Cover image for Set cache-control to Azure blob storage items

Set cache-control to Azure blob storage items

Tidjani Belmansour, Ph.D.
Hi, my name is Tidjani Belmansour. I'm a Microsoft Azure MVP, a Cloud Solutions Architect and a coffee addict. I've been in love with computers since 1988.
・2 min read

In one of my customer's application, we are storing static content (such as icons, and logos) in an Azure Storage Account blob container.
We've also configured the Cache-Control property of the blob items when served up to reduce bandwidth consumption.
Today, I wanted to show you how we did that.

the sample application

The sample application is very simple: it consists of an Azure App Service hosting a static HTML page that displays an image that is stored in an Azure Storage blob.

This looks like this:
intial HTML page

Setting the cache-control manually

In order to set the cache-control for the blob item manually through, you'll need to use Azure Storage Explorer (either from the standalone tool or from the Azure Portal):
![set blob properties 1]((https://dev-to-uploads.s3.amazonaws.com/i/an4yztmwod5m80oa2ylm.png)

Then set the value of the "CacheControl" property:
set blob properties 2

Automating the thing (with PowerShell)

If we have multiple items in our blob container, setting properties manually is probably not the best idea.

Luckily, we can automate this thing!

In this example, I show you how to do it in PowerShell but you can do it with whatever Azure SDK you prefer: Azure CLI, .NET, Python and so on. It's your call!

How to make sure that the Cache-control property is used?

The first time we access the HTML page, we see that the image has been downloaded:

first page invocation

However, when we do a refresh, we see that the image has been served from the memory cache:
page refresh

Now, if the cache expires on the client-side (in our case, after 2 minutes), we'll see that the image will again be served from the server (i.e. downloaded again):
after the cache expires

Without setting the "CacheControl" property, we would notice that, on every page refresh, the image is being downloaded again.

As a conclusion...

Today, we've seen how we can set up cache-control on blob storage items, both manually and automatically using PowerShell.
This will help lower your application's latency as well as your Azure Bandwith costs.

I hope that you found it valuable.

Keep the discussion

You can reach me on Twitter or LinkedIn.

See you soon!

Discussion (0)