J’ai eu dernièrement une réunion avec un client durant laquelle ce dernier manifestait le désir d’héberger une application web Angular dans une web app sur Azure App Service. Je lui ai alors expliqué qu’il économiserait pas mal d’argent en l’hébergeant dans un Azure Storage Static website.

Il ne connaissait pas cette fonctionnalité alors je la lui ai expliquée et je me suis dit que ça pourrait t’intéresser aussi. C’est pourquoi je publie ce post aujourd’hui 😊

Qu’est-ce qu’Azure Storage Static website ?

C’est une (nouvelle) fonctionnalité d’Azure Storage qui permet d’héberger une application web statique.

Qu’est-ce qu’une application web statique ?

C’est une application web qui n’a pas besoin d’interactions avec le serveur pour le rendu de ses pages. On parle alors d’application web côté client. Des exemples seraient des applications Angular ou Blazor.

Pourquoi Azure Storage Static website ?

La principale raison (la seule que je vois en fait) est que ça fait baisser les coûts d’hébergement de ton application web de façon drastique !

Comment utiliser cette fonctionnalité ?

Il faut commencer par créer un compte de stockage de type « General Purpose V2 ». Il est possible de le faire via le portail, mais nous allons le faire via Cloud Shell avec Azure CLI :

az storage account create --name staticwebsitestorage2 --resource-group staticwebsite_RG  \
--location canadacentral --kind StorageV2

Si tu as déjà un compte de stockage existant que tu veux utiliser et que ce dernier n’est pas du type « General Purpose V2 », tu peux l’upgrader via cette commande :

az storage account update --resource-group myRG --name myStorageAccount --set kind=StorageV2

Il faut ensuite activer la fonctionnalité « Static website ». Encore une fois, ça peut être fait via le portail ou via ligne de commande. C’est cette deuxième option que nous allons utiliser :

az storage blob service-properties update --account-name staticwebsitestorage2 --static-website \
--404-document notfound.html --index-document index.html

Il y a deux fichiers HTML dont il faut spécifier l’emplacement :

• « –404-document » : indique l’emplacement de la page à afficher si la requête retourne une erreur http 404;
• « –index-document » : indique l’emplacement de la page à afficher en réponse à une requête à la racine du site statique.

Les points de terminaisons (i.e. l’URL du site statique) et un répertoire « $web » (où l’on fera l’upload du contenu de notre site) seront créés.

Pour obtenir l’URL du site statique, on tape la commande suivante :

az storage account show --name staticwebsitestorage2 --resource-group staticwebsite_RG --query "primaryEndpoints.web" \
 --output tsv

On crée à présent une application Angular via la commande suivante dans un terminal de Visual Studio Code :

ng new angularstatic

Et on la compile via la commande :

ng build --prod

On peut uploader notre site statique via le portail d’Azure ou via la ligne de commandes. Encore une fois, nous allons privilégier la ligne de commandes.

Afin d’uploader le contenu, nous avons besoin de la clé du compte de stockage. Nous pouvons l’obtenir via la commande suivante :

az storage account show-connection-string --name staticwebsitestorage2 --resource-group staticwebsite_RG

Depuis le terminal de VS Code, on se positionne sur le répertoire contenant la version compilée comme ceci :

cd .\dist\angularstatic

Ensuite, on s’authentifie dans Azure via la commande :

az login

Et enfin, on upload le contenu via la commande suivante :

az storage blob upload-batch -s "." -d $"web" --account-key <ACCOUNT_KEY> --account-name staticwebsitestorage2

Et voilà ! L’application Angular est maintenant déployée sur Azure Storage Static website.

Si on navigue à l’URL du site (que nous avons retrouvé via une commande plus haut dans le texte), on verra ceci :

En conclusion…

Azure est comme un énorme coffre à outils qui contient différents outils pour répondre au bon besoin. Certains de ces outils donnent l’impression d’être similaires mais ils ont chacun leur particularité afin de répondre adéquatement à ton besoin.

Une grosse partie de la job d’Architecte Azure est de définir le(s) bon(s) outil(s) à utiliser afin de répondre adéquatement au besoin du client, notamment en termes de coût, d’agilité, de disponibilité, de performance, d’évolutivité, etc.

À la prochaine !