Condividi tramite

Supporto api in App Web statiche di Azure con Gestione API di Azure

Gestione API di Azure è un servizio che consente di creare un gateway API moderno per i servizi back-end esistenti.

Quando si collega il servizio Gestione API di Azure all'app Web statica, tutte le richieste all'app Web statica con una route che inizia con /api vengono indirizzate alla stessa route nel servizio Gestione API di Azure.

Un servizio Gestione API di Azure può essere collegato a più app Web statiche contemporaneamente. Viene creato un prodotto Gestione API per ogni app Web statica collegata. Tutte le API aggiunte al prodotto sono disponibili per l'app Web statica associata.

Tutti i piani tariffari di Gestione API di Azure sono disponibili per l'uso con App Web statiche di Azure.

Le opzioni API per App Web statiche includono i servizi di Azure seguenti:

Per altre informazioni, vedere la panoramica delle API.

Annotazioni

L'integrazione con Gestione API di Azure richiede il piano Standard di App Web statiche.

L'integrazione backend non è supportata negli ambienti di richiesta pull delle App Web statiche.

Prerequisiti

Per collegare un'istanza di Gestione API all'app Web statica, è necessario avere una risorsa di Gestione API di Azure esistente e un'app Web statica.

Resource Descrzione
Gestione API di Azure Se non è già disponibile, seguire la procedura descritta nella guida Creare una nuova istanza del servizio Gestione API di Azure .
App Web statica esistente Se non ne hai già uno, segui la procedura descritta nella guida introduttiva per creare un'app Web No Framework statica.

Example

Si consideri un'istanza di Gestione API di Azure esistente che espone un endpoint tramite il percorso seguente.

https://my-api-management-instance.azure-api.net/api/getProducts

Una volta collegato, è possibile accedere allo stesso endpoint tramite il api percorso dell'app Web statica, come illustrato in questo URL di esempio.

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

Entrambi gli URL puntano allo stesso endpoint API. L'endpoint nell'istanza di Gestione API deve avere il /api prefisso, poiché le App Web statiche corrispondono alle richieste effettuate a /api ed eseguono il proxy verso l'intero percorso della risorsa collegata.

Per collegare un servizio Gestione API di Azure come back-end api per un'app Web statica, seguire questa procedura:

  1. Nel portale di Azure, vai all'app Web statica.

  2. Selezionare API dal menu di spostamento.

  3. Individuare l'ambiente a cui si vuole collegare il servizio Gestione API. Seleziona Collegamento.

  4. In Tipo di risorsa back-end selezionare Gestione API.

  5. In Sottoscrizione selezionare la sottoscrizione contenente il servizio Gestione API di Azure da collegare.

  6. In Nome risorsa selezionare il servizio Gestione API di Azure.

  7. Seleziona Collegamento.

Importante

Al termine del processo di collegamento, le richieste alle route che iniziano con /api vengono inviate tramite proxy al servizio Gestione API di Azure. Tuttavia, nessuna API viene esposta per impostazione predefinita. Vedere Configurare le API per ricevere richieste per configurare un prodotto Gestione API per consentire l'uso delle API.

Configurare le API per ricevere le richieste

Gestione API di Azure include una funzionalità di prodotti che definisce la modalità di visualizzazione delle API. Come parte del processo di collegamento, il servizio Gestione API viene configurato con un prodotto denominato Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked).

Per rendere disponibili le API per l'app Web statica collegata, aggiungerle al prodotto.

  1. Nell'istanza di Gestione API nel portale selezionare la scheda Prodotti .

  2. Selezionare il Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) prodotto.

  3. Selezionare + Aggiungi API.

  4. Selezionare le API da esporre dalle app Web statiche e quindi selezionare il collegamento Seleziona .

Screenshot del pannello API Management Products nel portale di Azure, che mostra come aggiungere un'API al prodotto creato per la risorsa app web statiche.

Il processo di collegamento applica automaticamente anche la configurazione seguente al servizio Gestione API:

  • Il prodotto associato all'app Web statica collegata è configurato per richiedere una sottoscrizione.
  • Viene creata una sottoscrizione di Gestione API denominata Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> e associata al prodotto con lo stesso nome.
  • Un criterio validate-jwt in ingresso viene aggiunto al prodotto per consentire solo le richieste che contengono un token di accesso valido dall'app Web statica collegata.
  • L'app Web statica collegata è configurata per includere la chiave primaria della sottoscrizione e un token di accesso valido durante il proxy delle richieste al servizio Gestione API.

Importante

La modifica del criterio validate-jwt o la rigenerazione della chiave primaria della sottoscrizione impedisce all'app Web statica di eseguire il proxy delle richieste al servizio Gestione API. Non modificare o eliminare la sottoscrizione o il prodotto associato all'app Web statica mentre sono collegati.

Per scollegare un servizio Gestione API di Azure da un'app Web statica, seguire questa procedura:

  1. Nel portale di Azure, vai all'app Web statica.

  2. Individuare l'ambiente da scollegare e selezionare il nome del servizio Gestione API.

  3. Selezionare Scollega.

Al termine del processo di scollegamento, le richieste alle route che iniziano con /api/ non vengono più inviate tramite proxy al servizio Gestione API.

Annotazioni

Il prodotto e la sottoscrizione di Gestione API associati all'app Web statica collegata non vengono eliminati automaticamente. È possibile eliminarli dal servizio Gestione API.

Risoluzione dei problemi

Se le API non sono associate al prodotto gestione API creato per la risorsa Static Web App, l'acceso a una /api route nell'app web statica comporta il seguente errore dalla gestione API.

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

Per risolvere questo errore, configurare le API da esporre all'interno delle app Web statiche al prodotto creato, come descritto nella sezione Configurare le API per ricevere le richieste .

Passaggi successivi

Panoramica delle API

  • Last updated on