Intégrer vos propres fonctions à Azure Static Web Apps

Azure Static Web Apps fournit une intégration d’API pour vous permettre de créer des applications web frontales qui dépendent des API principales pour les données et les services. Les deux options d’intégration d’API sont les suivantes : les fonctions managées et apportent vos propres back-ends. Pour plus d’informations sur les différences entre ces options, consultez la vue d’ensemble.

Cet article montre comment lier une application Azure Functions existante à une ressource Azure Static Web Apps.

Remarque

L’intégration à Azure Functions nécessite le plan Static Web Apps Standard.

L’intégration back-end n’est pas prise en charge dans les environnements de demande de tirage statique Web Apps.

Prérequis

Pour lier une application de fonction à votre application web statique, vous devez disposer d’une ressource Azure Functions existante et d’une application web statique.

Ressource	Description
Azure Functions	Si vous n’en avez pas encore, suivez les étapes décrites dans le guide De prise en main d’Azure Functions .
Application web statique existante	Si vous n’en avez pas encore, suivez les étapes du guide de prise en main pour créer une application web statique No Framework.

Exemple

Prenons l’exemple d’une application Azure Functions existante qui expose un point de terminaison via l’emplacement suivant.

https://my-functions-app.azurewebsites.net/api/getProducts

Une fois la liaison établie, vous pouvez accéder à ce même point de terminaison via le chemin d’accès api à partir de votre application web statique, comme indiqué dans cet exemple d’URL.

https://red-sea-123.azurestaticapps.net/api/getProducts

Les deux URL de point de terminaison pointent vers la même fonction. Le point de terminaison de l’application de fonction doit avoir le /api préfixe, car Static Web Apps correspond aux demandes adressées à /api la ressource liée et proxies le chemin d’accès entier à la ressource liée.

Lier une application Azure Functions existante

Supprimer les fonctions managées de votre ressource Static Web Apps (le cas échéant)

Avant d’associer une application Functions existante, vous devez d’abord ajuster la configuration de votre application web statique pour supprimer les fonctions managées si vous en avez.

1. Définissez la valeur api_location sur une chaîne vide ("") dans le fichier de configuration du flux de travail.

Lier l’application Azure Functions à la ressource Static Web Apps

1. Ouvrez votre instance Static Web Apps dans le portail Azure.

2. Dans le menu Paramètres, sélectionnez les API.

3. Dans la ligne Production, sélectionnez Lien pour ouvrir la fenêtre Lier un nouveau back-end.

   Entrez les paramètres suivants.

   Paramètre	Valeur
   Type de ressource back-end	Sélectionner Application de fonction.
   Abonnement	Sélectionner votre nom abonnement Azure.
   Nom de la ressource	Sélectionnez le nom de l’application Azure Functions.
   Emplacement principal	Sélectionnez le nom de l’emplacement pour la fonction Azure.

4. Sélectionnez Lien.

L’application Azure Functions est désormais mappée à l’itinéraire /api de votre application web statique.

Important

Veillez à définir la valeur api_location sur une chaîne vide ("") dans le fichier de configuration du flux de travail avant de lier une application Azure Functions existante. En outre, les appels supposent que l’application de fonction externe conserve le préfixe d’itinéraire par défaut api. De nombreuses applications suppriment ce préfixe dans host.json. Vérifiez que le préfixe est en place dans la configuration, sinon l’appel échoue.

Déploiement

Vous êtes responsable de la configuration d’un flux de travail de déploiement pour votre application Azure Functions.

Dissocier une application Azure Functions

Dissocier l’application Functions à partir d’applications web statiques

Pour dissocier une application de fonction à partir d’une application web statique, procédez comme suit :

1. Dans le portail Azure, accédez à l’application web statique.

2. Dans le menu de navigation, sélectionnez API.

3. Recherchez l’environnement que vous souhaitez dissocier et sélectionnez le nom de l’application de fonction.

4. Sélectionnez Dissocier.

Une fois le processus de dissociation terminé, les requêtes aux itinéraires commençant /api par ne sont plus proxiées vers votre application Azure Functions.

Remarque

Pour éviter d’exposer accidentellement votre application de fonction au trafic anonyme, le fournisseur d’identité créé par le processus de liaison n’est pas automatiquement supprimé. Vous pouvez supprimer le fournisseur d’identité nommé Azure Static Web Apps (lié) dans les paramètres d’authentification de l’application de fonction.

Supprimer l’authentification de la ressource Azure Functions

Pour permettre à votre application Azure Functions de recevoir le trafic anonyme, procédez comme suit pour supprimer le fournisseur d’identité :

1. Dans le Portail Azure, accédez à la ressource Azure Functions.

2. Sélectionnez Authentification dans le menu de navigation.

3. Dans la liste des fournisseurs d’identité, supprimez le fournisseur d’identité lié à la ressource Static Web Apps.

4. Sélectionnez Supprimer l’authentification pour supprimer l’authentification et autoriser le trafic anonyme vers votre ressource Azure Functions.

Votre application de fonction est désormais en mesure de recevoir le trafic anonyme.

Contraintes de sécurité

• Authentification et autorisation : Si les stratégies d’authentification et d’autorisation ne sont pas déjà configurées sur votre application Azure Functions existante, l’application web statique dispose d’un accès exclusif à l’API. Pour rendre votre application Azure Functions accessible à d’autres applications, ajoutez un autre fournisseur d’identité ou modifiez les paramètres de sécurité afin d’autoriser l’accès non authentifié.

  Remarque

  Si vous activez l’authentification et l’autorisation dans votre application de Fonctions liée, elle doit utiliser le fournisseur d’authentification et d’autorisation du Service App Azure version 2.

• Accessibilité publique obligatoire : Une application Azure Functions existante ne doit pas appliquer les configurations de sécurité suivantes.

  • Restriction de l’adresse IP de l’application Azure Functions.
  • Restriction du trafic via une liaison privée ou des points de terminaison de service.

• Clés d’accès aux fonctions : Si votre fonction requiert une clé d’accès, vous devez fournir la clé avec les appels de l’application statique à l’API.

Restrictions

• Une seule application Azure Functions est disponible pour une seule application web statique.
• La valeur api_location dans la configuration du flux de travail doit être définie sur une chaîne vide.
• Non pris en charge dans les environnements de demande de tirage Static Web Apps.
• Bien que votre application Azure Functions puisse répondre à différents déclencheurs, l’application web statique peut uniquement accéder aux fonctions via des points de terminaison HTTP.

Étapes suivantes

Ajouter une API