Hosten einer statischen Website

Implementierung

• Erstellen und Verbinden eines Repository

  Um dieses Tutorial beginnen zu können, müssen Sie ein Repository 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

  Code snippet copied

  Kopieren

  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).
  

  

  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

  Code snippet copied

  Kopieren

  c. Um Ihr Repository zu verbinden, melden Sie sich in der Amplify-Konsole an und wählen Sie oben auf der Seite Erste Schritte und dann Erste Schritte unter Amplify Hosting.
  

  

  

  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.
  

  

  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.
  

  

• 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.
  

  

• 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-Network (CDN) bereitzustellen. Ihr Frontend-Build dauert normalerweise 1 bis 2 Minuten, kann aber je nach Größe der App variieren.