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 Webanwendung

In diesem Modul stellen Sie statische Ressourcen für Ihre Web-Anwendung unter Verwendung der AWS Amplify Konsole bereit.

Einführung

In diesem Modul werden Sie die AWS Amplify Konsole verwenden, um die statischen Ressourcen für Ihre Webanwendung bereitzustellen. 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.)

Alle Ihre statischen Webinhalte – einschließlich HTML, CSS, JavaScript, Bildern und anderen Dateien – werden von AWS Amplify gehostet. Wir haben uns für den Amplify Service entschieden, da er das Hosten und Bereitstellen von statischen Websites vereinfacht. Ihre Endbenutzer werden auf Ihre Website über die von Amplify offengelegte URL zugreifen.

Machen Sie sich keine Sorgen, falls Sie bei so vielen Neuerungen nervös werden! Sie werden im Moment keine anderen AWS-Services nutzen, und Sie brauchen auch keine Webserver zu betreiben! (Ein "Server" ist ein Software- oder Hardware-Gerät, das über ein Netzwerk gestellte Anfragen annimmt und beantwortet), um Ihre Website verfügbar zu machen.

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. Wenn Sie daran interessiert sind, bietet Amplify auch Unterstützung für benutzerdefinierte Domänen.

Lerninhalte

  • Wie Sie eine Amplify-Anwendung erstellen
  • Wie Sie Dateien für eine Website direkt zu Amplify hochladen
  • Wie Sie neue Versionen einer Webseite mit Amplify bereitstellen

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!

Webhosting stellt die Technologien/Services bereit, damit die Website im Internet angezeigt werden kann

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

5 Minuten

 Verwendete Services

 Voraussetzungen für das Modul

Implementierung

  • Erstellen einer Webanwendung mit der Amplify Konsole
    1. Öffnen Sie Ihren bevorzugten Texteditor auf Ihrem Computer. 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>

    2. Speichern Sie die Datei als index.html.

    3. ZIP (komprimieren) Sie nur die HTML-Datei.

    4. Melden Sie sich in einem neuen Browserfenster bei der Amplify Konsole an. HINWEIS: Wir werden für dieses Tutorial die Region Oregon (us-west-2) verwenden.

    5. Klicken Sie unter Bereitstellen auf die orangefarbene Schaltfläche Erste Schritte.

    6. Wählen Sie Bereitstellen ohne Git-Anbieter. Das sollten Sie auf dem Bildschirm sehen:

    full-stack amplify console module one AmplifyAppSetup

    7. Klicken Sie auf die orangefarbene Schaltfläche Weiter.

    8. Geben Sie im Feld App-Name den Befehl GettingStarted ein.

    9. Für den Umgebungs-Namenstyp dev.

    10. Wählen Sie die Drag & Drop-Methode. Das sollten Sie auf dem Bildschirm sehen:

    full-stack amplify console module one AmplifyManualDeploy

    11. Klicken Sie auf die Schaltfläche Dateien auswählen.

    12. Wählen Sie die ZIP-Datei aus, die Sie in Schritt 3 erstellt haben.

    13. Klicken Sie auf die orangefarbene Schaltfläche Speichern und Bereitstellen.

    14. Nach einigen Sekunden sollten Sie die Meldung Bereitstellung erfolgreich abgeschlossen sehen.

  • Testen Sie Ihre Webanwendung
    1. Klicken Sie auf den Link unter Domain.
    2. Ihre Webanwendung wird in einem neuen Browser-Tab geladen und zeigt "Hallo Welt" an. Herzlichen Glückwunsch!

Anwendungsarchitektur

So sieht unsere Architektur im Augenblick aus:

full-stack amplify console arch diagram module 1

Im Moment ist sie ziemlich minimal, da wir nur die AWS Amplify Konsole verwenden. Wir haben jetzt Live-Webanwendungen, mit denen Benutzer interagieren können. Als Nächstes erstellen wir eine Lambda-Funktion.

War das Modul hilfreich?

Vielen Dank
Bitte teilen Sie uns mit, was Ihnen gefallen hat.
Schließen
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.
Schließen

Erstellen einer serverlosen Funktion