Pour l’une des applications de mon client, nous stockons du contenu statique (comme des icônes et des logos) dans du Azure Blob Storage.

Nous avons également configuré la propriété Cache-Control des éléments du Blob Storage lorsqu’ils sont servis pour réduire la consommation de bande passante.

Aujourd’hui, je voulais vous montrer comment nous avons fait cela.

L’application d’exemple

L’application utilisée pour l’exemple est très simple: il se compose d’un Azure App Service hébergeant une page HTML statique qui affiche une image qui est stockée dans un blob Azure Storage.

Cela ressemble à ceci:

Définir le cache-control manuellement

Pour définir manuellement la propriété Cache-Control pour l’élément blob, tu devras utiliser Azure Storage Explorer (à partir de l’outil autonome ou du portail Azure):

Définis ensuite la valeur de la propriété “CacheControl”:

Automatiser la chose (avec PowerShell)

Si nous avons plusieurs éléments dans notre conteneur d’objets blob, la définition manuelle des propriétés n’est probablement pas une bonne idée.

Heureusement, nous pouvons automatiser cela !

Dans cet exemple, je te montre comment le faire en PowerShell, mais tu peux le faire avec le SDK Azure de ton choix : Azure CLI, .NET, Python, etc. Tu as l’embarras du choix !

# Se connecter à Azure et se positionner sur le bon abonnement
Connect-AzAccount
Get-AzSubscription -SubscriptionName “Microsoft Azure Sponsorship” | Set-AzContext

# Créer un Storage Context
$context = New-AzStorageContext -StorageAccountName “staticwebsitestorage2” -StorageAccountKey “*****”

# Obtenir une référence à l’objet Blob
$blob = Get-AzStorageBlob -Context $context -Container “images” -Blob “lighthouse.jfif”

# Définir la propriété CacheControl pour expirer dans 2 minutes (120 secondes) pour les besoins de la démo
$blob.ICloudBlob.Properties.CacheControl = “max-age=120”

# Mettre à jour les propriétés
$blob.ICloudBlob.SetProperties()

Comment s’assurer que la propriété Cache-control est prise en compte ?

La première fois que nous accédons à la page HTML, nous constatons que l’image a été téléchargée:

Cependant, lorsque nous effectuons un rafraîchissement de la page, nous voyons que l’image a été servie à partir du cache en mémoire:

En revanche, si le cache expire du côté client (dans notre cas, après 2 minutes), nous verrons que l’image sera à nouveau téléchargée depuis le serveur :

Si nous n’avions pas défini la propriété “CacheControl”, nous remarquerions qu’à chaque rafraîchissement de la page, l’image serait de nouveau téléchargée.

En conclusion…

Aujourd’hui, nous avons vu comment configurer le contrôle du cache sur les éléments du Blob Storage à la fois manuellement et automatiquement à l’aide de PowerShell.

Cela contribuera à réduire la latence de ton application ainsi que tes coûts de bande passante sortante d’Azure.

J’espère que cela te sera utile.

Continuons la discussion

N’oublie pas que tu peux me joindre sur Twitter ou LinkedIn.

À la prochaine !