Héberger un site web statique dans Stockage Azure

Article
05/11/2023

Vous pouvez servir du contenu statique (fichiers HTML, CSS, JavaScript et images) directement à partir d'un conteneur sur un compte GPv2 ou BlockBlobStorage. Pour en savoir plus, voir Hébergement de site web statique dans Stockage Azure.

Cet article explique comment activer l’hébergement de site web statique avec le Portail Azure, Azure CLI ou PowerShell.

Activer l’hébergement des sites web statiques

L’hébergement de site web statique est une fonctionnalité que vous devez activer sur le compte de stockage.

Pour commencer, connectez-vous au portail Azure.
Recherchez votre compte de stockage et sélectionnez-le pour afficher le volet Vue d’ensemble du compte.
Dans le volet Vue d’ensemble, sélectionnez l’onglet Fonctionnalités. Ensuite, sélectionnez Site web statique pour afficher la page de configuration du site web statique.
Sélectionnez Activé pour activer l’hébergement de site web statique pour le compte de stockage.
Dans le champ Nom du document d’index, spécifiez une page d’index par défaut (par exemple, index.html).

La page d’index par défaut s’affiche quand un utilisateur accède à la racine de votre site web statique.
Dans le champ Chemin du document d’erreur, spécifiez une page d’erreur par défaut (par exemple, 404.html).

La page d’erreur par défaut s’affiche quand un utilisateur tente d’accéder à une page qui n’existe pas dans votre site web statique.
Cliquez sur Enregistrer pour terminer la configuration du site statique.
Un message de confirmation s’affiche. Les points de terminaison et d’autres informations de configuration de votre site web statique sont présentés dans le volet Vue d’ensemble.

Vous pouvez activer l’hébergement de site web statique à l’aide d’Azure CLI.

Commencez par ouvrir Azure Cloud Shell ou, si vous avez installé Azure CLI localement, ouvrez une application console de commandes telle que Windows PowerShell.
Si votre identité est associée à plusieurs abonnements, définissez comme abonnement actif l’abonnement du compte de stockage qui doit héberger votre site web statique.
```
az account set --subscription <subscription-id>
```
Remplacez la valeur d’espace réservé <subscription-id> par l’ID de votre abonnement.
Activez l’hébergement de site web statique.
```
az storage blob service-properties update --account-name <storage-account-name> --static-website --404-document <error-document-name> --index-document <index-document-name>
```
- Remplacez la valeur d’espace réservé <storage-account-name> par le nom de votre compte de stockage.
- Remplacez l’espace réservé <error-document-name> par le nom du document d’erreur qui s’affiche quand un navigateur demande sur votre site une page inexistante.
- Remplacez la valeur d’espace réservé <index-document-name> par le nom du document d’index. Ce document est généralement « index.html ».

Vous pouvez activer l’hébergement de site web statique à l’aide du module Azure PowerShell.

Ouvrez une fenêtre Commande Windows PowerShell.
Vérifiez que vous disposez du module Azure PowerShell Az version 0.7 ou ultérieure.
```
Get-InstalledModule -Name Az -AllVersions | select Name,Version
```
Si vous devez installer ou mettre à niveau, consultez Installer le module Azure PowerShell.
Connectez-vous à votre abonnement Azure avec la commande Connect-AzAccount et suivez les instructions à l’écran.
```
Connect-AzAccount
```
Si votre identité est associée à plusieurs abonnements, définissez comme abonnement actif l’abonnement du compte de stockage qui doit héberger votre site web statique.
```
$context = Get-AzSubscription -SubscriptionId <subscription-id>
Set-AzContext $context
```
Remplacez la valeur d’espace réservé <subscription-id> par l’ID de votre abonnement.
Obtenez le contexte du compte de stockage qui définit le compte de stockage à utiliser.
```
$storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -AccountName "<storage-account-name>"
$ctx = $storageAccount.Context
```
- Remplacez la valeur d’espace réservé <resource-group-name> par le nom de votre groupe de ressources.
- Remplacez la valeur d’espace réservé <storage-account-name> par le nom de votre compte de stockage.
Activez l’hébergement de site web statique.
```
Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
```
- Remplacez l’espace réservé <error-document-name> par le nom du document d’erreur qui s’affiche quand un navigateur demande sur votre site une page inexistante.
- Remplacez la valeur d’espace réservé <index-document-name> par le nom du document d’index. Ce document est généralement « index.html ».

Charger des fichiers

Les instructions suivantes vous montrent comment charger des fichiers en utilisant le portail Azure. Vous pouvez également utiliser AzCopy, PowerShell, CLI ou n’importe quelle application personnalisée capable de charger des fichiers dans le conteneur $web de votre compte. Pour obtenir la procédure pas à pas qui permet de charger des fichiers à l’aide de Visual Studio Code, consultez Tutoriel : Héberger un site web statique sur le Stockage Blob.

Dans le portail Azure, accédez au compte de stockage contenant votre site web statique. Sélectionnez Conteneurs dans le volet de navigation gauche pour afficher la liste des conteneurs.
Dans le volet Conteneurs, sélectionnez le conteneur $web pour ouvrir le volet Vue d’ensemble du conteneur.
Dans le volet Vue d’ensemble, sélectionnez l’icône Charger pour ouvrir le volet Charger l’objet blob. Ensuite, sélectionnez le champ Fichiers dans le volet Charger l’objet blob pour ouvrir le navigateur de fichiers. Accédez au fichier que vous souhaitez charger, sélectionnez-le, puis sélectionnez Ouvrir pour remplir le champ Fichiers. Si vous le souhaitez, cochez la case Remplacer si les fichiers existent déjà.
Si vous souhaitez que le navigateur affiche le contenu du fichier, vérifiez que le type de contenu de ce fichier est défini sur text/html. Pour vérifier cela, sélectionnez le nom de l’objet blob que vous avez chargé à l’étape précédente pour ouvrir son volet Vue d’ensemble. Vérifiez que la valeur est définie dans le champ de propriété CONTENT-TYPE.

