Héberger un site statique dans Azure Blob Storage

Introduction

Après la création d'un site web ou d'une application web se pose la question de l'hébergement. Azure Blob storage est une solution économique et simple à mettre en place vous permettant de stocker tout type de site web statique. Par statique, j'entends toute application qui se compose de fichiers HTML, CSS, JS, images, etc... les applications Angular en font donc partie !

Tout au long de cet article, je pars du principe que vous possédez un abonnement Microsoft Azure, si ce n'est pas le cas, vous pouvez commencer gratuitement en vous rendant à l'adresse : https://azure.microsoft.com/fr-fr/free/

Présentation d'Azure Blob Storage

Azure Blob Storage est la solution proposée par Microsoft dans son offre globale Azure pour stocker des fichiers binaires dans le cloud sous une forme non structurée. Seule une arborescence virtuelle de dossier peut être mise en place pour organiser les fichiers qui y sont stockés. Pour ceux à qui cela parle, il s'agit de l'équivalent d'Amazon S3.

Le blob storage fait partie d'un ensemble de services plus large, regroupés sous l'appellation "Azure Storage Account" dans lequel vous avez accès à Table Storage (un service très simple de base NoSQL, voué à être remplacé par CosmosDB), Azure Files (permettant de faire du partage de fichier type SMB) et Azure Queue Storage (un système de queuing également très simple d'utilisation).

De base, Azure Blob Storage n'est pas prévu pour héberger des sites web mais via une configuration spécifique prévue et supportée par Microsoft que nous allons voir ensemble, il est possible d'activer cette fonctionnalité très simplement et de mapper un domaine personnalisé pour y accéder.

Activation de la distribution de contenu dans Azure Blob Storage

Création du blob storage

Depuis le portail azure (portal.azure.com), vous aurez besoin d'une nouvelle ressource "Storage account" comme expliqué plus haut.

Vous aurez alors à saisir les informations suivantes pour créer le storage account :

• Resource Group : Le groupe de ressource dans lequel stocker le storage account qui va être créé. Pour rappel un resource group permet de rassembler des ressources qui ont le même cycle de vie (création / mise à jour / délétion).
• Storage account name : Le nom de votre storage account. Ne doit contenir que des lettre minuscules ou chiffres et doit être globalement unique dans Azure car un DNS sera créé a partir de ce nom.
• Location: Le lieu de stockage physique de votre Blob. A mettre au plus proche de vos utilisateurs finaux. Nous aborderons la possibilité de mettre à disposition sur du multi-région grâce à un CDN.
• Account kind: Garder bien StorageV2 car c'est elle qui contient la possibilité de passer en "mode" site web.
• Replication: Pour choisir le nombre de replica que vous souhaiter avoir dans le datacenter et / ou dans d'autres datacenter que celui choisi au dessus. Un site web statique n'étant pas assujetti à un fort risque de perte d'information (le code source devrait être hébergé sur un git), vous pouvez prendre l'option la moins chère LRS.
• Access Tier: Le hot est à privilégier pour diminuer le coût d'accès (téléchargement des fichiers statiques chez l'utilisateur) en contre partie d'un Go un peu plus cher. Ce paramètre est modifiable sur chaque conteneur et même sur chaque blob.

Pour le reste des pages de configuration, vous pouvez conserver les paramètres par défaut.

Activation du service d'hébergement web

Dans la page de détail de votre nouveau Storage Account, cherchez dans le menu latéral gauche, l'élément 'Static Website".

Celui-ci vous redirigera sur la page de configuration de l'option vous permettant de définir la page par défaut (généralement index.html) ainsi que la page pour l'erreur 404 NOT FOUND (optionnelle)

Après l'activation de cette option, un nouveau conteneur nommé $web est créé dans le Blob storage et une nouvelle adresse web. Vous pouvez essayer directement cette adresse web (dans mon cas https://absandboxstorage.z6.web.core.windows.net ) et constater que vous obtenez... une erreur 404 ! Je vous assure que c'est bon signe ;)

Dans un même Blob storage, vous pouvez créer un ou plusieurs conteneurs afin d'organiser vos Blobs. Vous pouvez définir la visibilité de vos blobs au niveau du conteneur ou au niveau de chaque blob. Dans le cas du conteneur $web, les blobs qu'il contient n'ont pas besoin d'être mis à un niveau public car ils seront servir à travers l'adresse HTTP spécialement prévue à cet effet.

L'adresse web pointe bien sur notre conteneur $web, mais comme nous n'avons rien mis dedans, nous obtenons cette fameuse 404 NOT FOUND. Pour remplir le conteneur avec votre site statique, vous pouvez utiliser directement le portail Azure ou bien utiliser l'application Desktop "Azure Storage Explorer", que je vous conseille fortement.

