Projekte in AWS:

Erstellen einer serverlosen Webanwendung

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

Einführung

Hosten einer statischen Website

Benutzer verwalten

Erstellen eines serverlosen Backends

Bereitstellen einer RESTful-API

Beenden von Ressourcen

Modul 1. Statisches Web-Hosting

Im Rahmen dieses Moduls konfigurieren Sie Amazon Simple Storage Service (S3) für das Hosten der statischen Ressourcen für Ihre Webanwendung. In Folgemodulen fügen Sie diesen Seiten mithilfe von JavaScript dynamische Funktionen zum Aufrufen von RESTful-APIs hinzu, die mit AWS Lambda und Amazon API Gateway erstellt werden.

Übersicht über die Architektur

Die Architektur für dieses Modul ist sehr geradlinig. Alle statischen Webinhalte, z. B. HTML, CSS, JavaScript, Bilder und andere Daten, werden in Amazon S3 gespeichert. Ihre Endbenutzer greifen dann über die von Amazon S3 bereitgestellte öffentliche Website-URL auf Ihre Website zu. Sie müssen zur Bereitstellung Ihrer Website keine Webserver betreiben oder andere Dienste verwenden.

Im Rahmen dieses Moduls verwenden Sie die von uns bereitgestellte Amazon S3-Website-Endpunkt-URL. Sie weist das Format http://{your-bucket-name}.s3-website.{region}.amazonaws.com auf. Für die meisten richtigen Anwendungen müssen Sie eine benutzerdefinierte Domäne verwenden, um Ihre Website zu hosten. Wenn Sie eine eigene Domäne verwenden möchten, befolgen Sie die Anweisungen für das Einrichten einer statischen Website mit einer benutzerdefinierten Domäne in der Amazon S3-Dokumentation.

Veranschlagte Zeit für das Modul: 30 Minuten

Verwendete Services: Amazon S3

CloudFormation-Vorlage: Wenn Sie bereits mit Amazon S3 vertraut sind oder einfach lieber mit Lambda und API Gateway arbeiten, können Sie eine dieser AWS CloudFormation-Vorlagen in der Region Ihrer Wahl starten, um die erforderlichen Ressourcen automatisch zu erstellen.

Region CloudFormation-Vorlage
USA Ost (Nord-Virginia) Stack starten >
USA Ost (Ohio) Stack starten >
USA West (Oregon) Stack starten >
EU (Frankfurt) Stack starten >
EU (Irland) Stack starten >
EU (London) Stack starten >
Asien-Pazifik (Tokio) Stack starten >
Asien-Pazifik (Seoul) Stack starten >
Asien-Pazifik (Sydney) Stack starten >
Asien-Pazifik (Mumbai) Stack starten >

CloudFormation-Startanweisungen

  1. Klicken Sie oben in der Region Ihrer Wahl auf den Link Stack starten.

  2. Klicken Sie auf der Seite "Select Template" (Vorlage auswählen) auf die Option Weiter.

  3. Geben Sie einen global eindeutigen Website-Bucket-Namen an, z. B. wildrydes-ihrname, und klicken Sie auf Weiter.

  4. Behalten Sie auf der Seite "Optionen" die Standardwerte bei und klicken Sie auf Weiter.

  5. Aktivieren Sie auf der Seite "Prüfen" das Kontrollkästchen, um zu bestätigen, dass CloudFormation IAM-Ressourcen erstellt, und klicken Sie auf Erstellen.

    Diese Vorlage nutzt eine benutzerdefinierte Ressource zum Kopieren der statischen Website-Komponenten von einem zentralen S3-Bucket in Ihren dedizierten Bucket. Damit die benutzerdefinierte Ressource in den neuen Bucket in Ihrem Konto schreiben kann, muss sie eine IAM-Rolle erstellen, die sie mit diesen Berechtigungen übernehmen kann.

  6. Warten Sie, bis der wildrydes-webapp-1-Stack den Status CREATE_COMPLETE erreicht hat.

  7. Wählen Sie den Stack wildrydes-webapp-1 aus, klicken Sie auf die Registerkarte Outputs und klicken Sie auf den WebsiteURL-Link.

  8. Prüfen Sie, ob die Wild-Rydes-Homepage korrekt geladen wird, und machen Sie mit dem nächsten Modul, "Benutzerverwaltung", weiter.

Implementierungsanweisungen

