API-ondersteuning in Azure Static Web Apps met Azure API Management
Azure API Management is een service waarmee u een moderne API-gateway kunt maken voor bestaande back-endservices.
Wanneer u uw Azure API Management-service koppelt aan uw statische web-app, worden alle aanvragen naar uw statische web-app gekoppeld aan een route die begint met /api dezelfde route in de Azure API Management-service.
Een Azure API Management-service kan tegelijkertijd worden gekoppeld aan meerdere statische web-apps. Er wordt een API Management-product gemaakt voor elke gekoppelde statische web-app. Alle API's die aan het product worden toegevoegd, zijn beschikbaar voor de bijbehorende statische web-app.
Alle Azure API Management-prijscategorieën zijn beschikbaar voor gebruik met Azure Static Web Apps.
API-opties voor Static Web Apps omvatten de volgende Azure-services:
Zie het overzicht van API's voor meer informatie.
Notitie
Voor de integratie met Azure API Management is het Static Web Apps Standard-plan vereist.
Back-endintegratie wordt niet ondersteund in statische Web Apps-pull-aanvraagomgevingen.
Vereisten
Als u een API Management-exemplaar wilt koppelen aan uw statische web-app, moet u een bestaande Azure API Management-resource en een statische web-app hebben.
| Bron | Omschrijving |
|---|---|
| Azure API Management | Als u er nog geen hebt, volgt u de stappen in de handleiding Een nieuw exemplaar van de Azure API Management-service maken. |
| Bestaande statische web-app | Als u er nog geen hebt, volgt u de stappen in de aan de slag-handleiding om een statische Web-app van No Framework te maken. |
voorbeeld
Overweeg een bestaand Azure API Management-exemplaar dat een eindpunt beschikbaar maakt via de volgende locatie.
https://my-api-management-instance.azure-api.net/api/getProducts
Zodra de koppeling is gemaakt, hebt u toegang tot hetzelfde eindpunt via het api pad vanuit uw statische web-app, zoals wordt weergegeven in deze voorbeeld-URL.
https://red-sea-123.azurestaticapps.net/api/getProducts
Beide URL's verwijzen naar hetzelfde API-eindpunt. Het eindpunt op het API Management-exemplaar moet het /api voorvoegsel hebben, omdat Static Web Apps overeenkomt met aanvragen naar /api en proxy's het volledige pad naar de gekoppelde resource.
Een Azure API Management-service koppelen
Het API Management-exemplaar koppelen aan Static Web Apps
Als u een Azure API Management-service wilt koppelen als de API-back-end voor een statische web-app, voert u de volgende stappen uit:
Ga in Azure Portal naar de statische web-app.
Selecteer API's in het navigatiemenu.
Zoek de omgeving waarnaar u de API Management-service wilt koppelen. Selecteer Koppeling.
Selecteer API Management in het resourcetype Back-end.
Selecteer in Abonnement het abonnement met de Azure API Management-service die u wilt koppelen.
Selecteer de Azure API Management-service in de resourcenaam.
Selecteer Koppeling.
Belangrijk
Wanneer het koppelingsproces is voltooid, worden aanvragen voor routes die beginnen met /api deze bewerking geproxied naar uw Azure API Management-service. Er worden echter standaard geen API's weergegeven. Zie API's configureren voor het ontvangen van aanvragen voor het configureren van een API Management-product om de API's toe te staan die u wilt gebruiken.
API's configureren voor het ontvangen van aanvragen
Azure API Management heeft een productfunctie waarmee wordt gedefinieerd hoe API's worden weergegeven. Als onderdeel van het koppelingsproces wordt uw API Management-service geconfigureerd met een product met de naam Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked).
Als u API's beschikbaar wilt maken voor uw gekoppelde statische web-app, voegt u deze toe aan het product.
Selecteer in het API Management-exemplaar in de portal het tabblad Producten .
Selecteer het
Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked)product.Selecteer + API toevoegen.
Selecteer de API's die u wilt weergeven vanuit uw Static Web Apps en selecteer vervolgens de koppeling Selecteren .
Het koppelingsproces past ook automatisch de volgende configuratie toe op uw API Management-service:
- Het product dat is gekoppeld aan de gekoppelde statische web-app, is geconfigureerd om een abonnement te vereisen.
- Een API Management-abonnement met de naam
Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME>wordt gemaakt en is gericht op het product met dezelfde naam. - Er wordt een binnenkomend validatie-jwt-beleid toegevoegd aan het product om alleen aanvragen toe te staan die een geldig toegangstoken van de gekoppelde statische web-app bevatten.
- De gekoppelde statische web-app is geconfigureerd om de primaire sleutel van het abonnement en een geldig toegangstoken op te nemen bij het proxyen van aanvragen naar de API Management-service.
Belangrijk
Als u het beleid validate-jwt wijzigt of de primaire sleutel van het abonnement opnieuw opgeeft, voorkomt u dat uw statische web-app aanvragen naar de API Management-service proxyt. Wijzig of verwijder het abonnement of product dat is gekoppeld aan uw statische web-app niet terwijl deze zijn gekoppeld.
Een Azure API Management-service ontkoppelen
Voer de volgende stappen uit om een Azure API Management-service los te koppelen van een statische web-app:
Ga in Azure Portal naar de statische web-app.
Zoek de omgeving die u wilt ontkoppelen en selecteer de naam van de API Management-service.
Selecteer Ontkoppelen.
Wanneer het ontkoppelingsproces is voltooid, worden aanvragen naar routes die beginnen niet /api/ meer naar uw API Management-service geproxied.
Notitie
Het API Management-product en -abonnement dat is gekoppeld aan de gekoppelde statische web-app, worden niet automatisch verwijderd. U kunt ze verwijderen uit de API Management-service.
Problemen oplossen
Als de API's niet zijn gekoppeld aan het API Management-product dat is gemaakt voor de Static Web Apps-resource, retourneert het openen van een /api route in uw statische web-app de volgende fout van API Management.
{
"statusCode": 401,
"message": "Access denied due to invalid subscription key. Make sure to provide a valid key for an active subscription."
}
Als u deze fout wilt oplossen, configureert u de API's die u in uw Static Web Apps beschikbaar wilt maken voor het product dat hiervoor is gemaakt, zoals wordt beschreven in de sectie API's configureren voor het ontvangen van aanvragen .