Didacticiel : Ajouter Azure CDN à une application web Azure App ServiceTutorial: Add Azure CDN to an Azure App Service web app

Ce didacticiel montre comment ajouter Azure Content Delivery Network (CDN) à une application web dans Azure App Service.This tutorial shows how to add Azure Content Delivery Network (CDN) to a web app in Azure App Service. Web Apps est un service pour l’hébergement d’applications web, d’API REST et de backends mobiles.Web apps is a service for hosting web applications, REST APIs, and mobile back ends.

Voici la page d’accueil de l’exemple de site HTML statique que vous allez utiliser :Here's the home page of the sample static HTML site that you'll work with:

Page d’accueil de l’exemple d’application

Ce que vous allez apprendre :What you'll learn:

  • Créer un point de terminaison CDN.Create a CDN endpoint.
  • Actualiser les ressources mises en cache.Refresh cached assets.
  • Utiliser des chaînes de requête pour contrôler les versions mises en cache.Use query strings to control cached versions.

PrérequisPrerequisites

Pour suivre ce tutoriel :To complete this tutorial:

Si vous n’avez pas d’abonnement Azure, créez un compte gratuit avant de commencer.If you don't have an Azure subscription, create a free account before you begin.

Créer l’application webCreate the web app

Pour créer l’application web que vous allez utiliser, suivez les instructions de l’article Créer une application web HTML statique dans Azure jusqu’à la fin de l’étape Accéder à l’application.To create the web app that you'll work with, follow the static HTML quickstart through the Browse to the app step.

Se connecter au portail Azure.Log in to the Azure portal

Ouvrez un navigateur et accédez au portail Azure.Open a browser and navigate to the Azure portal.

Optimisation de l’accélération de site dynamiqueDynamic site acceleration optimization

Si vous souhaitez optimiser votre point de terminaison CDN pour l’accélération de site dynamique (DSA), utilisez le portail CDN pour créer votre profil et le point de terminaison.If you want to optimize your CDN endpoint for dynamic site acceleration (DSA), you should use the CDN portal to create your profile and endpoint. Grâce à l’optimisation DSA, le niveau de performance des pages web comprenant du contenu dynamique est sensiblement amélioré.With DSA optimization, the performance of web pages with dynamic content is measurably improved. Pour obtenir des instructions sur l’optimisation d’un point de terminaison CDN pour DSA à partir du portail CDN, consultez Configuration d’un point de terminaison CDN pour accélérer la distribution de fichiers dynamiques.For instructions about how to optimize a CDN endpoint for DSA from the CDN portal, see CDN endpoint configuration to accelerate delivery of dynamic files. 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.Otherwise, if you don't want to optimize your new endpoint, you can use the web app portal to create it by following the steps in the next section. Remarque : pour les profils CDN Azure fournis par Verizon, il n’est pas possible de modifier l’optimisation d’un point de terminaison CDN après sa création.Note that for Azure CDN from Verizon profiles, you cannot change the optimization of a CDN endpoint after it has been created.

Création d’un profil CDN et d’un point de terminaisonCreate a CDN profile and endpoint

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.In the left navigation, select App Services, and then select the app that you created in the static HTML quickstart.

Sélection de l’application App Service dans le portail

Dans la page App Service, dans la section Paramètres, sélectionnez Mise en réseau > Configurer Azure CDN pour votre application.In the App Service page, in the Settings section, select Networking > Configure Azure CDN for your app.

Sélection de CDN dans le portail

Dans la page Azure Content Delivery Network, fournissez les paramètres du Nouveau point de terminaison, comme spécifié dans le tableau.In the Azure Content Delivery Network page, provide the New endpoint settings as specified in the table.

Création d’un profil et d’un point de terminaison dans le portail

