Projekte in AWS

Erstellen einer modernen Webanwendung

Bereitstellen einer Webanwendung, Anbinden an eine Datenbank und Analysieren des Benutzerverhaltens

Modul 1: Erstellen einer statischen Website

In diesem Modul werden Sie Ihre statische Website auf Amazon S3 hosten und Ihre cloudbasierte IDE, AWS Cloud9, einrichten.  

Übersicht

In diesem Modul werden wir die statischen Inhalte (html, js, css, Medien-Inhalte, usw.) unserer Mythical Mysfit Website auf Amazon S3 (Simple Storage Service) hosten. S3 ist ein sehr robuster, hochverfügbarer und günstiger Objektspeicherservice, der gespeicherte Objekte direkt über HTTP bereitstellen kann. Somit ist er hervorragend geeignet, um statische Webinhalte direkt an Browser für Websites bereitzustellen.

Bevor wir unsere Mysfits in S3 speichern, richten wir AWS Cloud9 ein. Cloud9 ist eine Cloud-basierte integrierte Entwicklungsumgebung (Integrated Development Environment, IDE), die es Ihnen ermöglicht, Code in einem Browser zu schreiben, auszuführen und zu debuggen.  

Architekturdiagramm

Erstellen einer statischen Website

 Veranschlagte Zeit

20 Minuten

