Didacticiel : Ajouter Azure Content Delivery Network à une application web Azure App Service
Ce didacticiel explique comment ajouter Azure Content Delivery Network à une application web dans Azure App Service. Web Apps est un service d’hébergement d’applications web, d’API REST et de back-ends mobiles.
Voici la page d’accueil de l’exemple de site HTML statique que vous utilisez :
Ce que vous apprenez :
- Créez un point de terminaison de réseau de distribution de contenu.
- Actualiser les ressources mises en cache.
- Utiliser des chaînes de requête pour contrôler les versions mises en cache.
Prérequis
Pour suivre ce tutoriel :
Si vous n’avez pas d’abonnement Azure, créez un compte gratuit Azure avant de commencer.
Créer l’application web
Pour créer l’application web que vous allez utiliser, suivez le démarrage rapide sur HTML statique jusqu’à l’étape Accéder à l’application.
Connectez-vous au portail Azure.
Ouvrez un navigateur et connectez-vous au portail Azure.
Optimisation de l’accélération de site dynamique
Si vous souhaitez optimiser votre point de terminaison de réseau de distribution de contenu pour l’accélération de site dynamique (DSA), utilisez le portail du réseau de distribution de contenu pour créer votre profil et le point de terminaison. Grâce à l’optimisation DSA, le niveau de performance des pages web comprenant du contenu dynamique est sensiblement amélioré. Pour obtenir des instructions sur l’optimisation d’un point de terminaison de réseau de distribution de contenu pour DSA à partir du portail du réseau de distribution de contenu, consultez Configuration d’un point de terminaison de réseau de distribution de contenu pour accélérer la distribution de fichiers dynamiques. Sinon, si vous ne souhaitez pas optimiser votre nouveau point de terminaison, vous pouvez utiliser le portail d’applications web pour le créer en suivant les étapes décrites dans la section suivante. Pour les profils Azure CDN fourni par Edgio, vous ne pouvez pas changer l’optimisation d’un point de terminaison de réseau de distribution de contenu après sa création.
Créer un profil et un point de terminaison de réseau de distribution de contenu
Dans le volet de navigation gauche, sélectionnez App Services, puis sélectionnez l’application que vous avez créée à la rubrique Créer une application web HTML statique dans Azure en 5 minutes.
Dans la page App Service, dans la section Paramètres, sélectionnez Réseau > Azure CDN.
Dans la page Azure Content Delivery Network, fournissez les paramètres du Nouveau point de terminaison, comme spécifié dans le tableau.
| Paramètre | Valeur suggérée | Description |
|---|---|---|
| profil de réseau de distribution de contenu | myCDNProfile | Un profil réseau de distribution de contenu est une collection de points de terminaison de réseau de distribution de contenu avec le même niveau tarifaire. |
| Niveau tarifaire | Réseau de distribution de contenu Microsoft (classique) | Le niveau tarifaire spécifie le fournisseur et les fonctionnalités disponibles. |
| nom du point de terminaison de réseau de distribution de contenu | N’importe quel nom qui est unique dans le domaine azureedge.net | Vous accédez à vos ressources mises en cache au niveau du <Nom_Point_Terminaison> .azureedge.net. du domaine. |
Sélectionnez Créer pour créer un profil de réseau de distribution de contenu.
Azure crée le profil et le point de terminaison. Le nouveau point de terminaison s’affiche dans la liste Points de terminaison, et lorsqu’il est configuré, son état est Exécution en cours.
Tester le point de terminaison de réseau de distribution de contenu
Le point de terminaison n’est pas disponible immédiatement, car la propagation de l’enregistrement peut prendre du temps :
- Pour les profils Azure CDN Standard de Microsoft (classique), la propagation est généralement terminée en 10 minutes.
- Pour les profils Azure CDN Standard fourni par Edgio et Azure CDN Premium fourni par Edgio, la propagation se termine généralement en 90 minutes.
L’application fournie à titre d’exemple comprend un fichier index.html et des dossiers css, img et js contenant d’autres ressources statiques. Les chemins de contenu de tous ces fichiers sont identiques au point de terminaison de réseau de distribution de contenu. Par exemple, les deux URL suivantes accèdent au fichier bootstrap.css dans le dossier css :
http://<appname>.azurewebsites.net/css/bootstrap.css
http://<endpointname>.azureedge.net/css/bootstrap.css
Dans un navigateur, accédez à l’URL suivante :
http://<endpointname>.azureedge.net/index.html
Vous consultez la page que vous avez exécutée précédemment dans une application web Azure. Azure Content Delivery Network a récupéré les ressources de l’application web d’origine et les dessert à partir du point de terminaison de réseau de distribution de contenu
Pour vous assurer que cette page est mise en cache dans le réseau de distribution de contenu, actualisez-la. Deux requêtes pour la même ressource sont parfois nécessaires pour que le réseau de distribution de contenu mette en cache le contenu demandé.
Pour plus d’informations sur la création de profils et de points de terminaison Azure Content Delivery Network, consultez Prise en main d’Azure Content Delivery Network.
Vider le réseau de distribution de contenu
Le réseau de distribution de contenu actualise régulièrement ses ressources à partir de l’application web d’origine en fonction de la configuration de la durée de vie (TTL). La valeur TTL par défaut est de sept jours.
Dans certains cas, vous devrez peut-être actualiser le réseau de distribution de contenu avant l’expiration de la durée de vie. C’est par exemple le cas lorsque vous déployez un contenu mis à jour dans l’application web. Pour déclencher une actualisation, videz manuellement les ressources du réseau de distribution de contenu.
Dans cette section du didacticiel, vous déployez une modification dans l’application web et videz le réseau de distribution de contenu pour le forcer à actualiser son cache.
Déploiement d’une modification dans l’application web
Ouvrez le fichier index.html et ajoutez - V2 au titre H1, comme illustré dans l’exemple suivant :
<h1>Azure App Service - Sample Static HTML Site - V2</h1>
Validez votre modification et déployez-la dans l’application web.
git commit -am "version 2"
git push azure main
Une fois le déploiement terminé, accédez à l’URL de l’application web pour constater la modification.
http://<appname>.azurewebsites.net/index.html
Si vous ouvrez la page d’accueil à partir de l’URL du point de terminaison de réseau de distribution de contenu, vous ne voyez pas les changements, car la version en cache dans le réseau de distribution de contenu n’a pas encore expiré.
http://<endpointname>.azureedge.net/index.html
Vider le réseau de distribution de contenu dans le portail
Pour forcer le réseau de distribution de contenu à mettre à jour sa version mise en cache, videz le réseau de distribution de contenu.
Dans le portail de navigation gauche, sélectionnez Groupes de ressources, puis sélectionnez le groupe de ressources que vous avez créé pour votre application web (myResourceGroup).
Dans la liste des ressources, sélectionnez votre point de terminaison de réseau de distribution de contenu.
En haut de la page Point de terminaison, sélectionnez Vider.
Entrez les chemins d’accès au contenu que vous souhaitez vider. Vous pouvez transmettre un chemin d’accès complet pour vider un fichier individuel ou un segment de chemin d’accès pour vider et actualiser tout le contenu d’un dossier. Étant donné que vous avez modifié index.html, assurez-vous que ce fichier se trouve dans l’un des chemins d’accès.
En bas de la page, sélectionnez Vider.
Vérifier que le réseau de distribution de contenu est à jour
Patientez jusqu’à la fin du traitement de la demande de vidage. Quelques minutes sont habituellement nécessaires. Pour afficher l’état actuel, sélectionnez l’icône représentant une cloche en haut de la page.
Lorsque vous accédez à l’URL du point de terminaison de réseau de distribution de contenu pour index.html, vous voyez le terme V2 que vous avez ajouté au titre sur la page d’accueil, ce qui indique que le cache du réseau de distribution de contenu a été actualisé.
http://<endpointname>.azureedge.net/index.html
Pour plus d’informations, consultez Vider un point de terminaison Azure Content Delivery Network.
Utiliser des chaînes de requête pour contrôler la version du contenu
Azure Content Delivery Network offre les options de mise en cache suivantes :
- Ignorer les chaînes de requête
- Contourner la mise en cache pour les chaînes de requête
- Mettre en cache chaque URL unique
La première option est celle par défaut, ce qui signifie qu’il y a seulement une version mise en cache d’une ressource, quelle que soit la chaîne de requête dans l’URL.
Dans cette section du didacticiel, vous modifiez le comportement de mise en cache pour mettre en cache chaque URL unique.
Modification du comportement de mise en cache
Dans la page Point de terminaison CDN du portail Azure, sélectionnez Cache.
Sélectionnez Mettre en cache chaque URL unique dans le menu déroulant Mise en cache des chaînes de requête.
Sélectionnez Enregistrer.
Vérification de la mise en cache séparée des URL uniques
Dans un navigateur, accédez à la page d’accueil sur le point de terminaison de réseau de distribution de contenu et incluez une chaîne de requête :
http://<endpointname>.azureedge.net/index.html?q=1
Azure Content Delivery Network retourne le contenu actuel de l’application web, qui comprend V2 dans le titre.
Pour vous assurer que cette page est mise en cache dans le réseau de distribution de contenu, actualisez-la.
Ouvrez index.html, changez V2 en V3, puis déployez la modification.
git commit -am "version 3"
git push azure main
Dans un navigateur, accédez à l’URL du point de terminaison de réseau de distribution de contenu avec une nouvelle chaîne de requête, par exemple q=2. Azure Content Delivery Network obtient le fichier index.html actuel et affiche V3. Toutefois, si vous accédez au point de terminaison de réseau de distribution de contenu avec la chaîne de requête q=1, V2 s’affiche.
http://<endpointname>.azureedge.net/index.html?q=2
http://<endpointname>.azureedge.net/index.html?q=1
Cette sortie montre que chaque chaîne de requête est traitée différemment :
- Comme la chaîne de requête q=1 a été utilisée précédemment, le contenu mis en cache est retourné (V2).
- Comme la chaîne de requête q=2 est nouvelle, le contenu le plus récent de l’application web est récupéré et retourné (V3).
Pour plus d’informations, consultez Contrôler le comportement de mise en cache du réseau d’Azure Content Delivery Network avec des chaînes de requête.
Nettoyer les ressources
Au cours des étapes précédentes, vous avez créé des ressources Azure au sein d’un groupe de ressources. Si vous ne pensez pas avoir besoin de ces ressources à l’avenir, supprimez le groupe de ressources en exécutant la commande suivante dans Cloud Shell :
az group delete --name myResourceGroup
L’exécution de cette commande peut prendre une minute.
Étapes suivantes
Vous avez appris à effectuer les opérations suivantes :
- Créez un point de terminaison de réseau de distribution de contenu.
- Actualiser les ressources mises en cache.
- Utiliser des chaînes de requête pour contrôler les versions mises en cache.
Découvrez comment optimiser les performances du réseau de distribution de contenu dans les articles suivants :