Erste Schritte mit AWS

Erstellen einer einfachen Webanwendung

Bereitstellen einer Webanwendung und Einrichten der Interaktivität mit einer API und einer Datenbank

Einführung
Webanwendung erstellen
Erstellen einer serverlosen Funktion
Erstellen einer Datentabelle
Einrichten der Interaktivität der Webanwendung

In diesem Modul stellen Sie Ihre serverlose Funktion mithilfe von API Gateway bereit.

Einführung

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 serverlosen Back-End, das wir in Modul 2 erstellt haben.

Sie lernen Folgendes:

  • Erstellen einer neuen API mit API Gateway
  • Definieren von HTTP (Hypertext Transfer Protocol)-Methoden auf Ihrer API
  • Auslösen einer Lambda-Funktion über eine API
  • CORS auf einer API aktivieren, damit Sie es über eine Website 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 Program Interface“. Daher handelt es sich bei der RESTful-API um eine API, die dieses architektonische Muster 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 Der CORS (Cross Origin Resource Sharing)-Mechanismus verwendet HTTP-Header, um einen Browser anzuweisen, eine festgelegte Webanwendung zuzulassen, die an einem Ursprung (Domäne) ausgeführt wird, und ausgewählten Ressourcen auf einem Server an einem anderen Ursprung Zugriffsberechtigungen zu erteilen.

Edge Optimized (Edge-optimiert) Eine Ressource, die die globale AWS-Infrastruktur verwendet, um Kunden auf der ganzen Welt besser zu dienen.

 Veranschlagte Zeit

5 Minuten

 Verwendete Services

Amazon API Gateway

Implementierung

    1. Melden Sie sich an der API Gateway-Konsole an.
    2. Klicken Sie auf die orangefarbene Schaltfläche „Create API (API erstellen)“.
    3. Suchen Sie das Feld REST-API und klicken Sie auf die orangefarbene Schaltfläche „Create (Erstellen)“ darin.
    4. Wählen Sie unter „Choose the protocol (Protokoll auswählen)“ REST aus.
    5. Wählen Sie unter „Create new API (Neue API erstellen)“ New API (Neue API) aus.
    6. Geben Sie in das Feld „API name (API-Name)“ HelloWorldAPI ein.
    7. Wählen Sie Edge-optimiert im Dropdown-Feld „Endpoint Type (Endpunkt-Typ)“ aus (Hinweis: Edge-optimierte Endpunkte sind für geografisch verteilte Clients am besten. Daher ist er eine gute Wahl für öffentliche Services, auf die über das Internet zugegriffen wird. Regionale Endpunkte werden typischerweise für APIs verwendet, auf die primär von der gleichen AWS-Region aus zugegriffen wird.)
    8. Klicken Sie auf die blaue Schaltfläche „Create API (API erstellen)“. Die Einstellungen sollten wie der folgende Screenshot aussehen:
    1. Klicken Sie im linken Navigationsbereich unter Ihrer HelloWorld-API auf Resources (Ressourcen).
    2. Klicken Sie bei ausgewählter Ressource „/“ im Dropdown-Menü „Action (Aktion)“ auf Create Method (Methode erstellen).
    3. Wählen Sie POST aus der neu angezeigten Dropdown-Liste aus und klicken Sie dann auf das Häkchen.
    4. Wählen Sie Lambda Function (Lambda-Funktion) für den Integrationstyp aus.
    5. Geben Sie HelloWorldFunction in das Feld „Function (Funktion)“ ein.
    6. Klicken Sie auf die blaue Schaltfläche „Save (Speichern)“.
    7. Sie sehen eine Nachricht, die Sie informiert, dass Sie der API, die Sie erstellen, die Berechtigung zum Aufrufen Ihrer Lambda-Funktion erteilen. Klicken Sie auf die Schaltfläche OK.
    8. Wählen Sie bei Auswahl der neu erstellten POST-Methode im Dropdown-Menü „Action (Aktionen)“ die Option Enable CORS (CORS aktivieren) aus.
    9. Lassen Sie das Kontrollkästchen „POST“ aktiviert und klicken Sie auf die blaue Schaltfläche Enable CORS and replace existing CORS headers (CORS aktivieren und bestehende CORS-Header ersetzen).

    10. Sie sehen eine Nachricht, in der Sie aufgefordert werden, die Änderungen der Methode zu bestätigen. Klicken Sie auf die blaue Schaltfläche Yes, replace existing values (Ja, bestehende Werte ersetzen).

    1. Wählen Sie in der Dropdown-Liste Actions (Aktionen) Deploy API (API bereitstellen) aus.
    2. Wählen Sie [New Stage (Neue Stufe)] aus der Dropdown-Liste Deployment stage (Bereitstellungsstufe) aus.
    3. Geben Sie dev als Stage Name (Stufenname) ein.
    4. Wählen Sie Deploy (Bereitstellen).
    5. Kopieren und speichern Sie die URL neben „Invoke URL (URL aufrufen)“ (Sie benötigen sie in Modul 5).
    1. Klicken Sie im linken Navigationsbereich auf Resources (Ressourcen).
    2. Die Methoden für unsere API werden jetzt rechts aufgelistet. Klicken Sie auf POST.
    3. Klicken Sie auf den kleinen blauen Blitz.
    4. Fügen Sie Folgendes in das Feld „Request Body (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.

War das Modul hilfreich?

 Feedback
Modul 4 starten

Erstellen einer Datentabelle