Projekte in AWS:

Erstellen einer serverlosen Webanwendung

mit AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB und Amazon Cognito

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

Einführung

Progression-Bar-07

Hosten einer statischen Website

Progression-Bar-08

Benutzer verwalten

Progression-Bar-09

Erstellen eines serverlosen Backends

Progression-Bar-16

Bereitstellen einer RESTful-API

Progression-Bar-11

Beenden von Ressourcen

Modul 4. RESTful-APIs

In diesem Modul verwenden Sie Amazon API Gateway zur Bereitstellung der Lambda-Funktion, die Sie im vorherigen Modul als RESTful-API erstellt haben. Diese API ist über das öffentliche Internet zugänglich. Sie wird durch den Amazon Cognito-Benutzerpool geschützt, den Sie im vorherigen Modul erstellt haben. Anschließend verwenden Sie diese Konfiguration, um aus Ihrer statisch gehosteten Website eine dynamische Webanwendung zu machen, indem Sie clientseitig JavaScript hinzufügen, wodurch AJAX die bereitgestellten APIs aufruft.

Übersicht über die Architektur

Serverless_Web_App_LP_assets-05

Im Diagramm oben sehen Sie, wie die API Gateway-Komponente, die Sie in diesem Modul erstellen, in vorhandene Komponenten integriert wird, die Sie zuvor erstellt haben. Bei den ausgegrauten Elementen handelt es sich um Bestandteile, die Sie bereits in den vorherigen Schritten implementiert haben.

Für die statische Website, die Sie im ersten Modul bereitgestellt haben, ist bereits eine Seite konfiguriert. Diese interagiert mit der API, die Sie in diesem Modul erstellen. Die Seite unter /ride.html bietet eine kartenbasierte Oberfläche zum Anfordern eines Ritts auf einem Einhorn. Nach der Authentifizierung über die Seite /signin.html können Ihre Benutzer den Abholort auswählen. Dazu klicken Sie auf der Karte auf einen Ort und fordern dann durch Auswahl von „Einhorn anfordern“ oben rechts einen Ritt an.

In diesem Modul konzentrieren wir uns auf die Schritte zum Erstellen der Cloud-Komponenten der API. Wenn Sie sich für die Funktionsweise des Browsercodes interessieren, der diese API aufruft, sehen Sie sich die Datei ride.js der Website an. In diesem Fall verwendet die Anwendung die Methode ajax() von jQuery für eine Remoteanforderung.

Veranschlagte Zeit für das Modul: 15 Minuten

Verwendete Services: Amazon API Gateway und AWS Lambda

Implementierungsanweisungen

