API-Unterstützung in Azure Static Web Apps mit Azure API Management
Azure API Management ist ein Dienst, mit dem Sie ein modernes API-Gateway für vorhandene Back-End-Dienste erstellen können.
Wenn Sie Ihren Azure API Management-Dienst mit Ihrer statischen Web-App verknüpfen, werden alle Anforderungen an Ihre statische Web-App mit einer Route, die mit /api beginnt, an dieselbe Route im der Azure API Management-Dienst weitergeleitet.
Ein Azure-API Management-Dienst kann gleichzeitig mit mehreren statischen Web-Apps verknüpft werden. Für jede verknüpfte statische Web-App wird ein API Management-Produkt erstellt. Alle APIs, die dem Produkt hinzugefügt werden, sind für die zugeordnete statische Web-App verfügbar.
Alle Azure API Management-Tarife stehen für die Verwendung mit Azure Static Web Apps zur Verfügung.
API-Optionen für Static Web Apps umfassen die folgenden Azure-Dienste:
Weitere Informationen finden Sie in der Übersicht über APIs.
Hinweis
Die Integration in Azure API Management erfordert den Statischen Web-Apps Standardplan.
Back-End-Integration wird in statischen Web-Apps Pullanforderungsumgebungen nicht unterstützt.
Voraussetzungen
Um eine API-Verwaltungsinstanz mit Ihrer statischen Web-App zu verknüpfen, müssen Sie über eine vorhandene Azure API Management-Ressource und eine statische Web-App verfügen.
| Resource | Beschreibung |
|---|---|
| Azure API Management | Wenn Sie noch keins haben, führen Sie die Schritte im Leitfaden zum Erstellen eines neuen Azure API Management-Dienstinstanzen aus . |
| Vorhandene statische Web-App | Wenn Sie noch keine besitzen, führen Sie die Schritte in der Anleitung zu den ersten Schritten aus, um eine statische Web-App ohne Framework zu erstellen. |
Beispiel
Erwägen Sie eine vorhandene Azure API Management-Instanz, die einen Endpunkt über den folgenden Speicherort verfügbar macht.
https://my-api-management-instance.azure-api.net/api/getProducts
Nach der Verknüpfung können Sie von Ihrer statischen Web-App über den api-Pfad auf denselben Endpunkt zugreifen, wie in dieser Beispiel-URL gezeigt.
https://red-sea-123.azurestaticapps.net/api/getProducts
Beide URLs verweisen auf denselben API-Endpunkt. Der Endpunkt in der API-Verwaltungsinstanz muss das /api Präfix aufweisen, da Static Web-Apps Anforderungen /api an und Proxys den gesamten Pfad zur verknüpften Ressource abgleicht.
Verknüpfen eines Azure API Management-Diensts
Verknüpfen der API-Verwaltungsinstanz mit statischem Web-Apps
Führen Sie die folgenden Schritte aus, um einen Azure-API Management-Dienst als API-Back-End für eine statische Web-App zu verknüpfen:
Wechseln Sie im Azure-Portal zur statischen Web-App.
Wählen Sie im Navigationsmenü APIs aus.
Suchen Sie die Umgebung, mit der Sie den API Management-Dienst verknüpfen möchten. Link wählen.
Wählen Sie bei Back-End-Ressourcentyp die Option API Management aus.
Wählen Sie bei Abonnement das Abonnement aus, das die Azure API Management-App enthält, die Sie verknüpfen möchten.
Wählen Sie bei Ressourcenname den Azure-API Management-Dienst aus.
Link wählen.
Wichtig
Wenn der Verknüpfungsprozess abgeschlossen ist, werden Anforderungen an Routen, die mit /api beginnen, an Ihren Azure-API Management-Dienst weitergeleitet. Standardmäßig werden jedoch keine APIs verfügbar gemacht. Siehe Konfigurieren von APIs zum Empfangen von Anforderungen zum Konfigurieren eines API-Verwaltungsprodukts, um die APIs zuzulassen, die Sie verwenden möchten.
Konfigurieren von APIs zum Empfangen von Anforderungen
Azure API Management verfügt über ein Produktfeature, das definiert, wie APIs angezeigt werden. Im Rahmen des Verknüpfungsprozesses wird Ihr API Management-Dienst mit einem Produkt mit dem Namen Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) konfiguriert.
Um APIs für Ihre verknüpfte statische Web-App verfügbar zu machen, fügen Sie sie dem Produkt hinzu.
Wählen Sie in der API-Verwaltungsinstanz im Portal die Registerkarte "Produkte " aus.
Wählen Sie das
Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked)Produkt aus.Wählen Sie + API hinzufügen aus.
Wählen Sie die APIs aus, die Sie aus Ihrem statischen Web-Apps verfügbar machen möchten, und wählen Sie dann den Link "Auswählen" aus.
Der Verknüpfungsprozess wendet auch automatisch die folgende Konfiguration auf Ihren API Management-Dienst an:
- Das der verknüpften statischen Web-App zugeordnete Produkt ist so konfiguriert, dass ein Abonnement erforderlich ist.
- Ein API Management-Abonnement mit dem Namen
Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME>wird erstellt, und der Gültigkeitsbereich wird auf das Produkt mit demselben Namen festgelegt. - Dem Produkt wird eine eingehende validate-jwt-Richtlinie hinzugefügt, um nur Anforderungen zuzulassen, die ein gültiges Zugriffstoken aus der verknüpften statischen Web-App enthalten.
- Die verknüpfte statische Web-App ist so konfiguriert, dass beim Weiterleiten von Anforderungen an den API Management-Dienst der Primärschlüssel des Abonnements und ein gültiges Zugriffstoken eingeschlossen werden.
Wichtig
Wenn Sie die validate-jwt-Richtlinie ändern oder den Primärschlüssel des Abonnements neu generieren, kann Ihre statische Web-App keine Anforderungen mehr an den API Management-Dienst weiterleiten. Ändern oder löschen Sie das Abonnement oder Produkt nicht, das Ihrer statischen Web-App zugeordnet ist, während die Verknüpfung besteht.
Aufheben der Verknüpfung eines Azure API Management-Diensts
Führen Sie die folgenden Schritte aus, um die Verknüpfung eines Azure-API Management-Diensts mit einer statischen Web-App aufzuheben:
Wechseln Sie im Azure-Portal zur statischen Web-App.
Suchen Sie die Umgebung, deren Verknüpfung Sie aufheben möchten, und wählen Sie den Namen des API Management-Diensts aus.
Wählen Sie Verknüpfung aufheben aus.
Wenn der Prozess der Aufhebung der Verknüpfung abgeschlossen ist, werden Anforderungen an Routen, die mit /api/ beginnen, nicht mehr an Ihren API Management-Dienst weitergeleitet.
Hinweis
Das der verknüpften statischen Web-App zugeordnete API Management-Produkt und das zugehörige Abonnement werden nicht automatisch gelöscht. Sie können sie aus dem API Management-Dienst löschen.
Problembehandlung
Wenn die APIs nicht dem API-Verwaltungsprodukt zugeordnet sind, das für die Statische Web-Apps-Ressource erstellt wurde, gibt der Zugriff auf eine /api Route in Ihrer statischen Web-App den folgenden Fehler aus der API-Verwaltung zurück.
{
"statusCode": 401,
"message": "Access denied due to invalid subscription key. Make sure to provide a valid key for an active subscription."
}
Um diesen Fehler zu beheben, konfigurieren Sie die APIs, die Sie innerhalb Ihrer statischen Web-Apps für das dafür erstellte Produkt verfügbar machen möchten, wie im Abschnitt "Konfigurieren von APIs zum Empfangen von Anforderungen" beschrieben.