Déployer un site statique

Un dossier dist rempli de fichiers, et aucune machine à provisionner. Un Storage Account sert un site statique tout seul, en HTTPS, sans rien à administrer.

Ce scénario est le bon si

La question	La réponse qui vous met ici
Que servez-vous ?	Des fichiers déjà produits : HTML, CSS, JavaScript, images. Le build d’un projet React, Vue, Angular, Astro, ou du HTML écrit à la main.
Y a-t-il du code exécuté côté serveur ?	Non. Aucun rendu serveur, aucune route d’API, aucune tâche de fond.
Vous faut-il votre propre nom de domaine ?	Non. L’URL fournie par Azure suffit.
Une base de données ?	Non, ou alors elle vit ailleurs et le site l’appelle en HTTPS.

Une seule réponse qui bascule, et vous êtes dans l’autre scénario : déployer une application et sa base.

Prérequis

Un Resource Group créé avec ses tags et un lab déclaré. Sinon : créer mon lab Azure. Le Storage Account se crée dans ce Resource Group.

Le nom d’un Storage Account est unique dans tout Azure, pas seulement chez nous. De 3 à 24 caractères, minuscules et chiffres uniquement, sans tiret ni point. Prenez stlab suivi de votre trigramme et de l’usage.

Le déploiement

Portail Azure

1. Dans le Portail Azure, créez une ressource Storage account dans votre Resource Group et dans la région du lab. Gardez Performance : Standard et choisissez Redundancy : LRS, la réplication la moins chère et la seule qui se justifie pour un lab.

2. Renseignez les tags avant de valider : owner, projectName et creationDate, sans lesquels la création est refusée, puis expirationDate, qui ne bloque pas mais est audité.

3. Ouvrez Data management puis Static website, et passez le réglage sur Enabled.

4. Renseignez Index document name avec index.html. Pour Error document path, mettez 404.html si votre site a une vraie page d’erreur, ou index.html s’il s’agit d’une application à page unique dont le routage se fait côté navigateur. Enregistrez.

5. Azure affiche le Primary endpoint et crée un conteneur $web. Copiez cette URL, c’est l’adresse de votre site. Ne la devinez pas, elle contient un identifiant de région.

6. Ouvrez le conteneur $web et envoyez le contenu de votre dossier de build en conservant l’arborescence. index.html doit être à la racine du conteneur, pas dans un sous-dossier.

7. Ouvrez le Primary endpoint dans un navigateur. Votre site est en ligne.

Azure CLI

Après az login, en remplaçant les quatre valeurs de la première ligne par les vôtres.

RG="rg-qro"
ACCOUNT="stlabqrodemo01"     # 3 à 24 caractères, minuscules et chiffres, unique dans Azure
REGION="switzerlandnorth"
BUILD="./dist"               # le dossier produit par votre build

# Create the storage account
az storage account create \
  --name "$ACCOUNT" \
  --resource-group "$RG" \
  --location "$REGION" \
  --sku Standard_LRS \
  --kind StorageV2 \
  --tags owner=qro projectName=demo-front creationDate=21.08.2026 expirationDate=21.11.2026

# Udpate storage account to host website
az storage blob service-properties update \
  --account-name "$ACCOUNT" \
  --static-website \
  --index-document index.html \
  --404-document index.html

# Upload `$BUILD` folder documents in storage account
az storage blob upload-batch \
  --account-name "$ACCOUNT" \
  --source "$BUILD" \
  --destination '$web' \
  --overwrite

# Display the storage account website URL
az storage account show \
  --name "$ACCOUNT" \
  --resource-group "$RG" \
  --query "primaryEndpoints.web" \
  --output tsv

La dernière commande affiche l’URL du site. Les trois premières se rejouent telles quelles si vous recommencez. La commande d’envoi se rejoue à chaque nouveau build.

Ce qui surprend au premier déploiement

Le symptôme	Ce qui se passe
Une route interne renvoie une erreur 404	Le routage d’une application à page unique se fait dans le navigateur, mais le Storage Account cherche un vrai fichier. Mettez index.html en Error document path.
Le site affiche encore l’ancienne version	Cache navigateur. Rechargez en forçant le cache, ou posez un en-tête Cache-Control sur les fichiers versionnés par votre build.
Une page blanche et des erreurs de chemin	Le build attend d’être servi depuis la racine. Vérifiez que index.html est à la racine de $web.
$web est introuvable	Il n’est créé qu’à l’activation du site statique. Repassez par Static website.

Tout ce que vous déposez dans `$web` est public

Le point de terminaison web sert le conteneur $web à qui possède l’URL, sans authentification. Donc pas de fichier .env, pas de clé d’API, pas de jeton, pas d’export de données dans le build. Une URL de lab n’est pas secrète, elle finit dans un e-mail ou un historique de navigateur.

L’arrêt automatique ne concerne que les VM. Un Storage Account facture tant qu’il existe. C’est très peu pour un site statique, mais ce n’est pas zéro, et cela dure jusqu’à la suppression du Resource Group.

À la fin du lab

Le Resource Group est supprimé à l’échéance par les administrateurs, ce qui emporte le Storage Account et le site. Si le besoin s’arrête avant, supprimez sans attendre : voir cycle de vie, prolongation et clôture. Récupérez ce qui compte, build et configuration, puisque aucune sauvegarde n’est garantie.

Avec un nom de domaine ?

Servir le même site derrière un nom de domaine Qim info demande d’autres ressources et des réglages qui ne sont pas en libre-service. Écrivez à lab@qiminfo.ch en décrivant le besoin.