In diesem Modul verwenden Sie Amazon API Gateway, um die Lambda-Funktion, die Sie im vorherigen Modul erstellt haben, als RESTful API verfügbar zu machen. Diese API ist im öffentlichen Internet verfügbar. Sie wird mit dem Amazon Cognito-Benutzerpool gesichert, den Sie im vorherigen Modul erstellt haben. Mit dieser Konfiguration verwandeln Sie Ihre statisch gehostete Website in eine dynamische Webanwendung, indem Sie clientseitiges JavaScript hinzufügen, das AJAX-Aufrufe für die bereitgestellten APIs durchführt.

Serverless_Web_App_LP_assets-05

Das obige Diagramm zeigt, wie die API-Gateway-Komponente, die Sie in diesem Modul erstellen, in die vorhandenen Komponenten integriert wird, die Sie zuvor erstellt haben. Die grauen Elemente sind Teile, die Sie bereits in vorherigen Schritten implementiert haben.

Die statische Website, die Sie im ersten Modul bereitgestellt haben, verfügt bereits über eine Seite, die für die Interaktion mit der API konfiguriert ist, die Sie in diesem Modul erstellen. Die Seite unter /ride.html verfügt über eine einfache kartenbasierte Oberfläche zum Anfordern einer Unicorn-Fahrt. Nach der Authentifizierung über die Seite /signin.html können Ihre Benutzer ihren Abholort auswählen, indem sie auf einen Punkt auf der Karte klicken und dann eine Fahrt anfordern, indem sie rechts oben die Schaltfläche "Unicorn anfordern" wählen.

Dieses Modul konzentriert sich auf die Schritte, die zum Erstellen der Cloud-Komponenten der API erforderlich sind. Wenn Sie jedoch daran interessiert sind, wie der Browsercode diese API aufruft, können Sie die ride.js-Datei der Website untersuchen. In diesem Fall verwendet die Anwendung die Methode ajax () von jQuery, um die Remote-Anforderung auszuführen.

Benötigte Zeit: 15 Minuten

Verwendete Services: Amazon API Gateway und AWS Lambda


