Bereitstellen einer Webanwendung auf Amazon Amplify

LEITFADEN FÜR DIE ERSTEN SCHRITTE

Modul 3: Einsatz automatisieren

In diesem Modul stellen Sie Ihre Webanwendung mithilfe der in Amplify integrierten CI\CD-Pipeline bereit

Einführung

In diesem Modul werden Sie Ihre Anwendung in einem GitHub-Repository (kurz: Repo) speichern und dann die kontinuierliche Bereitstellung mithilfe der Amplify-Konsole einrichten.

Das werden Sie lernen

  • Verbinden eines Github-Repositorys mit Amplify
  • Einrichtung der kontinuierlichen Bereitstellung mit Amplify

 Benötgte Zeit

5 Minuten

 Voraussetzungen für das Modul

  • AWS-Konto mit Administratorzugriff**
  • Empfohlener Browser: aktuelle Version von Chrome oder Firefox

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

Implementierung

Projekt auf GitHub speichern

Bevor Sie Ihr Projekt für die automatische Bereitstellung von Updates einrichten können, müssen Sie es irgendwo hosten. Diese Anleitung setzt voraus, dass Sie mit GitHub vertraut sind, ein Konto haben und wissen, wie man ein neues privates Repository erstellt. Bitte erstellen Sie ein privates Repository und pushen Sie den Code, den Sie bisher erstellt haben, in dieses Repository.

Kontinuierliche Bereitstellung einrichten

Um Amplify für die Bereitstellung Ihres Codes zu konfigurieren, müssen Sie es mit Ihrem GitHub-Konto verbinden. Dies geschieht über die AWS-Konsole, da diese ein GitHub-Token für den Zugriff auf Ihr privates Repository generieren und in Ihrem AWS-Konto speichern muss. Führen Sie dazu im Verzeichnis amplify-app den Befehl amplify add hosting aus. Amplify wird eine Liste mit Fragen zum Hosting vorlegen. Bitte wählen Sie die unten aufgeführten Optionen aus:

amplify add hosting

? Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
  Amazon CloudFront and S3
? Choose a type
❯ Continuous deployment (Git-based deployments)
  Manual deployment
  Learn more

Dadurch wird ein neues Fenster in Ihrem Browser geöffnet und die Amplify-Konsole geöffnet, in der Sie das Hosting für Ihr Projekt konfigurieren können. Klicken Sie auf der App-Seite in der Amplify-Konsole auf die Registerkarte Frontend-Umgebungen, wählen Sie GitHub und klicken Sie auf die Schaltfläche Zweig verbinden.

gsg-build-amplify-4.png

Dadurch werden Sie zu GitHub weitergeleitet. Jetzt geben Sie der Amplify-Konsole Zugriff auf Ihr GitHub-Konto, damit sie den Quellcode bereitstellen kann, den Sie dort hosten. Klicken Sie dazu auf die grüne Schaltfläche aws-amplify-console autorisieren.

gsg-build-amplify-5

Sie werden nun Ihr GitHub-Repository mit Ihrer Amplify-Anwendung verbinden. Wählen Sie auf der Seite Repository-Zweig hinzufügen das amplify-web-app Repository und den Hauptzweig aus. Klicken Sie dann auf Weiter.

gsg-build-amplify-6

Der nächste Schritt ist die Konfiguration der Build-Einstellungen für Ihre Anwendung. Sie benötigen eine IAM-Service-Rolle, die es Amplify ermöglicht, auf Ihre AWS-Ressourcen innerhalb Ihres Kontos zuzugreifen, um sie automatisch bereitzustellen. Klicken Sie auf der Build-Einstellungen-konfigurieren-Seite auf die Schaltfläche Neue Rolle erstellen im blauen Feld.

gsg-build-amplify-7

Dadurch wird die IAM-Konsole auf einer neuen Registerkarte geöffnet, die mit den erforderlichen Werten gefüllt wird. Klicken Sie auf Rolle erstellen:

  • Typ der vertrauenswürdigen Entität: AWS Service
  • Service: Amplify
  • Anwendungsfall: Amplify - Backend-Bereitstellung
  • Berechtigungsrichtlinie: AdministratorAccess-Amplify
gsg-build-amplify-8

Nach der Erstellung können Sie diese Registerkarte in Ihrem Browser schließen und zur Seite Build-Einstellungen konfigurieren zurückkehren. Klicken Sie auf Vorhandene Rollen aktualisieren und wählen Sie dann die soeben erstellte Rolle aus dem Dropdown-Menü aus. Wählen Sie dann dev aus dem Dropdown-Menü Environment aus - dies ist die Umgebung, die Sie bei der Konfiguration von Amplify für Ihr Projekt erstellt haben, nachdem Sie amplify init ausgeführt haben.

Belassen Sie die übrigen Einstellungen auf den Standardwerten und klicken Sie auf Weiter.

gsg-build-amplify-9

Überprüfen Sie die von Ihnen konfigurierten Werte, und klicken Sie auf Speichern und Bereitstellen. Amplify wird nun beginnen, Ihre React-Anwendung bei Änderungen im Quellcode-Repository automatisch bereitzustellen.

gsg-build-amplify-10

Sie können nun zu Ihrem Terminal zurückkehren und den Fortschritt verfolgen, indem Sie die Eingabetaste drücken:

? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository
Amplify hosting urls:
┌──────────────┬────────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                     │
├──────────────┼────────────────────────────────────────────┤
│ main         │ https://main.d339jiqv9kzj2m.amplifyapp.com │
└──────────────┴────────────────────────────────────────────┘

Sobald die Bereitstellung abgeschlossen ist, ist sie unter der angegebenen URL verfügbar, und jeder kann über diese URL auf Ihre Anwendung zugreifen.

Zusammenfassung

In diesem Modul haben Sie gelernt, wie Sie Ihr privates GitHub-Repository mit dem Code der Webanwendung verbinden, um die automatische Bereitstellung mit Amplify einzurichten. Im nächsten Modul erfahren Sie, wie Sie die soeben bereitgestellte Anwendung zusammen mit allen dafür erstellten AWS-Ressourcen löschen können.

Nächstes Thema: Ressourcen für Aufräumarbeiten

Lassen Sie uns wissen, wie wir abgeschnitten haben.

Vielen Dank für Ihr Feedback
Wir freuen uns, dass diese Seite Ihnen geholfen hat. Würden Sie uns weitere Details mitteilen, damit wir uns weiter verbessern können?
Schließen
Vielen Dank für Ihr Feedback
Es tut uns leid, dass diese Seite Ihnen nicht weiterhelfen konnte. Würden Sie uns weitere Details mitteilen, damit wir uns weiter verbessern können?
Schließen