Prise en charge des API dans Azure Static Web Apps avec Azure API Management

Gestion des API Azure est un service qui vous permet de créer une passerelle d’API moderne pour les services principaux existants.

Lorsque vous liez votre service Gestion des API Azure à votre application web statique, toutes les demandes adressées à votre application web statique avec un itinéraire qui commence /api par sont proxiées vers le même itinéraire dans le service Gestion des API Azure.

Un service Gestion des API Azure peut être lié à plusieurs applications web statiques en même temps. Un produit Gestion des API est créé pour chaque application web statique liée. Toutes les API ajoutées au produit sont disponibles pour l’application web statique associée.

Tous les niveaux tarifaires de Gestion des API Azure sont disponibles pour une utilisation avec Azure Static Web Apps.

Les options d’API pour Static Web Apps incluent les services Azure suivants :

• Azure Functions
• Gestion des API Azure
• Azure App Service
• Azure Container Apps

Pour plus d’informations, consultez la Vue d’ensemble des API.

Remarque

L’intégration à Azure Gestion des API 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 instance de gestion des API à votre application web statique, vous devez disposer d’une ressource Azure Gestion des API existante et d’une application web statique.

Ressource	Description
Gestion des API Azure	Si vous n’en avez pas encore, suivez les étapes décrites dans le guide Créer une instance de service Azure Gestion des API.
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

Considérez une instance Azure Gestion des API existante qui expose un point de terminaison via l’emplacement suivant.

https://my-api-management-instance.azure-api.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 pointent vers le même point de terminaison d’API. Le point de terminaison de l’instance Gestion des API 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 complet à la ressource liée.

Lier un service Gestion des API Azure

Lier l’instance Gestion des API à Static Web Apps

Pour lier un service Gestion des API Azure en tant que back-end d’API pour 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 auquel vous souhaitez lier le service Gestion des API. Sélectionnez Lien.

4. Dans Type de ressource back-end, sélectionnez Gestion des API.

5. Dans Abonnement, sélectionnez l’abonnement contenant le service Gestion des API Azure que vous souhaitez lier.

6. Dans Nom de la ressource, sélectionnez le service Gestion des API Azure.

7. Sélectionnez Lien.

Important

Lorsque le processus de liaison est terminé, les demandes d’itinéraires commençant /api par sont proxiées vers votre service Gestion des API Azure. Toutefois, aucune API n’est exposée par défaut. Consultez Configurer les API pour recevoir des demandes de configuration d’un produit Gestion des API pour autoriser les API que vous souhaitez utiliser.

Configurer des API pour recevoir des demandes

Gestion des API Azure dispose d’une fonctionnalité produits qui définit la façon dont les API sont exposées. Dans le cadre du processus de liaison, votre service Gestion des API est configuré avec un produit nommé Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked).

Pour rendre les API disponibles pour votre application web statique liée, ajoutez-les au produit.

1. Dans l’instance Gestion des API dans le portail, sélectionnez l’onglet Produits.

2. Sélectionnez le Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) produit.

3. Sélectionnez + Ajouter API.

4. Sélectionnez les API que vous souhaitez exposer à partir de vos applications web statiques, puis sélectionnez le lien Sélectionner .

Le processus de liaison applique également automatiquement la configuration suivante à votre service Gestion des API :

• Le produit associé à l’application web statique liée est configuré pour exiger un abonnement.
• Un abonnement Gestion des API nommé Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> est créé et délimité au produit avec le même nom.
• Une stratégie validate-jw entrante est ajoutée au produit pour autoriser uniquement les requêtes qui contiennent un jeton d’accès valide à partir de l’application web statique liée.
• L’application web statique liée est configurée pour inclure la clé primaire de l’abonnement et un jeton d’accès valide lors du proxying des demandes adressées au service Gestion des API.

Important

La modification de la stratégie validate-jwt ou la régénération de la clé primaire de l’abonnement empêche votre application Web statique d’établir les requêtes proxy vers le service Gestion des API. Ne modifiez pas ou supprimez l’abonnement ou le produit associé à votre application web statique pendant qu’ils sont liés.

Dissocier un service Gestion des API Azure

Pour dissocier un service Gestion des API Azure à partir d’une application web statique, procédez comme suit :

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

2. Recherchez l’environnement que vous souhaitez dissocier et sélectionnez le nom du service Gestion des API.

3. Sélectionnez Dissocier.

Lorsque le processus de dissociation est terminé, les demandes d’itinéraires commençant /api/ par sont proxiées vers votre service Gestion des API.

Remarque

Le produit et l’abonnement Gestion des API associés à l’application web statique liée ne sont pas automatiquement supprimés. Vous pouvez les supprimer du service Gestion des API.

Résolution des problèmes

Si les API ne sont pas associées au produit Gestion des API créé pour la ressource Static Web Apps, l’accès à un /api itinéraire dans votre application web statique retourne l’erreur suivante à partir de la gestion des API.

{
  "statusCode": 401,
  "message": "Access denied due to invalid subscription key. Make sure to provide a valid key for an active subscription."
}

Pour résoudre cette erreur, configurez les API que vous souhaitez exposer dans vos applications web statiques au produit créé pour celui-ci, comme détaillé dans la section Configurer les API pour recevoir des demandes .

Étapes suivantes

Présentation de l’API