ParamètreSetting Valeur suggéréeSuggested value DescriptionDescription
Profil CDNCDN profile myCDNProfilemyCDNProfile Un profil CDN est une collection de points de terminaison CDN possédant le même niveau tarifaire.A CDN profile is a collection of CDN endpoints with the same pricing tier.
Niveau tarifairePricing tier Standard AkamaiStandard Akamai Le niveau tarifaire spécifie le fournisseur et les fonctionnalités disponibles.The pricing tier specifies the provider and available features. Ce didacticiel utilise Akamai standard.This tutorial uses Standard Akamai.
Nom du point de terminaison CDNCDN endpoint name N’importe quel nom qui est unique dans le domaine azureedge.netAny name that is unique in the azureedge.net domain Vous accédez à vos ressources mises en cache au niveau du <Nom_Point_Terminaison> .azureedge.net. du domaine.You access your cached resources at the domain <endpointname>.azureedge.net.

Sélectionnez Créer pour créer un profil CDN.Select Create to create a CDN profile.

Azure crée le profil et le point de terminaison.Azure creates the profile and endpoint. 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.The new endpoint appears in the Endpoints list, and when it's provisioned, the status is Running.

Nouveau point de terminaison dans la liste

Test du point de terminaison CDNTest the CDN endpoint

Le point de terminaison n’est pas disponible immédiatement, car la propagation de l’enregistrement peut prendre du temps :Because it takes time for the registration to propagate, the endpoint isn't immediately available for use:

  • Pour les profils du CDN Azure Standard fourni par Microsoft, la propagation s’effectue généralement dans un délai de 10 minutes.For Azure CDN Standard from Microsoft profiles, propagation usually completes in 10 minutes.
  • Pour les profils du CDN Azure Standard fourni par Akamai, la propagation s’effectue généralement dans un délai d’une minute.For Azure CDN Standard from Akamai profiles, propagation usually completes within one minute.
  • Dans le cas des profils du CDN Azure Standard fourni par Verizon et du CDN Azure Premium fourni par Verizon, la propagation s’effectue généralement dans un délai de 90 minutes.For Azure CDN Standard from Verizon and Azure CDN Premium from Verizon profiles, propagation usually completes within 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.The sample app has an index.html file and css, img, and js folders that contain other static assets. Les chemins d’accès de contenu pour tous ces fichiers sont identiques au point de terminaison CDN.The content paths for all of these files are the same at the CDN endpoint. Par exemple, les deux URL suivantes accèdent au fichier bootstrap.css dans le dossier css :For example, both of the following URLs access the bootstrap.css file in the css folder:

http://<appname>.azurewebsites.net/css/bootstrap.css
http://<endpointname>.azureedge.net/css/bootstrap.css

Dans un navigateur, accédez à l’URL suivante :Navigate a browser to the following URL:

http://<endpointname>.azureedge.net/index.html

Page d’accueil de l’exemple d’application traitée à partir du CDN

Vous consultez la page que vous avez exécutée précédemment dans une application web Azure.You see the same page that you ran earlier in an Azure web app. Azure CDN a récupéré les ressources de l’application web d’origine et les traite à partir du point de terminaison CDN.Azure CDN has retrieved the origin web app's assets and is serving them from the CDN endpoint

Pour vous assurer que cette page est mise en cache dans le CDN, actualisez la page.To ensure that this page is cached in the CDN, refresh the page. Deux demandes pour la même ressource sont parfois nécessaires pour que le CDN mette en cache le contenu demandé.Two requests for the same asset are sometimes required for the CDN to cache the requested content.

Pour plus d’informations sur la création de profils et de points de terminaison Azure CDN, consultez Prise en main d’Azure CDN.For more information about creating Azure CDN profiles and endpoints, see Getting started with Azure CDN.

Vidage du CDNPurge the CDN

Le CDN 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).The CDN periodically refreshes its resources from the origin web app based on the time-to-live (TTL) configuration. La valeur TTL par défaut est de sept jours.The default TTL is seven days.

