Erstellen einer API mit Azure Functions

  • 3 Minuten

Jetzt ist es an der Zeit, dass Sie eine API für Ihre Einkaufslisten-App erstellen.

Azure Functions

Einer der größten Vorteile von Azure Static Web Apps besteht darin, dass Ihre Web-App und eine mit Azure Functions erstellte API zusammen gehostet werden. Azure Static Web Apps verteilt die statischen Ressourcen Ihrer Web-App global und hostet Ihre API in Azure Functions. Mit diesem Setup können Sie von der Verfügbarkeit und Geschwindigkeit profitieren, die mit der globalen Verteilung Ihrer Web-App-Ressourcen verbunden sind.

Auch das, was Sie nicht benötigen, ist von Vorteil.

Sie benötigen keinen kompletten Server, der für Ihr Front-End oder Back-End konfiguriert und gewartet werden muss. Mit Azure Static Web Apps können Sie Ihre App und Ihre API mühelos mit minimalem Konfigurations- und Wartungsaufwand veröffentlichen.

Azure Functions stellt Ihre Routenendpunkte bereit, es muss kein kompletter Back-End-Server konfiguriert und gewartet werden, und das automatische Auf- und Abskalieren bei Bedarf ist möglich. Diese Funktionen machen Azure Functions zu einem hervorragenden API-Partner für Ihre Einkaufslisten-Web-App, die statische Ressourcen bereitstellt.

Azure Static Web Apps generiert eine eindeutige URL für Ihre Website, die Sie im Portal auf der Registerkarte Übersicht finden. Die API ist über dieselbe URL verfügbar. Hierfür müssen Sie einfach /api an die URL anfügen.

Ihre Einkaufslisten-API

Mit Ihrer Einkaufslisten-App können Personen Einträge ihrer Liste abrufen und Einträge in der Liste hinzufügen, aktualisieren und löschen. Daher ist es sinnvoll, dass Ihre API Endpunkte enthält, die diesen Anforderungen entsprechen.

Die folgenden vier Endpunkte müssen Sie erstellen:

Methoden Routenendpunkte Vollständiger API-Endpunkt
GET products api/products
POST products api/products
PUT products/:id api/products/:id
DELETE products/:id api/products/:id

Beachten Sie, dass Ihre HTTP GET Anforderungen auf api/products verweisen. Das Präfix api ist für Ihre API-Endpunkte in der App reserviert. Sie können beliebige andere Routen entsprechend den jeweiligen Anforderungen Ihrer Site definieren, api zeigt jedoch stets auf die Azure Functions-App.

Erstellen einer API für die Web-App

Bisher haben Sie ein Front-End-Framework verwendet. Bald können Sie eine API hinzufügen und sie mit Ihrer Front-End-App verbinden. Ihr Repository verfügt über den Ordner api-starter, der ein unvollständiges Azure Functions-Projekt sowie HTTP-Endpunkte für PUT-, POST- und DELETE-Anforderungen für Ihre Produkte enthält. In der API fehlt die HTTP GET-Funktion. Vervollständigen Sie die API des Azure Functions-Projekts, und fügen Sie die fehlende Funktion hinzu. Anschließend verbinden Sie die API mit Ihrer Front-End-Web-App.

Anzeigen der Vorschau von Änderungen an der Web-App

Bevor Sie Änderungen an einer App vornehmen, empfiehlt es sich, einen neuen Branch für die Änderungen zu erstellen. Da Sie mehrere Änderungen vornehmen, wenn Sie die API für Ihre App fertigstellen, sollten Sie einen Branch für diese Änderungen erstellen.

Nachdem Sie die Änderungen vorgenommen haben, möchten Sie sie bei der Ausführung testen, bevor Sie eine Entscheidung über das Zusammenführen der Änderungen treffen. Sobald Sie einen Pull Request aus Ihrem neuen Branch zum Branch main erstellt haben, kompiliert die GitHub Action die App und die API und stellt diese unter einer Vorschau-URL bereit. Mithilfe dieses Features können Sie die Web-App weiterhin mit Azure Static Web Apps ausführen, sehen aber gleichzeitig eine zweite Vorschauinstanz mit den Ergebnissen Ihres Pull Requests.

Kommunikation zwischen Ihrer Web-App und der API

Wenn Sie Ihre API mit Azure Functions lokal ausführen, wird sie standardmäßig an Port 7071 ausgeführt. Ihre Web-App wird an einem anderen lokalen Port ausgeführt. Wenn Ihre Web-App versucht, eine HTTP-Anforderung von ihrem Port an den Port 7071 Ihrer API zu senden, wird diese Anforderung als Cross-Origin Resource Sharing (CORS) bezeichnet. Ihr Browser verhindert, dass die HTTP-Anforderung abgeschlossen wird, wenn der API-Server die Fortsetzung der Anforderung nicht zulässt.

Wenn Sie in Azure Static Web Apps veröffentlichen, müssen Sie sich keine Gedanken über CORS machen. Azure Static Web Apps konfiguriert Ihre App automatisch so, dass Sie mit der API in Azure über einen Reverseproxy kommunizieren kann. Ein Reverseproxy sorgt dafür, dass die Web-App und die API so behandelt werden, als ob sie aus derselben Webdomäne stammen. Daher müssen Sie für die lokale Ausführung nur CORS einrichten.

Nächste Schritte

Nun können Sie Ihre API erstellen und die HTTP-Endpunkte für Ihre Einkaufslisten-App konfigurieren.