Tutoriel : Configurer un CDN pour Azure Static Web Apps

Prérequis

• Domaine personnalisé configuré pour votre application web statique avec une durée de vie (TTL) définie sur moins de 48 heures.
• Une application déployée avec Azure Static Web Apps qui utilise le plan d'hébergement Standard.

Activer la périphérie de niveau entreprise sur la ressource Static Web Apps

az extension add -n enterprise-edge

az staticwebapp enterprise-edge enable -n my-static-webapp -g my-resource-group

Prérequis

• Compte Azure avec un abonnement actif. Créez un compte gratuitement.
• Un site Azure Static Web Apps. Générer votre première application web statique
• Plans Azure Static Web Apps Standard et Azure Front Door Standard / Premium. Pour plus d’informations, consultez Tarification de Static Web Apps.
• Envisagez d’utiliser la périphérie de niveau entreprise pour accélérer les chargements de pages, améliorer la sécurité et optimiser la fiabilité pour les applications globales.

Créer un Azure Front Door

1. Connectez-vous au portail Azure.

2. Dans la page d’accueil ou le menu Azure, sélectionnez + Créer une ressource. Recherchez Profils Front Door et CDN, puis sélectionnez Créer>Profils Front Door et CDN.

3. Dans la page Comparer les offres, sélectionnez Création rapide, puis Continuer pour créer une instance Front Door.

4. Dans la page Créer un profil Front Door, entrez ou sélectionnez les paramètres suivants.

   Paramètre	Valeur
   Abonnement	Sélectionnez votre abonnement Azure.
   Resource group	Entrez un nom de groupe de ressources. Ce nom est souvent le même que celui du groupe utilisé par votre application web statique.
   Emplacement du groupe de ressources	Si vous créez un nouveau groupe de ressources, entrez l’emplacement le plus proche de vous.
   Nom	Entrez my-static-web-app-front-door.
   Niveau	Sélectionnez Standard.
   Nom du point de terminaison	Entrez un nom unique pour votre hôte Front Door.
   Typed’origine	Sélectionnez Static Web Apps.
   Nom d’hôte d’origine	Sélectionnez le nom d’hôte de votre application Web statique dans la liste déroulante.
   Mise en cache	Cochez la case Activer la mise en cache.
   Comportement de mise en cache des chaînes de requête	Sélectionnez Utiliser la chaîne de requête
   Compression	Sélectionnez Activer la compression
   Stratégie WAF	Sélectionnez Créer nouveau ou sélectionnez une stratégie Web Application Firewall existante dans la liste déroulante si vous souhaitez activer cette fonctionnalité.

   Remarque

   Lorsque vous créez un profil Azure Front Door, vous devez sélectionner une origine dans le même abonnement que celui dans lequel l’instance de Front Door est créée.

5. Sélectionnez Examiner + créer, puis sélectionnez Créer. Le processus de création peut prendre quelques minutes.

6. Une fois le déploiement terminé, sélectionnez Accéder à la ressource.

7. Ajoutez une condition.

Désactiver le cache pour le workflow d’authentification

Ajoutez les paramètres suivants pour désactiver les stratégies de mise en cache de Front Door lors de la tentative de mise en cache des pages relatives aux authentifications et aux autorisations.

Ajouter une condition

1. Dans votre instance Front Door, sous Paramètres, sélectionnez Ensemble de règles.

2. Sélectionnez Ajouter.

3. Dans la zone de texte Nom de l’ensemble de règles, entrez Sécurité.

4. Dans la zone de texte Nom de la règle, entrez NoCacheAuthRequests.

5. Sélectionnez Ajouter une condition.

6. Sélectionnez Chemin de demande.

7. Sélectionnez le menu déroulant Opérateur, puis Commence par.

8. Sélectionnez le lien Modifier au-dessus de la zone de texte Valeur.

9. Entrez /.auth dans la zone de texte, puis sélectionnez Mettre à jour.

10. Sélectionnez Aucune option dans la liste déroulante Transformation de chaîne.

Ajouter une action

1. Sélectionnez le menu déroulant Ajouter une action.

2. Sélectionnez Remplacement de configuration de routage.

3. Sélectionnez Désactivé dans la liste déroulante Mise en cache.

4. Cliquez sur Enregistrer.

Associer une règle à un point de terminaison

Maintenant que la règle est créée, appliquez la règle à un point de terminaison Front Door.

1. Dans votre instance Front Door, sélectionnez Ensemble de règles, puis le lien Non associé.

   

