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 und geben Sie WildRydes als API-Namen ein.

    4. 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. Wählen Sie in der Dropdown-Liste Erstellen die Option Genehmiger des Cognito-Benutzerpools aus.

    3. Wählen Sie die Region aus, in der Sie im Modul 2 Ihren Cognito-Benutzerpool erstellt haben.

    4. Wählen Sie den Cognito-Benutzerpool WildRydes aus der Dropdown-Liste aus.

    5. Verwenden Sie WildRydes für den Namen des Genehmigers.

    6. Vergewissern Sie sich, dass die Identitätstokenquelle wie folgt eingestellt ist: Autorisierung.

    7. Wählen Sie Erstellen.

    Überprüfen Ihrer Konfiguration des Genehmigers

    1. Öffnen Sie eine neue Browser-Registerkarte und rufen Sie /ride.html 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.htmlund fügen Sie es in der Registerkarte der API Gateway-Konsole in das Feld Identitätstoken ein.

    4. Wählen Sie Testen und vergewissern Sie sich, 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. Verwenden Sie ride als Ressourcenname

    4. Stellen Sie sicher, dass der Ressourcenpfad wie folgt festgelegt ist: ride.

    5. Klicken Sie auf Ressource erstellen.

    6. Mit der ausgewählten, neu erstellten Ressource /ride wählen Sie aus dem Dropdown-Menü Aktion den Befehl Methode erstellen.

    7. Wählen Sie POST aus dem neu angezeigten Dropdown-Menü und dann klicken Sie auf das Häkchen.

    8. Wählen Sie für den Integrationstyp die Lambda-Funktion.

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

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

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

    12. 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.

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

    14. Wählen Sie die Karte Methodenanforderung.

    15. Wählen Sie das Bleistiftsymbol neben Autorisierung.

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

  • Schritt 4. CORS aktivieren

    Moderne Webbrowser verhindern HTTP-Anfragen von Scripts auf Seiten, die in einer Domäne gehostet werden, zu APIs, die in einer anderen Domain gehostet werden, es sei denn, die API bietet CORS-Antwortheader (Cross-Origin Resource Sharing), die dies ausdrücklich zulassen. In der Amazon API Gateway-Konsole können Sie die erforderliche Konfiguration hinzufügen, um die entsprechenden CORS-Header im Aktionsmenü zu senden, wenn Sie eine Ressource ausgewählt haben. Sie sollten CORS für POST und OPTIONEN für Ihre Ressource /requestunicorn aktivieren. Der Einfachheit halber können Sie den Wert des Access-Control-Allow-Origin-Headers auf '*' setzen, doch in einer Produktionsanwendung sollten Sie autorisierte Domains immer explizit auf die weiße Liste setzen, um Cross-Site-Request-Forgery (CSRF)-Angriffe zu mildern.

    Weitere Informationen zu CORS-Konfigurationen im Allgemeinen finden Sie unter https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS


    1. Wählen Sie im mittleren Bereich der Amazon API Gateway-Konsole die /ride Ressource.

    2. Wählen Sie aus der Aktionen-Dropdown-Liste CORS aktivieren.

    3. Verwenden Sie die Standardeinstellungen und wählen Sie CORS aktivieren und vorhandene CORS-Header ersetzen.

    4. Wählen Sie Ja, vorhandene Werte ersetzen.

    5. Warten Sie, bis neben allen Schritten ein Häkchen angezeigt wird.

  • Schritt 5. 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. Verwenden Sie prod als Abschnittsnamen.

    4. Wählen Sie Bereitstellen.

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

  • Schritt 6. 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 die Datei config.js zuerst aus Ihrem S3-Bucket herunterladen. Um dies zu tun, rufen Sie /js/config.js unter der Basis-URL Ihrer Website auf und wählen Sie in Ihrem Browser Datei und dann Seite speichern unter.

    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 einer vollständigen 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 js Schlüsselpräfix.

    4. Wählen Sie Hochladen.

    5. Wählen Sie Dateien hinzufügenund dann die lokale Kopie der config.js und klicken Sie auf Weiter.

    6. Wählen Sie Weiter, ohne irgendwelche Standardeinstellungen in den Bereichen Berechtigungen festlegen und Eigenschaften festlegen zu ändern.

    7. Wählen Sie Hochladen in den Überprüfen Bereich.

  • Schritt 7. 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 der Domain Ihrer Website 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.