Eigene Funktionen (Bring Your Own Functions) in Azure Static Web Apps einführen

  • Artikel

Azure Static Web-Apps bietet API-Integration, mit der Sie Front-End-Webanwendungen erstellen können, die von Back-End-APIs für Daten und Dienste abhängen. Die beiden API-Integrationsoptionen sind: verwaltete Funktionen und bringen Eigene Back-Ends mit. Weitere Informationen zu den Unterschieden zwischen diesen Optionen finden Sie in der Übersicht.

Dieser Artikel veranschaulicht, wie Sie eine vorhandene Azure Functions-App mit einer Azure Static Web Apps-Ressource verknüpfen.

Hinweis

Die Integration mit Azure Functions erfordert den Statischen Web-Apps Standardplan.

Back-End-Integration wird in statischen Web-Apps Pullanforderungsumgebungen nicht unterstützt.

Voraussetzungen

Um eine Funktions-App mit Ihrer statischen Web-App zu verknüpfen, müssen Sie über eine vorhandene Azure Functions-Ressource und eine statische Web-App verfügen.

Resource Beschreibung
Azure-Funktionen Wenn Sie noch keins haben, führen Sie die Schritte im Leitfaden "Erste Schritte mit Azure Functions" 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

Sie haben eine Azure Functions-App, die einen Endpunkt über den folgenden Speicherort verfügbar macht.

https://my-functions-app.azurewebsites.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 Endpunkt-URLs zeigen auf dieselbe Funktion. Der Endpunkt der Funktions-App muss das /api Präfix aufweisen, da static Web-Apps Anforderungen /api an und Proxys den gesamten Pfad zur verknüpften Ressource abgleicht.

Entfernen von verwalteten Funktionen aus der statischen Web-Apps-Ressource (sofern vorhanden)

Bevor Sie eine vorhandene Funktionen-App zuordnen, müssen Sie zuerst die Konfiguration Ihrer statischen Web-App anpassen, um verwaltete Funktionen zu entfernen, falls vorhanden.

  1. Legen Sie den api_location-Wert in der Datei für die Workflowkonfiguration auf eine leere Zeichenfolge ("") fest.

  1. Öffnen Sie Ihre Static Web Apps-Instanz im Azure-Portal.

  2. Wählen Sie im Menü Einstellungen die Option APIs aus.

  3. Wählen Sie in der Zeile Produktion die Option Link aus, um das Fenster Neues Back-End verknüpfen zu öffnen.

    Geben Sie folgende Einstellungen ein.

    Einstellung Wert
    Back-End-Ressourcentyp Wählen Sie Funktions-App aus.
    Subscription Wählen Sie den Namen Ihres Azure-Abonnements aus.
    Ressourcenname Wählen Sie den Namen der Azure Functions-App aus.
    Back-End-Slot Wählen Sie den Slotnamen für die Azure-Funktion aus.

  4. Link wählen.

Die Azure Functions-App ist jetzt der /api-Route Ihrer statischen Web-App zugeordnet.

Wichtig

Stellen Sie sicher, dass Sie den api_location-Wert in der Datei für die Workflowkonfiguration auf eine leere Zeichenfolge ("") festlegen, bevor Sie eine vorhandene Functions-Anwendung verknüpfen. Aufrufe setzen ferner voraus, dass die externe Funktions-App das Standardroutenpräfix api beibehält. Viele Apps entfernen dieses Präfix in der Datei host.json. Stellen Sie sicher, dass das Präfix in der Konfiguration vorhanden ist, da der Aufruf andernfalls fehlschlägt.

Bereitstellung

Sie sind für die Einrichtung eines Bereitstellungsworkflows für Ihre Azure Functions-App zuständig.

Führen Sie die folgenden Schritte aus, um die Verknüpfung einer Funktions-App aus einer statischen Web-App aufzuheben:

  1. Wechseln Sie im Azure-Portal zur statischen Web-App.

  2. Wählen Sie im Navigationsmenü APIs aus.

  3. Suchen Sie die Umgebung, die Sie aufheben möchten, und wählen Sie den Namen der Funktions-App aus.

  4. Wählen Sie Verknüpfung aufheben aus.

Wenn der Vorgang zum Aufheben der Verknüpfung abgeschlossen ist, werden Anforderungen an Routen, die beginnen /api , nicht mehr an Ihre Azure Functions-App weitergeleitet.

Hinweis

Um zu verhindern, dass Ihre Funktions-App versehentlich anonymen Datenverkehr verfügbar macht, wird der vom Verknüpfungsprozess erstellte Identitätsanbieter nicht automatisch gelöscht. Sie können den Identitätsanbieter namens Azure Static Web-Apps (Linked) aus den Authentifizierungseinstellungen der Funktions-App löschen.

Entfernen der Authentifizierung aus der Azure Functions-Ressource

Führen Sie die folgenden Schritte aus, um Ihre Azure Functions-App für anonymen Datenverkehr zu aktivieren, um den Identitätsanbieter zu entfernen:

  1. Navigieren Sie im Azure-Portal zur Azure Functions-Ressource.

  2. Wählen Sie im Navigationsmenü die Option "Authentifizierung " aus.

  3. Löschen Sie aus der Liste der Identitätsanbieter den Identitätsanbieter im Zusammenhang mit der Static Web-Apps-Ressource.

  4. Wählen Sie "Authentifizierung entfernen" aus, um die Authentifizierung zu entfernen und anonymen Datenverkehr für Ihre Azure Functions-Ressource zuzulassen.

Ihre Funktions-App kann jetzt anonymen Datenverkehr empfangen.

Sicherheitseinschränkungen

  • Authentifizierung und Autorisierung: Wenn für Ihre vorhandene Functions-App noch keine Authentifizierungs- und Autorisierungsrichtlinien eingerichtet wurden, hat die statische Web-App exklusiven Zugriff auf die API. Damit andere Anwendungen auf Ihre Functions-App zugreifen können, fügen Sie einen anderen Identitätsanbieter hinzu, oder ändern Sie die Sicherheitseinstellungen, um nicht authentifizierten Zugriff zuzulassen.

    Hinweis

    Wenn Sie die Authentifizierung und Autorisierung in Ihrer verknüpften Functions-App aktivieren, muss diese die Azure App Service-Authentifizierung und -Autorisierung Version 2 des Anbieters verwenden.

  • Erforderlicher öffentlicher Zugriff: Eine vorhandene Functions-App darf die folgenden Sicherheitskonfigurationen nicht anwenden.

    • Einschränken der IP-Adresse der Functions-App
    • Einschränken des Datenverkehrs über private Links oder Dienstendpunkte

  • Funktionszugriffsschlüssel: Wenn Ihre Funktion einen Zugriffsschlüssel erfordert, müssen Sie den Schlüssel mit Aufrufen von der statischen App an die API bereitstellen.

Beschränkungen

  • Für eine einzelne statische Web-App ist nur eine Azure Functions-App verfügbar.
  • Der api_location-Wert in der Workflowkonfiguration muss auf eine leere Zeichenfolge festgelegt werden.
  • Wird in Static Web Apps Pull Request-Umgebungen nicht unterstützt.
  • Während Ihre Azure Functions-App möglicherweise auf verschiedene Trigger reagiert, kann die statische Web-App nur über HTTP-Endpunkte auf Funktionen zugreifen.

Nächste Schritte

Hinzufügen einer API zu Azure Static Web Apps (Vorschauversion) mit Azure Functions