Erste Schritte mit AWS

Erstellen einer einfachen Webanwendung

Bereitstellen einer Webanwendung und Einrichten der Interaktivität mit einer API und einer Datenbank

Modul 1: Erstellen einer statischen Website

In diesem Modul erstellen und hosten Sie eine statische Website mit Amazon S3.

Einführung

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 AWS Lambda und Amazon API Gateway dynamische Funktionen zum Aufrufen von RESTful-APIs hinzu. (REST steht für „Representational State Transfer“ und ist ein architektonisches Muster zum Erstellen von Web-Services. API steht für „Application Program Interface“. Daher handelt es sich bei der RESTful-API um eine API, die dieses architektonische Muster implementiert.)

Im Rahmen dieses Moduls verwenden Sie die von Amazon S3 bereitgestellte Website-Endpunkt-URL. Dies hat folgende Form:

http://{your-bucket-name}.s3-website.{region}.amazonaws.com

Alle statischen Webinhalte, z. B. HTML, CSS, JavaScript, Bilder und andere Daten, werden in Amazon S3 gespeichert. Wir haben den S3-Service ausgewählt, da er einen Objektspeicher enthält, damit wir Dateien direkt in ihm speichern und von ihm abrufen können. Ihre Endbenutzer können Ihre Website einfach aufrufen, indem sie die von S3 angezeigte Objekt-URL verwenden.

Machen Sie sich keine Sorgen, falls Sie bei so vielen Neuerungen nervös werden! Sie verwenden keine anderen AWS-Services in diesem Modul und müssen auch keine Webserver ausführen (bei einem „Server“ handelt es sich um Software oder ein Hardwaregerät, das Anfragen über ein Netzwerk entgegennimmt und darauf reagiert), um Ihre Website zur Verfügung zu stellen.

Bei der Website handelt es sich um eine äußerst einfache „Hello World“-Seite. Wir fügen in späteren Modulen keine weiteren Funktionen hinzu.

Für die meisten richtigen Anwendungen müssen Sie eine benutzerdefinierte Domäne verwenden, um Ihre Website zu hosten. (Eine „benutzerdefinierte Domäne“ ist ein eindeutiger Markenname, der eine Website kennzeichnet, wie etwa www.amazon.com. Falls Sie an der Nutzung Ihrer eigenen Domäne über den Umfang dieses Moduls hinaus interessiert sind, können Sie die Anweisungen in diesem Handbuch befolgen).

Sie lernen Folgendes:

  • Erstellen eines S3-Buckets
    • Daten werden als Objekte in Ressourcen gespeichert, die als „Buckets“ bezeichnet werden.
  • Hochladen von Dateien in ein S3-Bucket
  • Navigieren zur S3-Konsole, um Einstellungen für „Buckets“ und „Objekte“ zu bearbeiten
  • Ändern der Sicherheitsstufe in einem S3-Bucket und Ändern des Status von enthaltenen Objekten in „Öffentlich“
  • Aktivieren des Webhostings in einem S3-Bucket
    • „Webhosting“ stellt die Technologien/Services bereit, damit die Website im Internet angezeigt werden kann

Wichtige Konzepte

Statische Website Eine statische Website hat festen Content, anders als dynamische Websites. Statische Websites sind der grundlegendste Typ einer Website und am einfachsten zu erstellen. Dafür müssen lediglich ein paar HTML-Seiten erstellt und auf einem Webserver veröffentlicht werden!

Ressource Eine Entität, mit der Sie arbeiten können (Beispiel: ein Amazon S3-Bucket).

Objektspeicher Eine Computerdatenspeicher-Architektur, die Daten als Objekte verwaltet, im Gegensatz zu anderen Speicherarchitekturen, in denen Daten als Dateien oder Blöcke gespeichert werden.

S3-Objekte Eine Ressource, die Daten und Metadaten enthält (eine Reihe von Daten, die Informationen über andere Daten beschreibt und übermittelt) und einem eindeutigen Schlüssel zugeordnet ist, der sie kennzeichnet.

S3-Bucket Eine Ressource, die verwendet wird, um mehrere gespeicherte Objekte zu gruppieren. Sie muss einen global einzigartigen Namen haben.

S3-Objekt URL Eindeutige über das Web aufrufbare Adresse, die vom S3-Service für ein darin gespeichertes Objekt angegeben wird.

AWS-Regionen Separate geografische Bereiche, die AWS zur Unterbringung der Infrastruktur verwendet. Diese sind über die ganze Welt verteilt, sodass Kunden stets die nächstgelegene Region wählen können, um ihre Cloud-Infrastruktur zu hosten.

 Veranschlagte Zeit

10 Minuten

 Verwendete Services

 Voraussetzungen für das Modul

