Tutoriel : Configurer un CDN pour Azure Static Web Apps

En ajoutant Azure Front Door en tant que CDN pour votre application web statique, vous bénéficiez d’un point d’entrée sécurisé pour livrer rapidement vos applications web.

Avec Static Web Apps, vous avez deux options à intégrer à Azure Front Door. Vous pouvez ajouter Azure Front Door à votre application web statique en activant la périphérie de niveau entreprise, une intégration managée d’Azure Front Door à Static Web Apps. Vous pouvez aussi configurer manuellement une ressource Azure Front Door devant votre application web statique.

Tenez compte des avantages ci-dessous pour déterminer quelle option convient le mieux à vos besoins.

La périphérie de niveau entreprise fournit :

• Aucun changement de configuration
• aucun temps d’arrêt
• Des certifications SSL et des domaines personnalisés gérés automatiquement

Une configuration Azure Front Door manuelle vous donne un contrôle total sur la configuration CDN, notamment la possibilité de :

• Limiter l’origine du trafic par origine
• Ajouter un pare-feu d’applications web (WAF)
• Acheminer au travers de plusieurs applications
• Utiliser des fonctionnalités plus avancées d’Azure Front Door

Dans ce tutoriel, vous apprenez à ajouter Azure Front Door à votre application web statique.

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

Azure portal

1. Accédez à votre application web statique dans le Portail Azure.

2. Dans le menu de gauche, sélectionnez Périphérie d’entreprise.

3. Cochez la case Activer la périphérie d’entreprise.

4. Sélectionnez Enregistrer.

5. Sélectionnez OK pour confirmer l’enregistrement.

   L’activation de cette fonctionnalité entraîne des coûts supplémentaires.

Azure CLI

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

Remarque

L’expiration du cache, la chaîne de requête de clé de cache et les actions de remplacement de groupe d’origine sont déconseillées. Ces actions peuvent toujours fonctionner normalement, mais votre jeu de règles ne peut pas être modifié. Le remplacement de celles-ci met en place de nouvelles actions de remplacement de configuration de routage avant de modifier votre jeu de règles.

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.

Nettoyer les ressources

Si vous ne souhaitez plus utiliser les ressources créées dans ce tutoriel, supprimez les instances Azure Static Web Apps et Azure Front Door.

Étapes suivantes

Ajouter une API