Héberger un site web statique dans Stockage Azure

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.

  1. Pour commencer, 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.

    Image showing how to access the Static website configuration page within the Azure portal

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

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

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

    Image showing how to set the Static website properties within the Azure portal

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

    Image showing the Static website properties within the Azure portal

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.

  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.

    Image showing where to locate the website storage container in Azure portal

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

    Image showing how to upload files to the static website storage container

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

    Image showing how to verify blob content types

    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.

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.

Azure Storage static websites metrics metric

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.

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

    Metrics link

    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.

  2. Cliquez sur le bouton de délai d’exécution, choisissez un délai d'exécution, puis cliquez sur Appliquer.

    Azure Storage static websites metrics time range

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

    Azure Storage static websites metrics namespace

  4. Ensuite, sélectionnez la métrique Sortie.

    Screenshot that shows the Azure Storage static websites Egress metric.

  5. Dans le sélecteur Agrégation, sélectionnez Somme.

    Azure Storage static websites metrics aggregation

  6. Cliquez sur le bouton Ajouter un filtre, puis choisissez Nom API dans le sélecteur Propriété.

    Azure Storage static websites metrics API name

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

    Azure Storage static websites metrics GetWebContent

    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.

Étapes suivantes