Pour aller au plus simple, j'utilise ici le portail Azure, qui intègre de plus en plus de fonctionnalités du Storage Explorer. Cliquez sur l'option "Storage Explorer (Preview)" du menu latéral gauche, vous pourrez d'ici uploader vos fichiers HTML / CSS et JS. J'upload pour ma part le site statique fait avec le pre-render d'Angular, tel que je vous l'ai démontré dans ce blog post.

Une fois l'upload fait, vous pouvez retourner sur le lien web donné par le Storage Account et admirer votre site !

One last thing...

Dernière chose qui sera quasiment indispensable pour la configuration de votre site est la mise en place d'un nom de domaine personnalisé ! Je ne vais pas trop rentrer dans les détails, mais il faut que vous ajoutiez tout d'abord sur votre gestionnaire du DNS pour ajouter un CNAME qui pointe sur l'adresse du site web statique généré par le Blob Storage. Une fois ce CNAME créé, rendez-vous dans le portail Azure, sur le Storage Account et recherchez l'option "Custom Domain". Depuis ici vous pourrez ajouter le nom de domaine de telle façon que le Storage Account autorise les connexions à partir de ce nom de domaine.

Attention, cette configuration reste très basique, vous ne pourrez par exemple pas activer HTTPS directement avec cette méthode, il faudra vous diriger vers la création d'un CDN. De même si vous souhaitez héberger une SPA qui n'a pas été pre-render, la réécriture d'URL n'est pas prise en charge nativement par le Blob Storage, là encore le CDN viendra à la rescousse !

Combien ça va me coûter ?

En terme de tarif, il faut prendre 2 éléments en compte :

• Le coût du stockage brut (plus vous stocker de données, plus vous payez chaque mois).
• Les opérations de lecture sur le blob storage.

Dans le cadre de blobs au niveau "Hot", seule la lecture de la donnée est payante, le transfert de la donnée sortante d'Azure est gratuite.

Pour cette estimation, je suis parti sur un poids global du site de 2Mo réparti en une dizaine de fichiers. Je fais ensuite l'estimation pour 1000 utilisateurs par mois, 50 000 utilisateurs par mois et 1 million d'utilisateurs par mois. Pour réaliser ces calculs je me sers de la calculatrice Azure fournie par Microsoft et de la page de tarification adéquate.

Le coût mensuel du stockage de notre site de 2Mo ne changera pas quelque soit le nombre de visiteur journalier.
Il est égal à 0,002Go  * 0,0166 € par Go par mois, soit 0,0000332 €. Autant dire plus que négligeable.

Passons au coût de lecture de la donnée pour un nombre d'utilisateur mensuel défini (le prix est divisé par 10 000 car il s'agit du prix pour 10 000 opérations d'écriture) :

• 1000 utilisateurs : 1000 utilisateurs * 10 fichiers * 0,0037 € / 10 000 , soit 0,0037 €  par mois. Même pas 1 centime !
• 50 000 utilisateurs : 50 000 * 10 * 0,0037 € / 10 000, soit 0,185 € / mois.
• 1 000 000 utilisateurs : 1 000 000 * 10 * 0,0037 €  / 10 000, soit 3,7 € / mois

Avec ce modèle d'hébergement il vous en coutera donc 3,7€ par mois pour servir 1 000 000 d'utilisateurs, le tout sans configuration et entièrement automatique pour absorber les pics.

Il est conseillé de mettre en place un CDN frontal, dans ce cas il faudra bien sur ajouter le prix du CDN, qui reviendra plus cher que le Blob Storage seul.

Pour aller plus loin

Comme précisé précédemment, le Storage Account en mode site web statique connait certaines limitations nativement :

• Impossible d'activer HTTPS sur un nom de domaine personnalisé.
• Impossible de mettre en place de la réécriture d'URL pour le bon fonctionnement des SPA.
• L'accès à votre site n'est pas globalisé (vous avez choisi une région pour l'hébergement de votre Storage Account), ce qui signifie que les utilisateurs à l'autre bout du monde auront une latence assez conséquente.
• Pas de gestion de cache.

Pour résoudre tous ces éléments avec une seule brique supplémentaire, il faudra vous tourner vers Azure CDN, qui s'intègre parfaitement.

Si le sujet vous intéresse, faites-le moi savoir et j'écrirai également un article pour compléter celui-ci :)

N'hésitez pas à me suivre sur twitter @Chinouchi, pour être tenu au courant de mes prochains articles ou vidéos sur les sujets technologiques.

Annexes

• Documentation Microsoft pour l'hébergement d'un site web statique sur un Azure Storage Account : https://docs.microsoft.com/fr-fr/azure/storage/blobs/storage-blob-static-website
• Le point d'entrée pour Azure CDN : https://azure.microsoft.com/fr-fr/services/cdn/
• La calculatrice Azure : https://azure.microsoft.com/fr-fr/pricing/calculator/