Intégrer vos propres fonctions à Azure Static Web Apps
Article
Azure Static Web Apps fournit une intégration des API pour vous permettre de créer des applications web front-ends qui dépendent d’API back-ends pour les données et les services. Les deux options d’intégration d’API sont : les fonctions managées et « apporter 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.
Notes
L’intégration à Azure Functions nécessite le plan Static Web Apps Standard.
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.
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.
Les deux URL de point de terminaison pointent vers la même fonction. Le point de terminaison sur l’application de fonction doit avoir le préfixe /api, car Static Web Apps met en correspondance les requêtes adressées à /api et proxyse le chemin entier vers la ressource liée.
Lier une application Azure Functions existante
Supprimer des 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 (le cas échéant).
Lier l’application Azure Functions à la ressource Static Web Apps
Ouvrez votre instance Static Web Apps dans le portail Azure.
Dans le menu Paramètres, sélectionnez les API.
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 back-end
Sélectionnez le nom de l’emplacement pour la fonction Azure.
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.
Dissocier l’application Functions de Static Web Apps
Pour dissocier une application de fonction d’une application web statique, procédez comme suit :
Dans le portail Azure, accédez à l’application web statique.
Dans le menu de navigation, sélectionnez API.
Recherchez l’environnement que vous voulez dissocier et sélectionnez le nom de l’application web.
Sélectionnez Dissocier.
Quand le processus de dissociation est terminé, les demandes de routes commençant par /api ne sont plus proxysées vers votre application Azure Functions.
Notes
Pour éviter d’exposer accidentellement votre application de fonction à un trafic anonyme, le fournisseur d’identité créé par le processus de liaison n’est pas supprimé automatiquement. Vous pouvez supprimer le fournisseur d’identité nommé Azure Static Web Apps (lié) des paramètres d’authentification de l’application de fonction.
Supprimer l’authentification de la ressource Azure Functions
Pour permettre à votre ressource Azure Functions de recevoir du trafic anonyme, procédez comme suit pour supprimer le fournisseur d’identité :
Dans le portail Azure, accédez à la ressource Azure Functions.
Sélectionnez Authentication dans le menu de navigation.
Dans la liste des fournisseurs d’identité, supprimez le fournisseur d’identité associé à la ressource Static Web Apps.
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 du 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é.
Notes
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.
Non pris en charge dans les environnements de demande de tirage Static Web Apps.
Votre application Azure Functions peut répondre à différents déclencheurs, mais l’application web statique peut accéder aux fonctions seulement via des points de terminaison HTTP.
Publiez une application et une API JavaScript Angular, React, Svelte ou Vue avec Azure Static Web Apps et Azure Functions. Déployez votre code de GitHub sur un site intermédiaire à l’aide d’URL de préversion.
Générez des solutions de bout en bout dans Microsoft Azure pour créer des fonctions Azure Functions, implémenter et gérer des applications web, développer des solutions qui utilisent le Stockage Azure, et bien plus encore.