Dans certains cas, vous devrez peut-être actualiser le CDN 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.At times you might need to refresh the CDN before the TTL expiration; for example, when you deploy updated content to the web app. Pour déclencher une actualisation, videz manuellement les ressources du CDN.To trigger a refresh, manually purge the CDN resources.

Dans cette section du didacticiel, vous déployez une modification dans l’application web et videz le CDN pour le forcer à actualiser son cache.In this section of the tutorial, you deploy a change to the web app and purge the CDN to trigger the CDN to refresh its cache.

Déploiement d’une modification dans l’application webDeploy a change to the web app

Ouvrez le fichier index.html et ajoutez - V2 au titre H1, comme illustré dans l’exemple suivant :Open the index.html file and add - V2 to the H1 heading, as shown in the following example:

<h1>Azure App Service - Sample Static HTML Site - V2</h1>

Validez votre modification et déployez-la dans l’application web.Commit your change and deploy it to the web app.

git commit -am "version 2"
git push azure master

Une fois le déploiement terminé, accédez à l’URL de l’application web pour constater la modification.Once deployment has completed, browse to the web app URL to see the change.

http://<appname>.azurewebsites.net/index.html

V2 dans le titre de l’application web

Si vous ouvrez la page d’accueil à partir de l’URL du point de terminaison CDN, vous ne pourrez pas visualiser cette modification, car la version mise en cache dans le CDN n’a pas encore expiré.If you browse to the CDN endpoint URL for the home page, you won't see the change because the cached version in the CDN hasn't expired yet.

http://<endpointname>.azureedge.net/index.html

Pas de V2 dans le titre du CDN

Vidage du CDN dans le portailPurge the CDN in the portal

Pour forcer le CDN à mettre à jour sa version mise en cache, videz le CDN.To trigger the CDN to update its cached version, purge the CDN.

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).In the portal left navigation, select Resource groups, and then select the resource group that you created for your web app (myResourceGroup).

Sélection du groupe de ressources

Dans la liste des ressources, sélectionnez votre point de terminaison CDN.In the list of resources, select your CDN endpoint.

Sélection du point de terminaison

En haut de la page Point de terminaison, sélectionnez Vider.At the top of the Endpoint page, select Purge.

Sélection de l’option Vider

Entrez les chemins d’accès au contenu que vous souhaitez vider.Enter the content paths you want to purge. 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.You can pass a complete file path to purge an individual file, or a path segment to purge and refresh all content in a folder. Étant donné que vous avez modifié index.html, assurez-vous que ce fichier se trouve dans l’un des chemins d’accès.Because you changed index.html, ensure that is in one of the paths.

En bas de la page, sélectionnez Vider.At the bottom of the page, select Purge.

Vidage de la page

Vérification de la mise à jour du CDNVerify that the CDN is updated

Patientez jusqu’à la fin du traitement de la demande de vidage. Quelques minutes sont habituellement nécessaires.Wait until the purge request finishes processing, which is typically a couple of minutes. Pour afficher l’état actuel, sélectionnez l’icône représentant une cloche en haut de la page.To see the current status, select the bell icon at the top of the page.

Notification de vidage

Si vous accédez au fichier index.html à partir de l’URL du point de terminaison CDN, vous pourrez voir la valeur V2 que vous avez ajoutée au titre sur la page d’accueil, ce qui indique que le cache du CDN a bien été actualisé.When you browse to the CDN endpoint URL for index.html, you'll see the V2 that you added to the title on the home page, which indicates that the CDN cache has been refreshed.

http://<endpointname>.azureedge.net/index.html

V2 dans le titre du CDN

Pour plus d’informations, consultez Purger un point de terminaison CDN Azure.For more information, see Purge an Azure CDN endpoint.

Utiliser des chaînes de requête pour contrôler la version du contenuUse query strings to version content

Azure CDN offre les options de comportement de mise en cache suivantes :Azure CDN offers the following caching behavior options:

  • Ignorer les chaînes de requêteIgnore query strings
  • Contourner la mise en cache pour les chaînes de requêteBypass caching for query strings
  • Mettre en cache chaque URL uniqueCache every unique URL

