In diesem Modul konfigurieren Sie Amazon Simple Storage Service (S3), um die statischen Ressourcen für Ihre Webanwendung zu hosten. In den nachfolgenden Modulen fügen Sie diesen Seiten dynamische Funktionalität hinzu, indem Sie mithilfe von JavaScript RESTful APIs per Remote aufrufen, die mit AWS Lambda und Amazon API Gateway erstellt wurden.

Serverless_Web_App_LP_assets-02

Die Architektur für dieses Modul ist sehr einfach. Ihr gesamter statischer Webinhalt wird in Amazon S3 gespeichert, einschließlich HTML, CSS, JavaScript, Bildern und anderen Dateien. Ihre Endbenutzer greifen dann über die URL der öffentlichen Website von Amazon S3 auf Ihre Website zu. Sie müssen keine Webserver ausführen oder andere Services nutzen, um Ihre Website verfügbar zu machen.

Für die Zwecke dieses Moduls verwenden Sie die von uns bereitgestellte Endpunkt-URL der Website von Amazon S3. Sie hat die Form http://{Ihr-Bucketname}.s3-website.{Region}.amazonaws.com. Das Hosten Ihrer Website ist für die meisten echten Anwendungen am einfachsten, wenn Sie eine eigene Domain verwenden. Wenn Sie daran interessiert sind, eine eigene Domain zu verwenden, befolgen Sie in der Amazon S3-Dokumentation die Anweisungen zum Einrichten einer statischen Website mit einer benutzerdefinierten Domain.

Benötigte Zeit: 30 Minuten

Verwendete Services: Amazon S3

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

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

CloudFormation-Startanweisungen

  1. Wählen Sie oben auf die Verknüpfung Stapel starten für die Region Ihrer Wahl.

  2. Klicken Sie auf der Vorlagenseite auf Weiter.

  3. Geben Sie einen global eindeutigen Namen für den Bucket-Namen der Website an, z. B. wildrydes-IhrName und klicken Sie auf Weiter.

  4. Auf der Optionen-Seite lassen Sie alle Standardeinstellungen unverändert und wählen Sie Weiter.

  5. Aktivieren Sie auf der Überprüfungsseite das Kontrollkästchen, damit CloudFormation IAM-Ressourcen erstellt, und wählen Sie Erstellen.

    Diese Vorlage verwendet eine benutzerdefinierte Ressource, um die statischen Website-Komponenten von einem zentralen S3-Bucket in Ihr eigenes dediziertes Bucket zu kopieren. Damit die benutzerdefinierte Ressource in das neue Bucket in Ihrem Konto schreiben kann, muss sie eine IAM-Rolle erstellen, die diese Berechtigungen übernehmen kann.

  6. Warten Sie darauf, dass der Stapel wildrydes-webapp-1 den folgenden Status erreicht: CREATE_COMPLETE.

  7. Haben Sie den Stapel wildrydes-webapp-1 ausgewählt, klicken Sie auf die Registerkarte Ausgaben und klicken Sie auf den Link der WebsiteURL.

  8. Vergewissern Sie sich, dass die Startseite von Wild-Rydes ordnungsgemäß geladen wird, und fahren Sie mit dem nächsten Modul der Benutzerverwaltung fort.