Befolgen Sie die folgende schrittweise Anleitung zum Hosten einer statischen Website. Klicken Sie auf die Nummer eines jeweiligen Schritts, um den Bereich zu erweitern.

  • Schritt 1. Auswählen einer Region

    Auswählen einer Region

    Diese Webanwendung kann in jeder AWS-Region bereitgestellt werden, die alle Services unterstützt, die in dieser Anwendung verwendet werden, z. B. Amazon Cognito, AWS Lambda, Amazon API Gateway, Amazon S3 und Amazon DynamoDB.

    Auf der Übersichtstabelle der Regionen ist zu sehen, welche Regionen die unterstützten Services aufweisen. Die unterstützten Regionen sind u. a.:

    • USA Ost (Nord-Virginia)
    • USA Ost (Ohio)
    • USA West (Oregon)
    • EU (Frankfurt)
    • EU (Irland)
    • EU (London)
    • Asien-Pazifik (Tokio)
    • Asien-Pazifik (Seoul)
    • Asien-Pazifik (Sydney)
    • Asien-Pazifik (Mumbai)

     

    Wählen Sie Ihre Region aus dem Dropdownmenü in der oberen rechten Ecke der AWS-Managementkonsole.

    (zum Vergrößern klicken)

  • Schritt 2. Erstellen eines S3-Bucket

    Erstellen eines S3-Bucket

    Amazon S3 kann zum Hosten statischer Websites verwendet werden, ohne irgendwelche Webserver konfigurieren oder verwalten zu müssen. Im Rahmen dieses Schritts erstellen Sie einen neuen S3-Bucket, in dem alle statischen Komponenten (z. B. HTML, CSS, JavaScript und Bilddateien) für Ihre Webanwendung gehostet werden. 

    Im Rahmen dieses Schritts verwenden Sie die Konsole oder die AWS-CLI zur Erstellung eines Amazon S3-Buckets. Stellen Sie sicher, dass der Bucket-Name global eindeutig ist. Wir empfehlen einen Namen wie wildrydes-vorname-nachname. Wenn ein Fehler ausgegeben wird, demzufolge bereits ein Bucket mit diesem Namen vorhanden ist, fügen Sie weitere Ziffern oder Buchstaben hinzu, bis Sie einen ungenutzten Namen finden.

    1. Wählen Sie in der AWS-Managementkonsole die Option Services und dann im Bereich "Speicher", die Option S3 aus.
    2. Klicken Sie auf +Create Bucket (Bucket erstellen).
    3. Geben Sie einen global eindeutigen Namen für den Bucket an, z. B wildrydes-vorname-nachname. Wenn ein Fehler ausgegeben wird, demzufolge bereits ein Bucket mit diesem Namen vorhanden ist, fügen Sie weitere Ziffern oder Buchstaben hinzu, bis Sie einen ungenutzten Namen finden.
    4. Wählen Sie im Dropdownmenü die Region aus, die Sie sich für diesen Workshop zu nutzen entschieden haben.
    5. Wählen Sie im Dialogfeld unten links Erstellen aus, ohne einen Bucket auszuwählen, aus dem Einstellungen kopiert werden sollen.

  • Schritt 3. Inhalte hochladen

    Inhalte hochladen

    Im Rahmen dieses Schritts laden Sie Website-Komponenten für dieses Modul in den S3-Bucket hoch. Sie können die AWS-Managementkonsole (erfordert Google Chrome), die AWS-CLI oder die bereitgestellte CloudFormation-Vorlage nutzen, um diesen Schritt abzuschließen. Wenn Sie die AWS-CLI bereits auf Ihrem lokalen Computer installiert und konfiguriert haben, empfehlen wir, diese Methode zu nutzen. Verwenden Sie alternativ die Konsole, falls Sie die aktuelle Version von Google Chrome installiert haben. 

    Schrittweise Anweisungen für die Konsole

    Zum Hochladen aller Dateien und Unterverzeichnisse in ein lokales Verzeichnis über die AWS-Managementkonsole müssen Sie die aktuelle Version von Chrome verwenden. Wenn Sie Chrome nicht verwenden können, befolgen Sie bitte die Anweisungen für die Verwendung der AWS-CLI oder der bereitgestellten CloudFormation-Vorlage.

    1. Laden Sie ein Archiv dieses Repository unter Verwendung dieses Links herunter.

    2. Entpacken Sie das heruntergeladene Archiv auf Ihrem lokalen Computer.

    3. Öffnen Sie die AWS-Managementkonsole in Chrome. Wählen Sie Services und dann unter "Speicher" die Option S3 aus.

    4. Wählen Sie den Bucket aus, den Sie im vorherigen Schritt erstellt haben, und zeigen Sie die Registerkarte Übersicht an.

    5. Öffnen Sie entweder den Windows-Datei-Explorer oder den macOS-Finder und suchen Sie die erweiterten Inhalte der ZIP-Datei, die Sie im ersten Schritt heruntergeladen haben.

    6. Navigieren Sie auf Ihrem lokalen Computer zum Verzeichnis "WebApplication/1_StaticWebHosting/website".

    7. Wählen Sie alle Dateien und Unterverzeichnisse im Verzeichnis "website" aus. Stellen Sie sicher, dass das Verzeichnis "website" selbst nicht ausgewählt ist.

    8. Verschieben Sie die ausgewählten Dateien per Drag & Drop aus Ihrem lokalen Dateisystem in die Inhalte auf der Registerkarte Übersicht der S3-Konsole.

    9. Wählen Sie im angezeigten Dialogfeld unten links die Option Hochladen aus.

    10. Warten Sie, bis der Uploadvorgang abgeschlossen ist, und stellen Sie sicher, dass die Inhalte des Verzeichnisses "website" in der S3-Konsole aufgeführt werden. Wenn Sie nur das einzelne Verzeichnis website sehen, müssen Sie es aus dem Bucket löschen und diese Anweisungen erneut befolgen. Stellen Sie dabei sicher, dass Sie nur die Inhalte des Verzeichnisses auswählen, bevor Sie sie per Drag & Drop in die S3-Konsole verschieben.

    Schrittweise Anweisungen für die CLI

    Wenn Sie die CLI bereits installiert und konfiguriert haben, können Sie sie verwenden, um die erforderlichen Webkomponenten von s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website in Ihren Bucket zu kopieren.

    1. Führen Sie den folgenden Befehl aus, um NAME_IHRES_BUCKETS durch den im vorherigen Abschnitt verwendeten Namen und REGION_IHRES_BUCKETS durch den Code der Region (z. B. us-east-2), in der Sie den Bucket erstellt haben, zu ersetzen.

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://NAME_IHRES_BUCKETS --region REGION_IHRES_BUCKETS

    2. Wenn der Befehl erfolgreich war, sollte Ihnen eine Liste der Objekte angezeigt werden, die in Ihren Bucket kopiert wurden.

     

    Schrittweise Anweisungen für die CloudFormation

    Wenn Sie nicht in der Lage sind, eine der oben genannten Methoden zu verwenden, können Sie die bereitgestellte CloudFormation-Vorlage verwenden, um die erforderlichen Komponenten in Ihren S3-Bucket zu kopieren. Starten Sie eine CloudFormation-Vorlage, indem Sie eine Region auswählen und im Bereich CloudFormation-Vorlage dieses Moduls auf den Link Stack starten klicken.

  • Schritt 4. Hinzufügen einer Bucket-Richtlinie zum Zulassen des öffentlichen Lesezugriffs

    Hinzufügen einer Bucket-Richtlinie zum Zulassen des öffentlichen Lesezugriffs

    Mit Bucket-Richtlinien können Sie definieren, wer auf die Inhalte in Ihren S3-Buckets zugreifen kann. Bucket-Richtlinien sind JSON-Dokumente, die angeben, welche Prinzipale verschiedene Aktionen hinsichtlich der Objekte in Ihrem Bucket durchführen dürfen.

    Im Rahmen dieses Schritts fügen Sie Ihrem neuen Amazon S3-Bucket eine Bucket-Richtlinie hinzu, um anonymen Benutzern das Anzeigen der Website zu ermöglichen. Standardmäßig ist der Bucket nur authentifizierten Benutzern mit Zugriff auf Ihr AWS-Konto zugänglich.

    Dieses Beispiel zeigt eine Richtlinie, die anonymen Benutzern Lesezugriff gewährt. Diese Beispielrichtlinie ermöglicht jedem im Internet, Ihre Inhalte anzuzeigen. Der einfachste Weg zur Aktualisierung einer Bucket-Richtlinie führt über die Konsole. Wählen Sie den Bucket aus, dann die Registerkarte "Berechtigung" und dann "Bucket-Richtlinie".

    1. Wählen Sie in der S3-Konsole den Namen des Buckets aus, den Sie in Abschnitt 1 erstellt haben.
    2. Wählen Sie die Registerkarte Berechtigungen und anschließend die Option Bucket-Richtlinie aus.
      1. Wählen Sie in der S3-Konsole den Namen des Buckets aus, den Sie in Abschnitt 1 erstellt haben.
      2. Wählen Sie die Registerkarte Berechtigungen aus und stellen Sie dann sicher, dass die Einstellungen zum öffentlichen Zugriff ausgewählt sind.
      3. Klicken Sie auf Bearbeiten und wählen Sie das Folgende ab:
        • „Neue öffentliche Bucket-Richtlinien blockieren“
        • „Öffentlichen Zugriff und Zugriff zwischen Konten blockieren, falls Bucket öffentliche Richtlinien hat“
      4. Klicken Sie auf Speichern.
      5. Tippen Sie im Bestätigungs-Modal, das erscheint, „bestätigen“ ein und klicken Sie auf Bestätigen. 
      6. Während Sie noch in der Registerkarte Berechtigungen sind, wählen Sie die Option Bucket-Richtlinie aus.  
    3. ​Geben Sie im Bucket-Richtlinien-Editor das folgende Richtliniendokument an, wobei Sie [NAME_IHRES_BUCKETS] durch den Namen des Buckets ersetzen, den Sie in Abschnitt 1 erstellt haben:
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
        } 
    ] 
}
    1. Klicken Sie auf Speichern, um die neue Richtlinie zu übernehmen.

  • Schritt 5. Website-Hosting aktivieren

    Website-Hosting aktivieren

    Standardmäßig stehen Objekte in S3-Buckets über URLs mit der Struktur "http://.amazonaws.com//" zur Verfügung. Um Komponenten von der Stamm-URL (z. B. /index.html) bedienen zu können, müssen Sie das Hosting von Websites auf dem Bucket ermöglichen. So werden Ihre Objekte am AWS-Regions-spezifischen Website-Endpunkt des Buckets ".s3-website-.amazonaws.com" bereitgestellt.

    Sie können für Ihre Website auch eine benutzerdefinierte Domäne verwenden. Beispielsweise wird http://www.wildrydes.com auf S3 gehostet. Die Einrichtung einer benutzerdefinierten Domäne wird in diesem Workshop nicht behandelt, aber in unserer Dokumentation finden Sie detaillierte Anweisungen.

    Im Rahmen dieses Schritts verwenden Sie die Konsole zur Aktivierung des Hostings einer statischen Website. Dies ist auf der Registerkarte "Eigenschaften" möglich, wobei der jeweilige Bucket ausgewählt sein muss. Legen Sie index.html als Indexdokument fest und lassen Sie das Fehlerdokument leer. Weitere Informationen dazu finden Sie in der Dokumentation zum Konfigurieren eines Buckets für das Hosten statischer Websites.

    1. Wählen Sie in der S3-Konsole auf der Bucket-Detailseite die Registerkarte Eigenschaften aus.
    2. Wählen Sie die Karte Hosten einer statischen Website.
    3. ​Wählen Sie ​Diesen Bucket zum Hosten einer Website verwenden aus und geben Sie index.html als Indexdokument an. Lassen Sie die anderen Felder leer.
    4. Notieren Sie sich die Endpunkt-URL, die im Dialogfeld oben zu finden ist, bevor Sie Speichern auswählen. Sie verwenden diese URL für den Rest des Workshops zur Anzeige Ihrer Webanwendung. Von jetzt an wird diese URL als Basis-URL Ihrer Website bezeichnet.
    5. Klicken Sie auf Speichern, um Ihre Änderungen zu speichern.

  • Schritt 6. Prüfen der Implementierung

    Überprüfen Sie Ihre Implementierung

    Wenn Sie diese Implementierungsschritte abgeschlossen haben, sollten Sie auf die statische Website zugreifen können, indem Sie die Website-Endpunkt-URL für Ihren S3-Bucket aufrufen.

    Rufen Sie die Basis-URL Ihrer Website (die Sie sich im vorherigen Abschnitt notiert haben) im Browser Ihrer Wahl auf. Die Wild-Rydes-Homepage sollte angezeigt werden. Falls Sie die Basis-URL nachschlagen müssen, rufen Sie die S3-Konsole auf, wählen Sie Ihren Bucket aus und klicken Sie dann auf der Registerkarte Eigenschaften auf die Option Statisches Web-Hosting.

    Falls die Seite korrekt gerendert wird (siehe Beispiel-Screenshot unten), können Sie mit dem nächsten Modul, "Benutzerverwaltung", fortfahren.

Als Nächstes: Verwalten von Benutzern