Folgen Sie der nachfolgenden Schritt-für-Schritt-Anleitung, um Ihre REST API zu erstellen. Klicken Sie auf jede Schrittnummer, um den Abschnitt zu erweitern.

  • Schritt 1. Erstellen einer neuen REST API


    1. Klicken Sie in der AWS-Managementkonsole auf Services und wählen Sie dann API Gateway unter Anwendungs-Services aus.

    2. Wählen Sie API erstellen.

    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.

  • Schritt 2. Erstellen eines Genehmigers des Cognito-Benutzerpools

    Amazon API Gateway kann die vom Cognito-Benutzerpool zurückgegebenen JWT-Token zur Authentifizierung von API-Aufrufen verwenden. In diesem Schritt konfigurieren Sie einen Genehmiger für Ihre API, um den Benutzerpool zu verwenden, den Sie in Modul 2 erstellt haben.

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


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

    2. Schließen 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.

    Überprüfen Ihrer Konfiguration des Genehmigers

    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 Genehmigungs-Token in das Feld Genehmigungs-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. Erstellen einer neuen Ressource und Methode

    Erstellen Sie in Ihrer API eine neue Ressource mit dem Namen /ride. Erstellen Sie dann eine POST-Methode für diese Ressource und konfigurieren Sie sie so, dass eine Lambda-Proxyintegration verwendet wird, die von der Funktion RequestUnicorn unterstützt wird, die Sie im ersten Schritt dieses Moduls erstellt haben.


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

    2. Aus dem Dropdown-Menü Aktionen wählen Sie Ressource erstellen.

    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 den Integrationstyp die Lambda-Funktion.

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

    11. Wählen Sie die Region, die Sie für die Lambda-Region verwenden.

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

    13. Wählen Sie Speichern. Bitte beachten Sie, dass Sie bei einer Fehlermeldung über eine nicht existierende Funktion überprüfen, ob die ausgewählte Region mit derjenigen übereinstimmt, 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. Wählen Sie das Bleistiftsymbol neben Autorisierung.

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

  • Schritt 4. Ihre API bereitstellen

    Wählen Sie in der Amazon API Gateway-Konsole Aktionen, API bereitstellen. Sie werden aufgefordert, einen neuen Abschnitt zu erstellen. Für den Abschnittsnamen können Sie prod verwenden.


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

    2. Wählen Sie [Neuer Abschnitt] in der Dropdown-Liste des Bereitstellungsabschnitts.

    3. Geben Sie prod als Stufennamen ein.

    4. Wählen Sie Bereitstellen.

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

  • Schritt 5. Website-Konfiguration aktualisieren

    Aktualisieren Sie die Datei /js/config.js in Ihrer Website-Bereitstellung so, dass sie die Aufruf-URL des gerade erstellten Abschnitts enthält. Sie müssen die Aufruf-URL in der Amazon API Gateway-Konsole direkt von der oberen Seite der Editorseite des Abschnitts kopieren und in den Schlüssel _config.api.invokeUrl der Datei /js/config.js Ihrer Websites einfügen. Stellen Sie sicher, dass beim Aktualisieren der Konfigurationsdatei immer noch die Updates enthalten sind, die Sie im vorherigen Modul für Ihren Cognito-Benutzerpool vorgenommen haben.


    Wenn Sie Modul 2 manuell abgeschlossen haben, können Sie die Datei config.js bearbeiten, die Sie lokal gespeichert haben. Wenn Sie die AWS CloudFormation-Vorlage verwendet haben, müssen Sie zuerst die Datei config.js aus Ihrem S3-Bucket herunterladen. Rufen Sie dazu /js/config.js unter der Basis-URL Ihrer Website auf und wählen Sie in Ihrem Browser Datei und dann Seite speichern unter aus.

    1. Öffnen Sie die Datei config.js in einem Texteditor.

    2. Aktualisieren Sie in der Datei config.js die Einstellung der invokeUrl unter dem Schlüssel api. Setzen Sie den Wert für die Aufruf-URL des Bereitstellungsabschnitts, den 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 in Ihrer Datei von den hier angegebenen abweichen.

    window._config = {

        cognito: {

            userPoolId: 'us-west-2_uXboG5pAb', // z. B. us-east-2_uXboG5pAb         

            userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // z. B. 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 Ihre Änderungen lokal.

    2. Wählen Sie in der AWS-Managementkonsole Services und dann S3 unter Speicher.

    3. Navigieren Sie zum Website-Bucket und dann zum Schlüsselpräfix js.

    4. Wählen Sie Hochladen.

    5. Wählen Sie Dateien hinzufügen aus, wählen Sie dann die lokale Kopie von config.js aus und klicken Sie abschließend auf Weiter.

    6. Wählen Sie Weiter aus, ohne die Standardeinstellungen in den Abschnitten Berechtigungen festlegen und Eigenschaften festlegen zu ändern.

    7. Wählen Sie Hochladen im Abschnitt Überprüfung aus.

  • Schritt 5. Ihre Implementierung prüfen

    Hinweis: Es ist möglich, dass Sie eine Verzögerung zwischen dem Aktualisieren der Datei config.js in Ihrem S3-Bucket und dem Anzeigen des aktualisierten Inhalts in Ihrem Browser feststellen können. Sie sollten außerdem sicherstellen, dass Sie Ihren Browser-Cache löschen, bevor Sie die folgenden Schritte ausführen.


    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 auf eine beliebige Stelle auf der Karte, um einen Abholort festzulegen.

    4. Wählen Sie Unicorn anfordern. In der rechten Seitenleiste erscheint eine Benachrichtigung, dass ein Unicorn unterwegs ist, worauf Sie ein Unicorn-Symbol zum Abholort fliegen sehen.