Héberger un site web statique dans Stockage Azure

Vous pouvez servir du contenu statique (fichiers HTML, CSS, JavaScript et image) directement à partir d’un conteneur dans un compte V2 ou BlockBlobStorageà usage général. Pour en savoir plus, consultez l’hébergement de sites web statiques dans Stockage Azure.

Cet article explique comment activer l’hébergement de sites web statiques à l’aide du portail Azure, d’Azure CLI ou de PowerShell.

Activer l’hébergement de sites web statiques

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

portail

1. Connectez-vous au portail Azure pour commencer.

2. Recherchez votre compte de stockage et sélectionnez-le pour afficher le volet Vue d’ensemble du compte.

3. 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.

   

4. Sélectionnez Activé pour activer l’hébergement de site web statique pour le compte de stockage.

5. Dans le champ Nom du document Index , spécifiez une page d’index par défaut (par exemple : index.html).

   La page d’index par défaut s’affiche lorsqu’un utilisateur accède à la racine de votre site web statique.

6. Dans le champ Chemin d’accès 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 lorsqu’un utilisateur tente d’accéder à une page qui n’existe pas dans votre site web statique.

7. Cliquez sur Enregistrer pour terminer la configuration du site statique.

   

8. Un message de confirmation s’affiche. Vos points de terminaison de site web statiques et d’autres informations de configuration sont affichés dans le volet Vue d’ensemble .

   

Azure CLI

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

1. Commencez par ouvrir Azure Cloud Shell ou, si vous avez installé Azure CLI localement, ouvrez une application console de commandes telle que Windows PowerShell.

2. 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.

3. Activez l’hébergement de sites web statiques.

   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 <error-document-name> réservé par le nom du document d’erreur qui apparaîtra aux utilisateurs lorsqu’un navigateur demande une page sur votre site qui n’existe pas.

   • Remplacez l’espace <index-document-name> réservé par le nom du document d’index. Ce document est généralement «index.html».

PowerShell

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

1. Ouvrez une fenêtre de commande Windows PowerShell.

2. 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.

3. Connectez-vous à votre abonnement Azure avec la commande Connect-AzAccount et suivez les instructions à l’écran.

   Connect-AzAccount
   

4. 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.

5. 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.

6. Activez l’hébergement de sites web statiques.

   Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
   

   • Remplacez l’espace <error-document-name> réservé par le nom du document d’erreur qui apparaîtra aux utilisateurs lorsqu’un navigateur demande une page sur votre site qui n’existe pas.

   • Remplacez l’espace <index-document-name> réservé par le nom du document d’index. Ce document est généralement «index.html».

Télécharger des fichiers

portail

Les instructions suivantes vous montrent comment charger des fichiers à l’aide du portail Azure. Vous pouvez également utiliser AzCopy, PowerShell, CLI ou toute application personnalisée qui peut charger des fichiers dans le conteneur $web de votre compte. Pour obtenir un didacticiel pas à pas qui charge des fichiers à l’aide de Visual Studio Code, consultez Tutoriel : Héberger un site web statique sur le Stockage Blob.

1. 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.

2. Dans le volet Conteneurs , sélectionnez le conteneur $web pour ouvrir le volet Vue d’ensemble du conteneur.

   

3. Dans le volet Vue d’ensemble, sélectionnez l’icône Téléverser pour ouvrir le volet Téléverser blob. Ensuite, sélectionnez le champ Fichiers dans le volet Charger un 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 à cocher Remplacer si des fichiers existent déjà.

   

4. Si vous souhaitez que le navigateur affiche le contenu du fichier, assurez-vous que le type de contenu de ce fichier est défini text/htmlsur . 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 .

   

   Remarque

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

Azure CLI

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

Cet exemple suppose 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>

Remarque

Si le navigateur invite les utilisateurs à télécharger le fichier au lieu d’afficher 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 l’espace <source-path> réservé par un chemin d’accès à l’emplacement des fichiers que vous souhaitez charger.

Remarque

Si vous utilisez une installation d’emplacement d’Azure CLI, vous pouvez utiliser le chemin d’accès à n’importe quel emplacement sur votre ordinateur local (par exemple : C:\myFolder.

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

PowerShell

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

Remarque

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

• Remplacez la <path-to-file> valeur d’espace réservé par le chemin complet du fichier que vous souhaitez charger (par exemple : C:\temp\index.html).

• Remplacez la <blob-name> valeur d’espace réservé par le nom que vous souhaitez donner à l’objet blob résultant (par exemple : index.html).

Rechercher l’URL du site web

Vous pouvez afficher les pages de votre site à partir d’un navigateur à l’aide de l’URL publique du site web.

portail

Dans le volet qui s’affiche à côté de la page de l'aperçu de votre compte de stockage, sélectionnez Site web statique. L’URL de votre site s’affiche dans le champ point de terminaison principal .

Azure CLI

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.

PowerShell

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 les 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.

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

   

   Remarque

   Les données de métriques sont générées en se connectant à différentes API de métriques. Le portail affiche uniquement les membres de l’API utilisés dans un délai donné afin de se concentrer uniquement sur les membres qui retournent des données. Pour vous assurer que vous êtes en mesure de sélectionner le membre d’API nécessaire, la première étape consiste à développer l’intervalle de temps.

2. Cliquez sur le bouton d’intervalle de temps, choisissez un intervalle de temps, puis cliquez sur Appliquer.

   

3. Sélectionnez Blob dans la liste déroulante Espace de noms .

   

4. Sélectionnez ensuite la métrique de sortie .

   

5. Sélectionnez Somme dans le sélecteur d’agrégation .

   

6. Cliquez sur le bouton Ajouter un filtre et choisissez le nom de l’API dans le sélecteur de propriétés .

   

7. Cochez la case en regard de GetWebContent dans le sélecteur Valeurs pour remplir le rapport de métriques.

   

   Remarque

   La case GetWebContent s’affiche uniquement si ce membre de l’API a été utilisé dans un délai donné. Le portail affiche uniquement les membres de l’API utilisés dans un délai donné afin de se concentrer uniquement sur les membres qui retournent des données. Si vous ne trouvez pas de membre d’API spécifique dans cette liste, développez l’intervalle de temps.

Étapes suivantes

• Découvrez comment configurer un domaine personnalisé avec votre site web statique. Consultez Associer un domaine personnalisé à un point de terminaison Azure Blob Storage.