Notes

Cette propriété est automatiquement définie sur text/html pour les extensions couramment reconnues telles que .html. Toutefois, dans certains cas, vous devrez la définir vous-même. Si vous ne définissez pas cette propriété sur text/html, le navigateur invitera les utilisateurs à télécharger le fichier au lieu d’afficher son contenu. Cette propriété peut être définie à l’étape précédente.

Chargez des objets dans le conteneur $web à partir d’un répertoire source.

Cet exemple part du principe que vous exécutez des commandes à partir d’une session Azure Cloud Shell.

az storage blob upload-batch -s <source-path> -d '$web' --account-name <storage-account-name>

Notes

Si le navigateur invite les utilisateurs à télécharger le fichier au lieu de restituer le contenu, vous pouvez ajouter --content-type 'text/html; charset=utf-8' à la commande.

Remplacez la valeur d’espace réservé <storage-account-name> par le nom de votre compte de stockage.
Remplacez la valeur d’espace réservé <source-path> par le chemin d’accès de l’emplacement où se trouvent les fichiers que vous voulez charger.

Notes

Si vous utilisez l’emplacement d’installation d’Azure CLI, vous pouvez utiliser le chemin d’accès de tout emplacement sur votre ordinateur local. Par exemple : C:\myFolder.

Si vous utilisez Azure Cloud Shell, vous devez faire référence à un partage de fichiers visible pour Cloud Shell. Cet emplacement peut être le partage de fichiers du partage cloud ou un partage de fichiers existant que vous montez à partir du Cloud Shell. Pour savoir comment procéder, voir Conserver des fichiers dans Azure Cloud Shell.

Chargez des objets dans le conteneur $web à partir d’un répertoire source.

# upload a file
set-AzStorageblobcontent -File "<path-to-file>" `
-Container `$web `
-Blob "<blob-name>" `
-Context $ctx

Notes

Si le navigateur invite les utilisateurs à télécharger le fichier au lieu de restituer le contenu, vous pouvez ajouter -Properties @{ ContentType = "text/html; charset=utf-8";} à la commande.

Remplacez la valeur d’espace réservé <path-to-file> par le chemin d’accès complet du fichier que vous souhaitez charger (par exemple, C:\temp\index.html).
Remplacez la valeur d’espace réservé <blob-name> par le nom que vous souhaitez attribuer à l’objet blob obtenu (par exemple, index.html).

Trouver l’URL du site web

Vous pouvez afficher les pages de votre site dans un navigateur en utilisant l’URL publique du site web.

Dans le volet qui s’affiche en regard de la page de Vue d’ensemble du compte de votre compte de stockage, sélectionnez Site web statique. L’URL de votre site s’affiche dans le champ Point de terminaison principal.

Métrique des métriques de sites web statiques dans Stockage Azure

Recherchez l’URL publique de votre site web statique à l’aide de la commande suivante :

az storage account show -n <storage-account-name> -g <resource-group-name> --query "primaryEndpoints.web" --output tsv

Remplacez la valeur d’espace réservé <storage-account-name> par le nom de votre compte de stockage.
Remplacez la valeur d’espace réservé <resource-group-name> par le nom de votre groupe de ressources.

Recherchez l’URL publique de votre site web statique à l’aide de la commande suivante :

 $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -Name "<storage-account-name>"
Write-Output $storageAccount.PrimaryEndpoints.Web

Remplacez la valeur d’espace réservé <resource-group-name> par le nom de votre groupe de ressources.
Remplacez la valeur d’espace réservé <storage-account-name> par le nom de votre compte de stockage.

Activer les métriques sur des pages de site web statiques

Une fois les métriques activées, les statistiques de trafic relatives aux fichiers du conteneur $web sont signalées dans le tableau de bord des métriques.

Cliquez sur Métriques sous la section Moniteur du menu compte de stockage.

Notes

Les données de métriques sont générées par raccordement aux différentes API de métriques. Le portail affiche uniquement les membres d’API utilisés dans un délai d’exécution donné afin de se focaliser exclusivement sur les membres qui renvoient des données. Pour garantir votre capacité à sélectionner le membre d’API nécessaire, la première étape consiste à étendre le délai d’exécution.
Cliquez sur le bouton de délai d’exécution, choisissez un délai d'exécution, puis cliquez sur Appliquer.
Sélectionnez Blob dans la liste déroulante Espace de noms.
Ensuite, sélectionnez la métrique Sortie.
Dans le sélecteur Agrégation, sélectionnez Somme.
Cliquez sur le bouton Ajouter un filtre, puis choisissez Nom API dans le sélecteur Propriété.
Cochez la case en regard de GetWebContent dans le sélecteur Valeurs pour remplir le rapport des métriques.

Notes

La case à cocher GetWebContent s’affiche uniquement si ce membre d’API a été utilisé dans un délai d'exécution donné. Le portail affiche uniquement les membres d’API utilisés dans un délai d’exécution donné afin de se focaliser exclusivement sur les membres qui renvoient des données. Si vous ne trouvez pas un membre d’API spécifique dans cette liste, développez le délai d’exécution.