Hosten einer statischen Website

Hosten Ihrer einfachen Marketing-Website oder Webanwendung auf AWS

Einführung

Statische Websites stellen den Website-Besuchern HTML, JavaScript, Images, Video und weitere Dateien bereit. Statische Websites sind kostengünstig im Unterhalt, bieten ein hohes Maß an Zuverlässigkeit, erfordern nahezu keine IT-Administration und können nach einer Skalierung ohne weiteren Arbeitsaufwand Datenverkehr auf Unternehmensniveau verarbeiten.

Siehe FAQs für weitere Informationen >>

Lerninhalte

  • Hosten einer statischen Website mit AWS Amplify in der AWS-Konsole. AWS Amplify bietet vollständig verwaltetes Hosting für statische Websites und Web-Anwendungen. Die Hosting-Lösung von Amplify nutzt Amazon CloudFront und Amazon S3, um Ihre Website-Ressourcen über das AWS Content Delivery Network (CDN) bereitzustellen.
  • Richten Sie eine kontinuierliche Bereitstellung ein: Amplify bietet einen Git-basierten Workflow mit kontinuierlicher Bereitstellung, der es Ihnen ermöglicht, bei jedem Code-Commit automatisch Aktualisierungen auf Ihrer Website bereitzustellen.

 Erfahrung mit AWS

Einsteiger

 Veranschlagte Zeit

10 Minuten

 Veranschlagte Kosten

Die Gesamtkosten für das Hosting Ihrer statischen Website auf AWS hängen von Ihrer Nutzung ab

Eine Aufschlüsselung der genutzten Services und der damit verbundenen Kosten finden Sie unter Preise für AWS Amplify und Amazon Route 53.

 Tutorial-Voraussetzungen

 
[*] Innerhalb der letzten 24 Stunden erstellte Konten haben möglicherweise noch keinen Zugriff auf alle für dieses Tutorial erforderlichen Services.

Implementierung

  • Repository erstellen und verbinden

    Um dieses Tutorial durchführen zu können, müssen Sie ein Respository erstellen und initialisieren. Am einfachsten geht dies mit dem Befehl create-react-app. Installieren Sie dieses Paket mit dem folgenden Befehl in Ihrer Eingabeaufforderung oder Ihrem Terminal:

    Haben Sie bereits ein Repository zum Verbinden? Springen Sie zu Schritt c unten.
    Möchten Sie eine Bereitstellung vornehmen, ohne eine Verbindung zu einem Git-Anbieter herzustellen? Beginnen Sie, indem Sie hier klicken.
    npx create-react-app amplifyapp
    cd amplifyapp
    npm start

    In diesem Schritt erstellen Sie ein GitHub-Repository und führen für Ihren Code einen Commit an das Repository durch. Sie benötigen ein GitHub-Konto, um diesen Schritt fertigzustellen. Falls Sie kein Konto besitzen, registrieren Sie sich hier.

    a. Erstellen Sie ein neues GitHub-Repository für Ihre App (Link).

    Front End GitHub Repository Module 1

    b. Initialisieren Sie Git und übertragen Sie die Anwendung an das neue GitHub-Repository, indem Sie die folgenden Befehle in Ihrer Befehlszeilenschnittstelle ausführen:

    git init
    git remote add origin git@github.com:username/reponame.git
    git add .
    git commit -m “initial commit”
    git push origin master

    c. Um Ihr Repository zu verbinden, melden Sie sich bei der Amplify-Konsole an und wählen Sie unter Bereitstellung die Option Erste Schritte.

    1-gettingstarted

    Verbinden Sie Ihre GitHub-, Bitbucket-, GitLab- oder AWS CodeCommit-Repositorys. Sie haben auch die Möglichkeit, Ihre Build-Artefakte manuell hochzuladen, ohne ein Git-Repository anzuschließen (siehe Manuelle Bereitstellungen). Nachdem Sie die Amplify-Konsole autorisiert haben, holt Amplify ein Zugriffstoken vom Repository-Anbieter, speichert das Token aber nicht auf den AWS-Servern. Verstärken Sie den Zugriff auf Ihr Repository, indem Sie Bereitstellungsschlüssel verwenden, die nur in einem bestimmten Repository installiert sind.

    2-connectrepository

    Nachdem Sie den Repository-Service-Anbieter angeschlossen haben, wählen Sie ein Repository aus und wählen dann einen entsprechenden Zweig zur Erstellung und Bereitstellung.

    3-repositorybranch
  • Build-Einstellungen bestätigen

    Für den ausgewählten Zweig inspiziert Amplify Ihr Repository, um automatisch die Reihenfolge der auszuführenden Build-Befehle zu ermitteln. Bestätigen Sie Ihre Build-Einstellungen und klicken Sie auf Weiter.

    next-host
  • Speichern und bereitstellen

    Überprüfen Sie alle Ihre Einstellungen, um sicherzustellen, dass alles korrekt eingerichtet ist. Wählen Sie Speichern und bereitstellen, um Ihre Webanwendung in einem globalen Content-Delivery-Netzwerk (CDN) bereitzustellen. Ihr Frontend-Build dauert normalerweise 1 bis 2 Minuten, kann aber je nach Größe der App variieren.

    8-saveanddeploy

War dieses Tutorial 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

Hosten einer statischen Website mit Amazon S3

Sie können auch Amazon S3 verwenden, um Ihre statische Website zu hosten. Das Hosting einer statischen Website auf Amazon S3 liefert eine hochperformante und skalierbare Website zu einem Bruchteil der Kosten eines herkömmlichen Webservers.

Um eine statische Website auf Amazon S3 zu hosten, konfigurieren Sie einen Amazon S3-Bucket für das Website-Hosting und laden Sie Ihren Website-Content hoch. Mit der AWS-Managementkonsole können Sie Ihren Amazon S3-Bucket als statische Website konfigurieren, ohne Code zu schreiben. Je nach den Anforderungen Ihrer Website können Sie auch einige optionale Konfigurationen verwenden, darunter Weiterleitungen, Protokollierung des Webverkehrs und benutzerdefinierte Fehlerdokumente.

Weitere Informationen zum Hosten einer statischen Website auf Amazon S3, einschließlich Anweisungen und Schritt-für-Schritt-Walkthroughs, finden Sie im Implementierungsleitfaden.

Herzlichen Glückwunsch!

Sie haben erfolgreich eine statische Webanwendung auf AWS erstellt! Als großen nächsten Schritt sollten Sie tiefer in AWS Amplify eintauchen und sich das vollständige Set an Tools und Services für die Entwicklung von Mobil- und Web-Anwendungen auf AWS ansehen.