Folgen Sie der nachfolgenden Schritt-für-Schritt-Anleitung, umeine statische Website zu hosten. Klicken Sie auf jede Schrittnummer, um den Abschnitt zu erweitern.

  • Schritt 1. Auswählen einer Region


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

    Auf der Regionentabelle können Sie erfahren, welche Regionen die unterstützten Services haben. Unter den unterstützten Regionen können Sie wählen:

    • 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 der Dropdown-Liste in der oberen rechten Ecke der AWS-Managementkonsole.

    region

    (Zum Vergrößern klicken)

    region
  • Schritt 2. Erstellen eines S3-Bucket

    Amazon S3 kann zum Hosten statischer Websites verwendet werden, ohne dass Webserver konfiguriert oder verwaltet werden müssen. In diesem Schritt erstellen Sie ein neues S3-Bucket, in dem alle statischen Komponenten (z. B. HTML-, CSS-, JavaScript- und Bilddateien) für Ihre Webanwendung gespeichert werden. 

    In diesem Schritt verwenden Sie die Konsole oder die AWS-CLI, um ein Amazon S3-Bucket zu erstellen. Beachten Sie, dass der Name Ihres Buckets global eindeutig sein muss. Wir empfehlen einen Namen wie wildrydes-Vorname-Nachname. Sollte Ihr Bucket-Name bereits existieren, fügen Sie weitere Zahlen oder Zeichen hinzu, bis Sie einen nicht verwendeten Namen finden.


    1. Wählen Sie in der AWS-Managementkonsole Services und dann S3 unter Speicher.
    2. Wählen Sie +Bucket erstellen.
    3. Geben Sie einen global eindeutigen Namen für Ihr Bucket an, z. B. wildrydes-Vorname-Nachname. Sollte Ihr Bucket-Name bereits existieren, fügen Sie weitere Zahlen oder Zeichen hinzu, bis Sie einen nicht verwendeten Namen finden.
    4. Wählen Sie in der Dropdown-Liste die Region aus, die Sie für diesen Workshop ausgewählt haben.
    5. Wählen Sie links unten im Dialogfeld Erstellen, ohne ein Bucket auszuwählen, von dem die Einstellungen kopiert werden sollen.
  • Schritt 3. Inhalt hochladen

    In diesem Schritt laden Sie die Website-Komponenten für dieses Modul in Ihr S3-Bucket hoch. Sie können die AWS-Managementkonsole (Google Chrome-Browser erforderlich), AWS CLI oder die bereitgestellte CloudFormation-Vorlage verwenden, um diesen Schritt auszuführen. Falls Sie AWS CLI bereits auf Ihrem lokalen Computer installiert und konfiguriert haben, empfehlen wir die Verwendung dieser Methode. Andernfalls verwenden Sie die Konsole, wenn Sie die neueste Version von Google Chrome installiert haben. 

    Schritt-für-Schritt-Anleitung für die Konsole

    Um alle Dateien und Unterverzeichnisse in einem lokalen Verzeichnis über die AWS-Managementkonsole hochzuladen, müssen Sie die neueste Version des Chrome-Browsers verwenden. Falls Sie Chrome nicht verwenden können, befolgen Sie die Anweisungen zur Verwendung von AWS CLI oder der bereitgestellten CloudFormation-Vorlage.

    1. Mit einem Klick auf diesen Link laden Sie ein Archiv dieses Repositorys herunter.

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

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

    4. Wählen Sie das Bucket aus, das Sie im vorherigen Schritt erstellt haben, und vergewissern Sie sich, dass die Registerkarte Objekte angezeigt wird.

    5. Öffnen Sie entweder den Datei-Explorer unter Windows oder den Finder unter macOS und navigieren Sie zum erweiterten Inhalt 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 im Website-Verzeichnis alle Dateien und Unterverzeichnisse aus. Stellen Sie sicher, dass das Website-Verzeichnis nicht ausgewählt ist.

    8. Ziehen Sie die ausgewählten Dateien aus Ihrem lokalen Dateisystem zum Inhalt unter der Registerkarte Objekte in der S3-Konsole.

    9. Wählen Sie in der unteren linken Ecke des angezeigten Dialogfelds Hochladen.

    10. Warten Sie, bis der Upload abgeschlossen ist, und stellen Sie sicher, dass Sie den Inhalt des Website-Verzeichnisses sehen, das in der S3-Konsole aufgeführt ist. Wenn Sie nur ein einziges Website Verzeichnis sehen, müssen Sie es aus Ihrem Bucket löschen und diesen Anweisungen erneut folgen, damit Sie nur den Inhalt des Verzeichnisses auswählen, bevor Sie es in die S3-Konsole kopieren.

    Schritt-für-Schritt-Anleitung für die CLI

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

    1. Führen Sie den folgenden Befehl aus und achten Sie darauf, dass Sie YOUR_BUCKET_NAME durch den Namen, den Sie im vorherigen Abschnitt verwendet haben, und YOUR_BUCKET_REGION durch den Regionalcode (z. B. us-east-2) ersetzen, in dem Sie Ihr Bucket erstellt haben.

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME --region YOUR_BUCKET_REGION
    2. War der Befehl erfolgreich, sehen Sie eine Liste mit Objekten, die in Ihr Bucket kopiert wurden.

     

    Schritt-für-Schritt-Anleitung für die CloudFormation

    Wenn Sie keine der vorherigen Methoden verwenden können, können Sie die bereitgestellte CloudFormation-Vorlage starten, um die erforderlichen Komponenten in Ihr S3-Bucket zu kopieren. Starten Sie eine CloudFormation-Vorlage durch die Auswahl einer Region und einen Klick auf die Verknüpfung Stapel starten in der CloudFormation-Vorlage dieses Moduls. 

  • Schritt 4. Hinzufügen einer Bucket-Richtlinie für die Zulassung des öffentlichen Lesezugriffs

    Sie können definieren, wer auf den Inhalt in Ihres S3-Buckets zugreifen darf, indem Sie eine Bucket-Richtlinie verwenden. Bucket-Richtlinien sind JSON-Dokumente, die angeben, welche Prinzipale verschiedene Aktionen gegenüber den Objekten in Ihrem Bucket ausführen dürfen.

    In diesem Schritt fügen Sie Ihrem neuen Amazon S3-Bucket eine Bucket-Richtlinie hinzu, damit anonyme Benutzer Ihre Website aufrufen können. Standardmäßig ist Ihr Bucket nur für authentifizierte Benutzer mit Zugriff auf Ihr AWS-Konto zugänglich.

    Beachten Sie dieses Beispiel einer Richtlinie, die anonymen Benutzern schreibgeschützten Zugriff gewährt. Mit dieser Beispielrichtlinie können alle Personen im Internet Ihren Inhalt aufrufen. Die einfachste Methode zum Aktualisieren einer Bucket-Richtlinie ist die Verwendung der Konsole. Wählen Sie das Bucket, dann die Registerkarte für die Berechtigungen und schließlich Bucket-Richtlinie aus.


    1. Wählen Sie in der S3-Konsole den Namen des Buckets aus, das Sie in Abschnitt 1 erstellt haben.
    2. Wählen Sie die Registerkarte Berechtigungen und dann Bucket-Richtlinie.
    3. Geben Sie das folgende Richtliniendokument in den Bucket-Richtlinieneditor ein, indem Sie [YOUR_BUCKET_NAME] durch den Namen des Buckets ersetzen, das 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. Wählen Sie Speichern, um die neue Richtlinie anzuwenden.
  • Schritt 5. Website-Hosting aktivieren

    Standardmäßig sind Objekte in einem S3-Bucket über URLs mit der Struktur http://.amazonaws.com// verfügbar. Um Komponenten von der Root-URL (z. B. /index.html) aus bereitzustellen, müssen Sie das Website-Hosting im Bucket aktivieren. Dadurch werden Ihre Objekte auf dem AWS im regionenspezifischen Website-Endpunkt des Buckets verfügbar: .s3-website-.amazonaws.com.

    Sie können auch eine benutzerdefinierte Domain für Ihre Website verwenden. Zum Beispiel wird http://www.wildrydes.com auf S3 gehostet. Das Einrichten einer benutzerdefinierten Domäne wird in diesem Workshop nicht behandelt. Ausführliche Anleitungen finden Sie in unserer Dokumentation.

    In diesem Schritt verwenden Sie die Konsole, um das statische Website-Hosting zu aktivieren. Dies können Sie auf der Eigenschaften-Registerkarte tun, nachdem Sie das Bucket ausgewählt haben. Legen Sie index.html als Indexdokument fest und lassen Sie das Fehlerdokument leer. Weitere Informationen finden Sie in der Dokumentation zur Konfiguration eines Buckets für das Hostig statischer Websites.


    1. Wählen Sie auf der Detailseite des Buckets in der S3-Konsole die Registerkarte Eigenschaften.
    2. Wählen Sie die Karte Statisches Website-Hosting.
    3. Wählen Sie Dieses Bucket zum Hosten einer Website verwenden und geben Sie index.html für das Indexdokument ein. Lassen Sie die restlichen Felder leer.
    4. Notieren Sie sich die URL des Endpunkts oben im Dialogfeld, bevor Sie Speichern wählen. Sie verwenden diese URL während des gesamten restlichen Workshops, um Ihre Webanwendung anzuzeigen. Von nun an wird diese URL als Basis-URL Ihrer Website bezeichnet.
    5. Klicken Sie auf Speichern, um Ihre Änderungen zu speichern.
  • Schritt 6. Ihre Implementierung prüfen

    Nach Abschluss dieser Implementierungsschritte sollten Sie in der Lage sein, auf Ihre statische Website zuzugreifen, indem Sie die URL des Website-Endpunkts für Ihr S3-Bucket aufrufen.

    Rufen Sie die Basis-URL Ihrer Website (dies ist die URL, die Sie im vorherigen Abschnitt notiert haben) im Browser Ihrer Wahl auf. Die Startseite von Wild Rydes sollte nun angezeigt werden. Wenn Sie die Basis-URL suchen müssen, rufen Sie die S3-Konsole auf, wählen Sie Ihr Bucket aus und klicken Sie dann in der Registerkarte Eigenschaften auf Statisches Webhosting.

    Wird die Seite wie im nachfolgenden Beispiel-Screenshot korrekt dargestellt, können Sie mit dem nächsten Modul der Benutzerverwaltung fortfahren.

    wildrydes-homepage