Befolgen Sie die folgende schrittweise Anleitung zur Erstellung Ihrer REST-API. Klicken Sie auf die Nummer eines jeweiligen Schritts, um den Bereich zu erweitern.

  • Schritt 1. Neue REST-API erstellen

    Neue REST-API erstellen

    1. Klicken Sie in der AWS-Managementkonsole auf Services und dann unter „Anwendungs-Services“ auf API Gateway.

    2. Wählen Sie API erstellen aus.

    3. Wählen Sie Neue API aus und geben Sie WildRydes als API-Namen ein.

    4. Stellen Sie sicher, dass Edge-optimiert in der Dropdown-Liste Endpunkttyp ausgewählt ist. Hinweis: „Edge-optimiert” eignet sich am besten für öffentliche Dienste, 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.

    5. Wählen Sie API erstellen aus

  • Schritt 2. Cognito-Benutzerpool-Genehmiger erstellen

    Cognito-Benutzerpool-Genehmiger erstellen

    Amazon API Gateway kann zur Authentifizierung von API-Aufrufen von Cognito-Benutzerpools zurückgegebene JWT-Token verwenden. In diesem Schritt konfigurieren Sie einen Genehmiger für Ihre API zur Verwendung des Benutzerpools, den Sie in Modul 2 erstellt haben.

    Erstellen Sie in der Amazon API Gateway-Konsole einen neuen Cognito-Benutzerpool-Genehmiger für Ihre API. Konfigurieren Sie diesen anhand der Details des Benutzerpools, den Sie im vorherigen Modul erstellt haben. Sie können die Konfiguration in der Konsole testen, indem Sie das Ihnen angezeigte Authentifizierungs-Token kopieren und einfügen, nachdem Sie sich über die Seite /signin.html Ihrer aktuellen Website anmelden.

    1. Wählen Sie unter Ihrer neu erstellten API Genehmiger aus.

    2. Wählen Sie Neuen Genehmiger erstellen.

    3. Geben Sie WildRydes als Genehmigernamen ein.

    4. Wählen Sie als Typ Cognito aus.

    5. Wählen Sie in der Dropdown-Liste „Region” unter Cognito-Benutzerpool die Region aus, in der Sie Ihren Cognito-Benutzerpool in Modul 2 angelegt haben (standardmäßig sollte die aktuelle Region ausgewählt sein).

    6. Geben Sie WildRydes (oder den Namen, den Sie Ihrem Benutzerpool gegeben haben) im Feld Cognito-Benutzerpool ein.

    7. Geben Sie Autorisierung für die Token-Quelle ein.

    8. Wählen Sie Erstellen aus.

    Überprüfen Ihrer Genehmigerkonfiguration

    1. Öffnen Sie ein neues Browserfenster und rufen Sie /ride.html unter Ihrer Website-Domäne auf.

    2. Wenn Sie zur Anmeldeseite weitergeleitet werden, melden Sie sich mit dem Benutzer an, den Sie im letzten Modul erstellt haben. Sie werden zurückgeleitet zu /ride.html.

    3. Kopieren Sie das Authentifizierungs-Token aus der Benachrichtigung auf der Website /ride.html.

    4. Gehen Sie zurück zur vorherigen Registerkarte, wo Sie gerade den Genehmiger angelegt haben.

    5. Klicken Sie auf Test am unteren Rand der Karte für den Genehmiger.

    6. Fügen Sie das Autorisierungs-Token in das Feld Autorisierungs-Token im Popup-Dialog ein.

    7. Klicken Sie auf die Schaltfläche Test und vergewissern Sie sich, dass der Antwortcode 200 ist und dass die Ansprüche für Ihren Benutzer angezeigt werden.

  • Schritt 3. Neue Ressource und Methode erstellen

    Neue Ressource und Methode erstellen

    Erstellen Sie eine neue Ressource mit dem Namen „/ride” in Ihrer API. Erstellen Sie anschließend eine POST-Methode für diese Ressource und konfigurieren Sie sie für die Verwendung einer Lambda-Proxy-Integration, die durch die RequestUnicorn-Funktion geschützt wird, die Sie im ersten Schritt dieses Moduls erstellt haben.

    1. Klicken Sie im linken Navigationsbereich unter Ihrer WildRydes-API auf Ressourcen.

    2. Wählen Sie im Dropdown-Menü Aktionen Ressource erstellen aus.

    3. Geben Sie ride als Ressourcennamen ein.

    4. Stellen Sie sicher, dass der Ressourcenpfad auf ride festgelegt ist.

    5. Wählen Sie API Gateway CORS aktivieren für die Ressource aus.

    6. Klicken Sie auf Ressource erstellen.

    7. Wählen Sie die neu erstellte Ressource /ride aus und wählen Sie dann im Dropdown-Menü Aktion die Option Methode erstellen aus.

    8. Wählen Sie POST aus der neu angezeigten Dropdown-Liste aus und klicken Sie dann auf das Häkchen.

    9. Wählen Sie für Target type (Zieltyp) die Option Lambda-Funktion aus.

    10. Aktivieren Sie das Kontrollkästchen für Lambda-Proxy-Integration verwenden.

    11. Wählen die Region aus, die Sie als Lambda-Region verwenden.

    12. Geben Sie als Lambda-Funktion den Namen der Funktion ein, die Sie im vorherigen Modul erstellt haben (RequestUnicorn).

    13. Wählen Sie Save (Speichern) aus. Erhalten Sie die Fehlermeldung, dass Ihre Funktion nicht existiert, stellen Sie sicher, dass die von Ihnen ausgewählte Region der entspricht, die Sie im vorherigen Modul verwendet haben.

    14. Wenn Sie aufgefordert werden, Amazon API Gateway die Berechtigung zum Aufrufen Ihrer Funktion zu erteilen, wählen Sie OK.

    15. Wählen Sie die Karte Methodenanforderung aus.

    16. Klicken Sie auf das Stiftsymbol neben Autorisierung.

    17. Wählen Sie den WildRydes-Cognito-Benutzerpool-Genehmiger aus der Dropdown-Liste aus und klicken Sie auf das Häkchensymbol.

  • Schritt 4. Ihre API bereitstellen

    Ihre API bereitstellen

    Wählen Sie in der Amazon API Gateway-Konsole „Aktionen“ und „API bereitstellen“ aus. Sie werden dazu aufgefordert, eine neue Stufe zu erstellen. Sie können als Stufennamen „Prod“ verwenden.

    1. Wählen Sie in der Dropdown-Liste Aktionen API bereitstellen aus.

    2. Wählen Sie [Neue Stufe] aus der Dropdown-Liste Bereitstellungsstufe aus.

    3. Geben Sie prod als Stufennamen ein.

    4. Wählen Sie Bereitstellen aus.

    5. Notieren Sie die Aufruf-URL. Diese verwenden Sie im nächsten Abschnitt.

  • Schritt 5. Website-Konfiguration aktualisieren

    Website-Konfiguration aktualisieren

    Aktualisieren Sie die Datei „/js/config.js” in Ihrer Website-Bereitstellung, um die Aufruf-URL der Stufe einzuschließen, die Sie soeben erstellt haben. Kopieren Sie die Aufruf-URL direkt aus dem oberen Bereich der Bearbeitungsseite für die Stufe der Amazon API Gateway-Konsole und fügen Sie sie in den Schlüssel „_config.api.invokeUrl” Ihrer Datei „sites /js/config.js” ein. Stellen Sie beim Aktualisieren der Konfigurationsdatei sicher, dass die Aktualisierungen aus dem vorherigen Modul für Ihren Cognito-Benutzerpool auch weiterhin enthalten sind.

    1. Öffnen Sie die Datei „config.js” in einem Text-Editor.

    2. Aktualisieren Sie die invokeUrl-Einstellung unter dem api-Schlüssel in der Datei „config.js”. Stellen Sie den Wert auf die Aufruf-URL für die Bereitstellungsstufe ein, die Sie im vorherigen Abschnitt erstellt haben.

      Ein Beispiel für eine vollständige config.js-Datei ist unten aufgeführt. Beachten Sie, dass die tatsächlichen Werte für Ihre Daten abweichen werden.

    window._config = {

    cognito: {

        userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb         

        userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv

        region: 'us-west-2' // e.g. us-east-2 

    }, 

    api: { 

        invokeUrl: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 

    } 

};

    1. Speichern Sie die modifizierte Datei in Ihrem Git-Repository, damit sie automatisch der Ampflify-Konsole bereitgestellt wird.

    $ git push

  • Schritt 5. Ihre Implementierung überprüfen

    Ihre Implementierung überprüfen

    Hinweis: Möglicherweise tritt zwischen dem Aktualisieren des S3-Buckets und der Anzeige des aktualisierten Inhalts in Ihrem Browser eine Verzögerung auf. Sie sollten zudem sicherstellen, dass Sie vor dem Ausführen der folgenden Schritte Ihren Browser-Cache löschen.

    1. Rufen Sie /ride.html unter Ihrer Website-Domain auf.

    2. Wenn Sie zur Anmeldeseite weitergeleitet werden, melden Sie sich mit dem Benutzer an, den Sie im vorherigen Modul erstellt haben.

    3. Klicken Sie nach dem Laden der Karte an eine beliebige Stelle auf ihr, um einen Abholort auszuwählen.

    4. Wählen Sie Einhorn anfordern aus. In der rechten Seitenleiste sollte die Benachrichtigung angezeigt werden, dass ein Einhorn unterwegs ist, und das Symbol eines Einhorns fliegt zu Ihrem Abholort.

Es folgt: Beenden von Ressourcen