Erstellen einer einfachen Webanwendung
TUTORIAL
Modul 3: Verknüpfen einer Serverless-Funktion mit einer Webanwendung
In diesem Modul stellen Sie Ihre Serverless-Funktion mithilfe von Amazon API Gateway bereit.
Übersicht
In diesem Modul verwenden wir Amazon API Gateway, um eine RESTful-API zu erstellen, die uns das Aufrufen unserer Lambda-Funktion über einen Webclient ermöglicht (bezieht sich in der Regel auf den Webbrowser eines Benutzers). API Gateway fungiert als mittlere Ebene zwischen dem HTML-Client, den wir in Modul 1 erstellt haben, und dem Serverless-Backend, das wir in Modul 2 erstellt haben.
Was Sie erreichen werden
In diesem Modul werden Sie Folgendes lernen:
- Erstellen einer neuen API mit API Gateway
- Definieren von HTTP-Methoden auf Ihrer API
- Auslösen einer Lambda-Funktion über eine API
- Aktivieren von Cross-Origin Resource Sharing (CORS) auf einer API, damit Sie Ressourcen von einem anderen Ursprung (Domain) nutzen können
- Testen einer API, die mit API Gateway über die AWS-Managementkonsole erstellt wurde
Wichtige Konzepte
RESTful-API – REST steht für „Representational State Transfer“ und ist ein architektonisches Muster zum Erstellen von Web-Services. API steht für „Application Programming Interface.“ Daher handelt es sich bei der RESTful-API um eine API, die das REST-Architekturmuster implementiert.
HTTP Request Methods (HTTP-Anforderungsmethoden) – HTTP-Methoden sollen die Kommunikation zwischen Clients und Servern ermöglichen. Methoden, die wie GET oder PUT vom HTTP-Protokoll definiert werden, werden verwendet, um anzugeben, welche Aktion an einer Ressource ausgeführt werden soll.
CORS – Die Sicherheitsfunktion des CORS-Browsers verwendet HTTP-Header, um einem Browser mitzuteilen, dass er einer bestimmten Webanwendung, die an einem Ursprung (Domain) ausgeführt wird, den Zugriff auf ausgewählte Ressourcen von einem Server an einem anderen Ursprung aus ermöglichen soll.
Edge Optimized (Edge-optimiert) – Eine Ressource, die die globale AWS-Infrastruktur verwendet, um Kunden auf der ganzen Welt besser zu dienen.
Minimale Bearbeitungszeit
5 Minuten
Verwendete Services
Letzte Aktualisierung
Implementierung
-
Neue REST-API erstellen
- Melden Sie sich bei der API-Gateway-Konsole an.
- Suchen Sie im Abschnitt API-Typ auswählen nach der REST-API-Karte und klicken Sie auf der Karte auf die Schaltfläche Erstellen.
- Wählen Sie unter Protokoll auswählen REST aus.
- Wählen Sie unter Neue API erstellen Neue API aus.
- Geben Sie in das Feld API-Name HelloWorldAPI ein.
- Wählen Sie Edge-optimiert aus der Dropdownliste Endpunkt-Typ aus. (Hinweis: Edge-optimierte Endpunkte eignen sich am besten für geografisch verteilte Clients. Dies macht sie zu einer guten Wahl für öffentliche Services, auf die über das Internet zugegriffen werden kann. Regionale Endpunkte werden typischerweise für APIs verwendet, auf die primär von der gleichen AWS-Region aus zugegriffen wird.)
- Klicken Sie auf die blaue Schaltfläche API erstellen. Ihre Einstellungen sollten wie der beigefügte Screenshot aussehen.
-
Neue Ressource und Methode erstellen
- Wählen Sie im linken Navigationsbereich Ressourcen unter API: HelloWorldAPI aus.
- Stellen Sie sicher, dass die Ressource „/“ ausgewählt ist.
- Wählen Sie im Dropdownmenü Aktionen die Option Methode erstellen aus.
- Wählen Sie POST aus der neu angezeigten Dropdown-Liste aus und wählen Sie dann das Häkchen aus.
- Wählen Sie Lambda-Funktion für den Integrationstyp aus.
- Wählen Sie die Lambda-Region aus, die Sie bei der Erstellung der Funktion verwendet haben (andernfalls wird ein Warnfeld mit der Aufschrift „Sie haben keine Lambda-Funktionen in...“).
- Geben Sie HelloWorldFunction in das Feld Lambda-Funktion ein.
- Wählen Sie die blaue Schaltfläche Speichern aus.
- Sie sehen eine Nachricht, die Sie informiert, dass Sie der API, die Sie erstellen, die Berechtigung zum Aufrufen Ihrer Lambda-Funktion erteilen. Wählen Sie die Schaltfläche Okay.
- Wählen Sie die neu erstellte POST-Methode aus und wählen Sie CORS aktivieren aus dem Dropdown-Menü Aktion aus.
- Lassen Sie das Kontrollkästchen „POST“ aktiviert und klicken Sie auf die blaue Schaltfläche CORS aktivieren und bestehende CORS-Header ersetzen.
10. Sie sehen eine Nachricht, in der Sie aufgefordert werden, die Änderungen der Methode zu bestätigen. Wählen Sie die blaue Schaltfläche Ja, bestehende Werte ersetzen.
-
Bereitstellen der API
- Wählen Sie in der Dropdown-Liste Aktionen API bereitstellen aus.
- Wählen Sie [Neue Stufe] aus der Dropdown-Liste Bereitstellungsstufe aus.
- Geben Sie dev als Stufenname ein.
- Wählen Sie Bereitstellen.
- Kopieren und speichern Sie die URL neben URL aufrufen (Sie benötigen sie in Modul 5).
-
Validieren der API
- Wählen Sie im linken Navigationsbereich Ressourcen.
- Die Methoden für unsere API werden jetzt rechts aufgelistet. Wählen Sie POST aus.
- Klicken Sie auf den kleinen blauen Blitz.
- Fügen Sie Folgendes in das Feld Anforderungstext ein:
{ "firstName":"Grace", "lastName":"Hopper" }5. Klicken Sie auf die blaue Schaltfläche Test.
6. Rechts sehen Sie eine Antwort mit Code 200.
7. Prima! Wir haben eine API erstellt und getestet, die unsere Lambda-Funktion aufruft.
Anwendungsarchitektur
Modul 3 ist jetzt abgeschlossen. Zeit zur Überprüfung unserer Architektur:
Wir haben API Gateway hinzugefügt und mit unserer vorhandenen Lambda-Funktion verbunden. Jetzt können wir unsere Funktion mit einem API-Aufruf auslösen. Wir bräuchten allerdings immer noch eine Möglichkeit, diesen Aufruf über unseren Webclient zu generieren. Wir fügen erst unsere Datentabelle in Modul 4 hinzu und verbinden anschließend alles miteinander in Modul 5.