Erstellen einer API mit Azure Functions
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 müssen für Ihr Front-End oder Back-End keinen kompletten Server konfigurieren und warten. Diese ist ein besonderer Bonus von Azure Static Web Apps: Sie können Ihre App und Ihre API ganz einfach mit minimaler Konfiguration und Wartung 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, 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. Es ist also sinnvoll, dass Ihre API über Endpunkte verfügt, die diesen Anforderungen entsprechen.
Hier sind die vier Endpunkte:
| 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 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. Bald fügen Sie eine API hinzu und verbinden sie mit Ihrer Front-End-App. Ihr Repository verfügt über ein Api-Projekt, das 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. Sie vervollständigen die API des Azure Functions-Projekts und fügen die fehlende Funktion hinzu. Dann verbinden Sie Ihre 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. Sie nehmen mehrere Änderungen vor, wenn Sie die API für Ihre App fertigstellen, also erstellen Sie einen Branch für diese Änderungen.
Nachdem Sie die Änderungen vorgenommen haben, möchten Sie sehen, wie sie ausgeführt werden, bevor Sie sich entscheiden, die Änderungen zusammenzuführen. Sobald Sie einen Pull Request von Ihrem neuen Branch auf den main-Branch erstellt haben, erstellt die GitHub-Aktion Ihre App und Ihre API und stellt beide unter einer Vorschau-URL bereit. Diese Vorschau-URL ermöglicht es Ihnen, Ihre Web-App mit Azure Static Web Apps auszuführen, aber auch eine zweite URL mit den Ergebnissen Ihres Pull Requests anzuzeigen.
Konfigurieren der Kommunikation zwischen Ihrer Web-App und der API
Wenn Sie Ihre API 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 Aktion 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.