2. Sélectionnez le nom du point de terminaison auquel vous souhaitez appliquer la règle de mise en cache, puis sélectionnez Suivant.

3. Sélectionnez Associer.

   

Copier l’ID Front Door

Utilisez les étapes suivantes pour copier l’identificateur unique de l’instance Front Door.

1. Depuis votre instance Front Door, sélectionnez le lien Vue d’ensemble dans la navigation de gauche.

2. Copiez la valeur intitulée ID Front Door et collez-la dans un fichier pour l’utiliser ultérieurement.

   

Mettre à jour la configuration des applications web statiques

Pour effectuer l’intégration à Front Door, vous devez mettre à jour le fichier de configuration de l’application pour effectuer les fonctions suivantes :

• Restreindre le trafic vers votre site uniquement via Front Door
• Restreindre le trafic vers votre site uniquement depuis votre instance Front Door
• Définir les domaines qui peuvent accéder à votre site
• Désactiver la mise en cache pour les routes sécurisées

Ouvrez le fichier staticwebapp.config.json de votre site et apportez les modifications suivantes.

1. Restreignez le trafic de sorte qu’il utilise uniquement Front Door en ajoutant la section suivante au fichier de configuration :

   "networking": {
     "allowedIpRanges": ["AzureFrontDoor.Backend"]
   }
   

2. Pour définir quelles instances et quels domaines d’Azure Front Door peuvent accéder à votre site, ajoutez la section forwardingGateway.

   "forwardingGateway": {
     "requiredHeaders": {
       "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
     },
     "allowedForwardedHosts": [
       "my-sitename.azurefd.net"
     ]
   }
   

   Tout d’abord, configurez votre application pour qu’elle autorise uniquement le trafic provenant de votre instance Front Door. Dans chaque requête du serveur principal, Front Door ajoute automatiquement un en-tête X-Azure-FDID qui contient l’ID de votre instance Front Door. En configurant votre application Web statique pour qu’elle exige cet en-tête, vous limitez le trafic exclusivement à votre instance Front Door. Dans la section forwardingGateway de votre fichier de configuration, ajoutez la section requiredHeaders et définissez l’en-tête X-Azure-FDID. Remplacez <YOUR-FRONT-DOOR-ID> par l’ID Front Door que vous avez mis de côté précédemment.

   Ensuite, ajoutez le nom d’hôte Azure Front Door (et non le nom d’hôte Azure Static Web Apps) dans le tableau allowedForwardedHosts. Si vous avez des domaines personnalisés configurés dans votre instance Front Door, incluez-les également dans cette liste.

   Dans cet exemple, remplacez my-sitename.azurefd.net par le nom d’hôte Azure Front Door de votre site.

3. Pour toutes les routes sécurisées dans votre application, désactivez la mise en cache Azure Front Door en ajoutant "Cache-Control": "no-store" à la définition de l’en-tête de route.

   {
       ...
       "routes": [
           {
               "route": "/members",
               "allowedRoles": ["authenticated", "members"],
               "headers": {
                   "Cache-Control": "no-store"
               }
           }
       ]
       ...
   }
   

Grâce à cette configuration, votre site n’est plus disponible via le nom d’hôte *.azurestaticapps.net généré, mais exclusivement via les noms d’hôte configurés dans votre instance Front Door.

À propos de l’installation

• Domaines personnalisés : Maintenant que Front Door gère votre site, vous n’utilisez plus la fonctionnalité de domaine personnalisé Azure Static Web Apps. Azure Front Door dispose d’un processus distinct pour ajouter un domaine personnalisé. Reportez-vous à Ajouter un domaine personnalisé à votre Front Door. Lorsque vous ajoutez un domaine personnalisé à Front Door, vous devez mettre à jour le fichier de configuration de votre application web statique pour l’inclure dans la liste allowedForwardedHosts.

• Statistiques du trafic : Par défaut, Azure Front Door configure des sondes d’intégrité qui peuvent avoir un impact sur vos statistiques de trafic. Vous pouvez modifier les valeurs par défaut des sondes d’intégrité.

• Traitement des anciennes versions : Lorsque vous déployez des mises à jour de fichiers existants dans votre application web statique, Azure Front Door peut continuer à alimenter des versions plus anciennes de vos fichiers jusqu’à l’expiration de leur durée de vie. Videz le cache d’Azure Front Door pour les chemins d’accès concernés afin de vous assurer que les fichiers les plus récents sont alimentés.