Héberger un site web statique dans Stockage Azure

1. Connectez-vous au portail Azure.

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 d’index , saisissez une page d’index par défaut (par exemple, index.html).

   La page d’index par défaut apparaît lorsque vous naviguez vers la racine de votre site statique.

6. Dans le champ Chemin du document d’erreur , saisissez une page d’erreur par défaut (par exemple, 404.html).

   La page d’erreur par défaut apparaît lorsque vous naviguez vers une page qui n’existe pas dans votre site statique.

7. Sélectionnez Enregistrer pour terminer la configuration statique du site.

   

8. Après avoir sauvegardé la configuration, un message de confirmation apparaît. Le volet Aperçu affiche vos points de terminaison statiques du site web et d’autres informations de configuration.

   

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 votre abonnement actif à celui du compte de stockage qui héberge votre site web statique. Remplacez la valeur d’espace réservé <subscription-id> par l’ID de votre abonnement.

   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 le <error-document-name> lieu de placement par le nom du document d’erreur qui apparaît lorsqu’un navigateur demande une page de votre site qui n’existe pas.

   • Remplacez l’espace <index-document-name> réservé par le nom du document d’index. Ce document est couramment index.html.

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-Object 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 votre abonnement actif à celui du compte de stockage qui héberge 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 le <error-document-name> lieu de placement par le nom du document d’erreur qui apparaît lorsqu’un navigateur demande une page de votre site qui n’existe pas.

   • Remplacez l’espace <index-document-name> réservé par le nom du document d’index. Ce document est couramment index.html.

Les instructions suivantes vous montrent comment charger des fichiers à l’aide du portail Azure. Vous pouvez aussi utiliser AzCopy, Azure PowerShell, Azure CLI, ou une application personnalisée pour télécharger des fichiers dans le $web conteneur de votre compte. Pour un tutoriel étape par étape qui télécharge des fichiers en utilisant Visual Studio Code, voir le tutoriel : Hébergez un site web statique sur 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 $web conteneur pour ouvrir le panneau Aperçu du conteneur.

   

3. Dans le panneau Aperçu , sélectionnez Téléverser. Dans le panneau Blob de téléversement , sélectionnez le champ Fichiers pour ouvrir le navigateur de fichiers. Naviguez jusqu’au fichier, sélectionnez-le, puis sélectionnez Ouvrir. Optionnellement, sélectionnez Écraser 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 sur text/html. Pour vérifier ce paramètre, sélectionnez le nom du blob que vous avez téléchargé à l’étape précédente pour ouvrir son panneau Aperçu . 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. Cependant, dans certains cas, il se peut que vous deviez le régler vous-même. Si vous ne définissez pas cette propriété sur text/html, le navigateur invite les utilisateurs à télécharger le fichier au lieu d’afficher son contenu. Vous pouvez définir cette propriété à l’étape précédente.

Téléverser les objets vers le $web conteneur depuis un répertoire source.

Cet exemple suppose que vous exécutez des commandes d'une session Azure Cloud Shell.

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

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

Téléverser les objets vers le $web conteneur depuis un répertoire source.

# Upload a file
Set-AzStorageBlobContent -File "<path-to-file>" `
   -Container '$web' `
   -Blob "<blob-name>" `
   -Context $ctx

• Remplacez la <path-to-file> valeur de remplacement par le chemin entièrement qualifié vers le fichier que vous souhaitez téléverser (par exemple, C:\temp\index.html).

• Remplacez la <blob-name> valeur de place par le nom que vous souhaitez donner au blob résultant (par exemple, index.html).

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 .

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.