Implementierung

  • Erstellen eines Buckets mit öffentlichem Zugriff
    1. Melden Sie sich mit Ihren AWS-Anmeldeinformationen in der Amazon S3-Konsole an.
    2. Klicken Sie auf die orangefarbene Schaltfläche „Create bucket (Bucket erstellen)“.
    3. Benennen Sie den Bucket. Alle Amazon S3-Buckets haben denselben Namensraum, ganz gleich, in welchem Konto sie erstellt werden. Der Name muss also global eindeutig sein.
    4. Wählen Sie die Region für den Bucket aus. Im Rahmen dieses Tutorials wählen Sie bitte die Region, die Ihnen am nächsten ist.
    5. Deaktivieren Sie „Block all public access (Gesamten öffentlichen Zugriff blockieren)“. Da wir eine Website hosten, soll jeder Zugriff haben.
    6. Aktivieren Sie das Kontrollkästchen neben „Block public access to buckets and objects granted through new public bucket or access point policies (Öffentlichen Zugriff auf Buckets und Objekte blockieren, der durch neue Richtlinien für öffentliche Buckets oder Zugriffspunkte gewährt wurde)“.
    7. Aktivieren Sie das Kontrollkästchen neben „Block public and cross-account access to buckets and objects through any public bucket or access point policies (Öffentlichen und kontoübergreifenden Zugriff auf Buckets und Objekte blockieren, der durch eine Richtlinie für öffentliche Buckets und Zugriffspunkte gewährt wurde)“.
    8. Aktivieren Sie das Kontrollkästchen, um Ihre Einwilligung zu erteilen, dass die Inhalte dieses Buckets möglicherweise öffentlich zugänglich werden. Weil seine Inhalte möglicherweise öffentlich verfügbar sind, speichern wir keine vertraulichen Informationen in diesem Bucket. Er sollte wie folgt aussehen:
    Full Stack tutorial bucket settings

    9. Klicken Sie auf die orangefarbene Schaltfläche „Create bucket (Bucket erstellen)“.

    10. Oben auf der Seite sollte ein grünes Feld mit dem Hinweis „Successfully created bucket (Bucket erstellt)“ zu sehen sein.

  • Konfigurieren des Buckets für das Hosten einer Website
    1. Suchen Sie in der Liste unten den neuen Bucket und klicken Sie darauf.
    2. Klicken Sie auf die graue Registerkarte „Properties (Eigenschaften)“.
    3. Wählen Sie „Static website hosting (Hosten einer statischen Website)“ aus.
    4. Wählen Sie das Optionsfeld „Use this bucket to host a website (Diesen Bucket für das Hosten einer Website nutzen)“ aus.
    5. Geben Sie unter „Index Document (Indexdokument)“ den Text index.html ein.
    6. Geben Sie unter „Error Document (Fehlerdokument)“ den Text error.html ein. Es sollte wie folgt aussehen:  
    Full Stack tutorial bucket hosting

    7. Klicken Sie auf die blaue Schaltfläche „Save (Speichern)“.

    8. Klicken Sie auf die graue Registerkarte „Overview (Übersicht)“.

    9. Schließen Sie den Browser nicht, sondern öffnen Sie auf Ihrem Computer einfach Ihren bevorzugten Texteditor. Erstellen Sie eine neue Datei und fügen Sie folgende HTML ein:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    
    <body>
        Hello World
    </body>
    </html>

    10. Speichern Sie die Datei als index.html.

    11. Erstellen Sie eine zweite Textdatei und fügen Sie Folgendes ein:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Error Page</title>
    </head>
    
    <body>
        Error Page
    </body>
    </html>

    12. Speichern Sie die zweite Datei als error.html.

    13. Kehren Sie in den Browser zurück.

    14. Klicken Sie auf die blaue Schaltfläche „Upload (Hochladen)“.

    15. Wählen Sie die Datei index.html und error.html aus, um sie hochzuladen.  

    Full Stack tutorial upload-html

    16. Klicken Sie auf die blaue Schaltfläche „Next (Weiter)“.

    17. Wählen Sie im Dropdown-Menü „Manage public permissions (Öffentliche Berechtigungen verwalten)“ die Option „Grant public read access to this object(s) (Öffentlichen Zugriff auf Objekt(e) gestatten)“ aus. So kann jeder die Website in seinem Browser aufrufen – auch wir, um sie zu testen.

    Full Stack tutorial GrantPublicRead

    18. Klicken Sie auf die links angezeigte blaue Schaltfläche „Upload (Hochladen)“.

  • Testen der statischen Website
    1. Klicken Sie in der Liste auf index.html.
    2. Klicken Sie unter „Object URL (Objekt-URL)“ auf den Link.
    3. Daraufhin sollte sich im Browser eine neue Registerkarte öffnen und eine simple Webseite mit „Hello World (Hallo Welt)“ angezeigt werden.
    4. Glückwunsch, Sie haben eine statische Website gehostet!

Anwendungsarchitektur

So sieht unsere Architektur im Augenblick aus:

Full Stack tutorial Module One app arch

Sie ist derzeit ziemlich minimal, da wir nur den S3-Service verwenden. Wir haben überprüft, dass Benutzer unsere in S3 gespeicherte Web-App aufrufen können. Als Nächstes erstellen wir eine AWS Lambda-Funktion.

War das Modul hilfreich?

Vielen Dank
Bitte teilen Sie uns mit, was Ihnen gefallen hat.
Es tut uns leid Sie zu enttäuschen
Ist etwas veraltet, verwirrend oder ungenau? Bitte helfen Sie uns, dieses Tutorial zu verbessern, indem Sie Feedback geben.

Erstellen einer serverlosen Funktion