Implementierungsanweisungen

  • A: Anmelden bei der AWS-Konsole

    Melden Sie sich zuerst bei der AWS-Konsole von dem AWS-Konto an, das Sie in diesem Workshop verwenden werden.

    B: Auswählen einer Region

    Diese Webanwendung kann in jeder AWS-Region bereitgestellt werden, die alle in dieser Anwendung genutzten Services unterstützt. In der Übersichtstabelle der Regionen ist zu sehen, welche Regionen die unterstützten Services aufweisen. Zu den unterstützten Regionen zählen:

    • us-east-1 (Nord-Virginia)
    • us-east-2 (Ohio)
    • us-west-2 (Oregon)
    • eu-west-1 (Irland)

    Nutzen Sie das Dropdown-Menü oben rechts in der AWS-Managementkonsole, um eine Region auszuwählen.

  • A: Erstellen einer neuen AWS Cloud9-Umgebung

    Geben Sie auf der Startseite der AWS-Konsole den Text Cloud9 in die Service-Suchleiste ein und wählen Sie den entsprechenden Eintrag aus:

    Erstellen eines Lex-Bots

    (zum Vergrößern anklicken)

    Klicken Sie bei der Cloud9-Startseite auf Umgebung erstellen:

    Erstellen eines Lex-Bots

    (zum Vergrößern anklicken)

    Benennen Sie Ihre Umgebung MythicalMysfitsIDE mit einer beliebigen Beschreibung und klicken Sie auf Nächster Schritt:

    Erstellen eines Lex-Bots

    (zum Vergrößern anklicken)

    Lassen Sie die Umgebungseinstellungen unverändert und klicken Sie auf Nächster Schritt:

    Erstellen eines Lex-Bots

    (zum Vergrößern anklicken)

    Klicken Sie auf Umgebung erstellen:

    Erstellen eines Lex-Bots

    (zum Vergrößern anklicken)

    Wenn die IDE erfolgreich erstellt wurde, wird Ihnen der folgende Willkommensbildschirm angezeigt:

    Erstellen eines Lex-Bots

    (zum Vergrößern anklicken)

    B: Klonen des Mythical Mysfits Workshop Repository

    Im unteren Bereich finden Sie eine geöffnete und einsatzbereite Terminal-Befehlszeile. Führen Sie den folgenden Git-Befehl im Terminal aus, um den Code zu klonen, der zum Abschließen dieses Tutorials erforderlich ist:

    git clone -b python https://github.com/aws-samples/aws-modern-application-workshop.git

    Wenn Sie das Repository geklont haben, können Sie die geklonten Dateien im Projekt-Explorer sehen:

    Geklonte Dateien

    (zum Vergrößern anklicken)

    Im Terminal ändern Sie das Verzeichnis zum Verzeichnis des neu geklonten Repository:

    cd aws-modern-application-workshop
  • A: Erstellen eines S3-Buckets und Konfigurieren zum Website-Hosting

    Als Nächstes erstellen wir die erforderlichen Infrastrukturkomponenten zum Hosten einer statischen Website in Amazon S3 über die AWS CLI.

    Zuerst erstellen Sie einen S3-Bucket und ersetzen Sie den nachfolgenden Namen (mythical-mysfits-bucket-name) durch Ihren eigenen eindeutigen Bucket-Namen. Hinweis: Bitte beachten Sie die Anforderungen für Bucket-Namen. Kopieren Sie den Namen, den Sie gewählt haben, und speichern Sie ihn für später, weil Sie ihn noch mehrere Male in diesem Workshop brauchen werden:

    aws s3 mb s3://REPLACE_ME_BUCKET_NAME

    Da wir jetzt ein Bucket erstellt haben, müssen wir bestimmte Konfigurationsoptionen einstellen, damit das Bucket für das Hosting einer statischen Website verwendet werden kann. Durch diese Konfiguration können die Objekte im Bucket mit einem registrierten öffentlichen DNS-Namen für den Bucket angefordert und Website-Anforderungen an den Basispfad des DNS-Namens zu einer ausgewählten Website-Startseite (index.html in den meisten Fällen) geleitet werden:

    aws s3 website s3://REPLACE_ME_BUCKET_NAME --index-document index.html
    B: Aktualisieren der S3-Bucket-Richtlinie

    Alle Buckets, die in Amazon S3 erstellt werden, sind standardmäßig vollständig privat. Um den Bucket als öffentliche Website verwenden zu können, müssen wir eine S3-Bucket-Richtlinie erstellen, die festlegt, dass in diesem neuen Bucket gespeicherte Objekte öffentlich von jeder Person aufgerufen werden können. Bucket-Richtlinien werden mit JSON-Dokumenten festgelegt, die die erlaubten (oder nicht erlaubten) S3-Aktionen (S3-API-Aufrufe) definieren, die von verschiedenen Prinzipalen (in unserem Fall von der breiten Öffentlichkeit bzw. von jedem) ausgeführt werden dürfen.

    Das JSON-Dokument für die erforderliche Bucket-Richtlinie finden Sie unter: ~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json. Die Datei enthält eine Zeichenfolge, die durch Ihren gewählten Bucket-Namen ersetzt werden muss (hervorgehoben durch REPLACE_ME_BUCKET_NAME).

    Hinweis: Im Verlauf dieses Workshops werden Sie immer wieder Dateien öffnen, von denen bestimmte Inhalte ersetzt werden müssen (alle davon tragen das Präfix "REPLACE_ME_", damit Sie sie auch einfach mit STRG-F bei Windows oder ⌘-F bei einem Mac finden können.) 

    Wenn Sie in Cloud9 eine Datei öffnen möchten, verwenden Sie den Datei-Explorer im linken Bereich und führen Sie einen Doppelklick auf "website-bucket-policy.json" aus:

    Öffnen einer Datei in Cloud9

    (zum Vergrößern anklicken)

    Dadurch wird "bucket-policy.json" im Datei-Editor geöffnet. Ersetzen Sie die angezeigte Zeichenfolge mit Ihrem Bucket-Namen, den Sie in den vorherigen Befehlen verwendet haben:

    Ersetzen des Bucket-Namens

    (zum Vergrößern anklicken)

    Führen Sie den folgenden CLI-Befehl aus, um eine öffentliche Bucket-Richtlinie zu Ihrer Website hinzuzufügen:

    aws s3api put-bucket-policy --bucket REPLACE_ME_BUCKET_NAME --policy file://~/environment/aws-modern-application-workshop/module-1/aws-cli/website-bucket-policy.json
    C: Veröffentlichen der Website-Inhalte bei S3

    Da jetzt unser neues Website-Bucket korrekt konfiguriert ist, können wir die erste Iteration der Mythical Mysfits-Startseite zum Bucket hinzufügen. Verwenden Sie den folgenden S3-CLI-Befehl, der dem Linux-Befehl zum Kopieren von Dateien entspricht (cp), um die bereitgestellte index.html-Seite lokal von Ihrer IDE zum neuen S3-Bucket zu kopieren (und den Bucket-Namen entsprechend zu ersetzen).

     aws s3 cp ~/environment/aws-modern-application-workshop/module-1/web/index.html s3://REPLACE_ME_BUCKET_NAME/index.html 

    Öffnen Sie jetzt einen beliebigen Webbrowser und geben Sie einen der nachfolgenden URIs in die Adressleiste ein. Einer der nachfolgenden URIs enthält einen Punkt "." vor dem Regionsnamen, der andere einen Bindestrich "-". Sie müssen die Auswahl in Abhängigkeit Ihrer verwendeten Region treffen.

    Die Zeichenfolge zum Ersetzen von "REPLACE_ME_YOUR_REGION" muss der Region entsprechen, in der Sie das S3-Bucket erstellt haben (z. B. us-east-1):

    Für us-east-1 (Nord-Virginia), us-west-2 (Oregon), eu-west-1 (Irland) verwenden Sie:

    http://REPLACE_ME_BUCKET_NAME.s3-website-REPLACE_ME_YOUR_REGION.amazonaws.com

    Für us-east-2 (Ohio) verwenden Sie:

    http://REPLACE_ME_BUCKET_NAME.s3-website.REPLACE_ME_YOUR_REGION.amazonaws.com
    mysfits-welcome

    Gratulation, Sie haben die grundlegende statische Mythical Mysfits Website erstellt!

    Damit ist Modul 1 abgeschlossen.

Als Nächstes: Hosten Ihrer Anwendung auf einem Webserver.