Erstellen einer API mit Azure Functions

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

Azure-Funktionen

Einer der größten Vorteile von Azure Static Web Apps besteht darin, dass sie Ihre Web-App und eine mit Azure Functions integrierte API hosten. 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 vollständigen Server, damit Ihr Front-End oder Back-End konfiguriert und verwaltet werden kann. Mit Azure Static Web Apps erreichen Sie den süßen Punkt: Sie erhalten die einfache Veröffentlichung Ihrer App und API mit minimaler Konfiguration und Wartung.

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 auf der Registerkarte "Übersicht " im Portal finden können. Die API ist über dieselbe URL verfügbar, indem Sie /api an die URL anhängen.

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 aufweisen sollte, die diesen Anforderungen entsprechen.

Hier sind die vier Endpunkte, die Sie erstellen:

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 weitere 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. In Kürze können Sie eine API hinzufügen und mit Ihrer Front-End-App verbinden. Ihr Repository verfügt über einen api-starter Ordner, der ein unvollständiges Azure Functions-Projekt und HTTP-Endpunkte für PUT, POST und DELETE Ihrer Produkte enthält. In der API fehlt die HTTP GET-Funktion. Schließen Sie die API des Azure Functions-Projekts ab, und fügen Sie die fehlende Funktion hinzu. Verbinden Sie dann Ihre API mit Ihrer Front-End-Web-App.

Anzeigen einer Vorschau von Änderungen an Ihrer 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 die Änderungen in Aktion sehen, bevor Sie sich entscheiden, sie zusammenzuführen. Nachdem Sie eine Pull-Anforderung von Ihrer neuen Verzweigung zum Hauptzweig erstellt haben, erstellt die GitHub-Aktion Ihre App und API und stellt sie in einer Vorschau-URL bereit. Mit diesem Feature können Sie Ihre Web-App mit Azure Static Web Apps ausführen, sehen aber auch eine zweite Vorschauinstanz mit den Ergebnissen Ihrer Pullanforderung.

Kommunikation zwischen Ihrer Web-App und DER API

Wenn Sie Ihre API lokal mit Azure Functions ausführen, wird sie standardmäßig auf Port 7071 ausgeführt. Ihre Web-App wird an einem anderen lokalen Port ausgeführt. Wenn Ihre Web-App versucht, eine HTTP-Anforderung vom Port zum Port 7071 Ihrer API zu senden, wird die 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.