La première option est celle par défaut, ce qui signifie qu’il n’existe qu’une seule version mise en cache d’une ressource, quelle que soit la chaîne de requête dans l’URL.The first option is the default, which means there is only one cached version of an asset regardless of the query string in the URL.

Dans cette section du didacticiel, vous modifiez le comportement de mise en cache pour mettre en cache chaque URL unique.In this section of the tutorial, you change the caching behavior to cache every unique URL.

Modification du comportement de mise en cacheChange the cache behavior

Dans la page Point de terminaison CDN du portail Azure, sélectionnez Cache.In the Azure portal CDN Endpoint page, select Cache.

Sélectionnez Mettre en cache chaque URL unique dans la liste déroulante Comportement de mise en cache des chaînes de requête.Select Cache every unique URL from the Query string caching behavior drop-down list.

Sélectionnez Enregistrer.Select Save.

Sélection du comportement de mise en cache de chaîne de requête

Vérification de la mise en cache séparée des URL uniquesVerify that unique URLs are cached separately

Dans un navigateur, accédez à la page d’accueil au niveau du point de terminaison CDN, puis insérez une chaîne de requête :In a browser, navigate to the home page at the CDN endpoint, and include a query string:

http://<endpointname>.azureedge.net/index.html?q=1

Azure CDN renvoie le contenu de l’application web actuelle, qui inclut V2 dans le titre.Azure CDN returns the current web app content, which includes V2 in the heading.

Pour vous assurer que cette page est mise en cache dans le CDN, actualisez la page.To ensure that this page is cached in the CDN, refresh the page.

Ouvrez index.html, changez V2 en V3, puis déployez la modification.Open index.html, change V2 to V3, then deploy the change.

git commit -am "version 3"
git push azure master

Dans un navigateur, accédez à l’URL du point de terminaison CDN avec une nouvelle chaîne de requête, par exemple q=2.In a browser, go to the CDN endpoint URL with a new query string, such as q=2. Azure CDN obtient le fichier index.html actuel et affiche V3.Azure CDN gets the current index.html file and displays V3. Toutefois, si vous naviguez vers le point de terminaison CDN avec la chaîne de requête q=1, c’est la valeur V2 qui s’affiche.However, if you navigate to the CDN endpoint with the q=1 query string, you see V2.

http://<endpointname>.azureedge.net/index.html?q=2

V3 dans le titre dans le CDN, chaîne de requête 2

http://<endpointname>.azureedge.net/index.html?q=1

V2 dans le titre dans le CDN, chaîne de requête 1

Cette sortie montre que chaque chaîne de requête est traitée différemment :This output shows that each query string is treated differently:

  • Comme la chaîne de requête q=1 a été utilisée précédemment, le contenu mis en cache est retourné (V2).q=1 was used before, so cached contents are returned (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).q=2 is new, so the latest web app contents are retrieved and returned (V3).

Pour plus d’informations, consultez Contrôle du comportement de mise en cache du CDN Azure avec des chaînes de requête.For more information, see Control Azure CDN caching behavior with query strings.

Supprimer des ressourcesClean up resources

Au cours des étapes précédentes, vous avez créé des ressources Azure au sein d’un groupe de ressources.In the preceding steps, you created Azure resources in a resource group. 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 :If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myResourceGroup

L’exécution de cette commande peut prendre une minute.This command may take a minute to run.

Étapes suivantesNext steps

Vous avez appris à effectuer les opérations suivantes :What you learned:

  • Créer un point de terminaison CDN.Create a CDN endpoint.
  • Actualiser les ressources mises en cache.Refresh cached assets.
  • Utiliser des chaînes de requête pour contrôler les versions mises en cache.Use query strings to control cached versions.

Découvrez comment optimiser les performances du réseau CDN dans les articles suivants :Learn how to optimize CDN performance in the following articles: