In dieser Anleitung zeige ich Ihnen Schritt für Schritt, wie Sie eine ReactJS-Anwendung auf AWS Amplify deployen. Dabei richten wir zunächst eine lokale ReactJS-Anwendung in AWS Cloud9 ein und übertragen sie anschließend für den produktiven Einsatz zu AWS Amplify. Außerdem zeige ich, wie sich die App über ein GitHub-Repository ausrollen lässt.
Sie erfahren, wie Sie die App mit AWS Amplify hosten und über Amazon S3 sowie CloudFront performant ausliefern. Zum Abschluss binden wir noch eine eigene Domain an die App an.
Warum AWS Amplify? AWS Amplify bündelt eine Reihe von Tools und Services, mit denen Engineers Full-Stack-Anwendungen für Web und Mobile auf AWS bauen und deployen können. Mit AWS Amplify lässt sich in wenigen Minuten ein App-Backend mit Authentifizierung, Datenhaltung, Storage und mehr aufsetzen. Dazu kommt ein visueller Frontend-Builder mit Design-to-Code-Figma-Integration, der das UI per Klick mit dem Backend verbindet.
Amplify unterstützt zahlreiche Web-Frameworks und läuft auf der sicheren, skalierbaren AWS-Cloud. Egal, ob Sie gerade erst einsteigen oder seit Jahren entwickeln – AWS Amplify nimmt Ihnen viel Arbeit ab.
Voraussetzungen für das Tutorial
Für dieses Tutorial benötigen Sie:
- Ein AWS-Konto.
- Ein GitHub-Konto zum Hosten von Git-Repositories.
- Grundkenntnisse in der Git-CLI, um Commits in ein Remote-Repository zu pushen.
- Eine eigene Domain (optional).
AWS Cloud9-Umgebung anlegen
AWS Cloud9 ist eine leistungsstarke cloudbasierte IDE, in der Engineers direkt im Browser entwickeln, ausführen und debuggen. Ideal für Serverless- und ReactJS-Apps – und ohne lokale Installation für viele Sprachen einsatzbereit.
In diesem Schritt legen wir eine Umgebung in AWS Cloud9 an und nutzen sie, um eine lokale ReactJS-Anwendung zu erstellen.
Öffnen Sie die AWS Cloud9-Konsole unter https://console.aws.amazon.com/cloud9/.
Wir starten mit einer neuen Cloud9-Umgebung. Sie läuft auf einer T3.small-Instanz mit Amazon Linux 2. Den Zugriff auf die zugrunde liegende Instanz steuern wir über AWS Systems Manager. So lässt sich die Instanz per SSH erreichen, ohne in der Sicherheitsgruppe eingehende Ports öffnen zu müssen. Während der Einrichtung legt Cloud9 die nötigen IAM-Rollen an, um in Ihrem Namen auf AWS-Services zuzugreifen.
Wählen Sie auf der Übersichtsseite Ihre Cloud9-Instanz aus und klicken Sie auf Open. Sie sind nun mit Ihrer Cloud9-IDE verbunden.
Bevor Sie mit der ReactJS-App loslegen, prüfen Sie, ob auf Ihrer Instanz Node.js in Version 12.x und npm in Version 6.x oder höher läuft.
Diese Versionen sorgen bei React für optimale Performance und Kompatibilität beim Bau von Benutzeroberflächen.
Lokale ReactJS-App erstellen
Richten wir nun eine React-Anwendung in AWS Cloud9 für lokale Tests ein. Im Verzeichnis ‚~/environment‘ legen wir ein neues React-Projekt namens "cloud-wanderer-blog" an. Führen Sie dazu folgende Befehle aus:
$ npx create-react-app cloud-wanderer-blog
$ cd cloud-wanderer-blog
$ npm start
Um die React-App zu starten, wechseln Sie in das Projektverzeichnis ‚cloud-wander-blog‘ und führen ‚npm start‘ aus.
AWS Cloud9 nutzt keinen Localhost, um auf laufende Anwendungen zuzugreifen. Stattdessen steht eine Vorschaufunktion direkt in der Cloud9-IDE zur Verfügung.
Wählen Sie im oberen Menü der AWS Cloud9-IDE Preview > Preview Running Application. Dadurch öffnet sich in Ihrer Umgebung ein neuer Tab mit der laufenden React-App.
GitHub-Repository anlegen und in Cloud9 einbinden
Melden Sie sich in Ihrem GitHub-Konto an und wählen Sie über die Schaltfläche ‚+‘ oben rechts die Option ‚New repository‘. In diesem Repository liegen später die Dateien und Konfigurationen der React-Anwendung. Mein neues Repository habe ich cloud-wanderer genannt.
Aktivieren Sie nicht ‚Add a README file‘ – React hat bei der Installation in Cloud9 bereits eine README-Datei angelegt.
Laden Sie nun Ihre React-Anwendung aus Cloud9 in das neue Remote-Repository auf GitHub hoch. Dafür können Sie die Dateien direkt über GitHub hinzufügen oder die Git-CLI auf Ihrer Cloud9-Instanz nutzen.
Eine Anleitung zum Hochladen von Dateien finden Sie hier: https://docs.github.com/en/repositories/working-with-files/managing-files/adding-a-file-to-a-repository
Hinweis: Beim Initialisieren meines lokalen Git-Repositorys in Cloud9 wurde standardmäßig ein ‚master‘-Branch erstellt. Um Konsistenz mit meinem Remote-Repository auf GitHub sicherzustellen und für die Zukunft gerüstet zu sein, habe ich den lokalen Branch von ‚master‘ in ‚main‘ umbenannt. Diese Umstellung von ‚master‘ auf ‚main‘ ist Teil einer breiteren Initiative für inklusivere Sprache.
Amplify CLI installieren
Nachdem unsere Staging-Umgebung in Cloud9 steht, richten wir nun eine Produktionsumgebung in AWS Amplify ein. Für die Amplify-App habe ich die Amplify CLI aus ‚~/home/ec2-user‘ auf meiner Cloud9-Instanz installiert. Damit die Amplify CLI Dateien und URLs zur AWS Management Console öffnen kann, habe ich zusätzlich xdg-utils installiert.
$ cd
$ sudo yum install xdg-utils -y
$ npm install -g @aws-amplify/cli
Amplify CLI konfigurieren
Damit die Amplify CLI auf Ihrem lokalen Rechner mit Ihrem AWS-Konto kommunizieren kann, müssen Sie sie konfigurieren. Dafür nutzen wir ‚amplify configure‘. Klicken Sie auf den angezeigten Link, um sich an der AWS Console anzumelden.
Wechseln Sie zurück ins Cloud9-Terminal und geben Sie die AWS-Region an. Ich habe mich für eu-west-1 entschieden.
Die Amplify CLI fordert Sie nun auf, einen IAM-Benutzer anzulegen. Klicken Sie auf den Link, um die Seite zur IAM-Benutzererstellung zu öffnen. Vergeben Sie einen Benutzernamen und klicken Sie auf Next. Den Namen können Sie frei wählen – ich nenne den Benutzer "amplify-cli-admin". Klicken Sie anschließend auf Next.
Wählen Sie Attach policies directly und als Permissions policy AdministratorAccess-Amplify aus.
Prüfen Sie auf der Review-Seite die Angaben und klicken Sie auf Create user.
Sie werden zur Benutzerübersicht weitergeleitet. Wählen Sie den gerade angelegten Benutzer aus. Öffnen Sie auf der Detailseite den Tab Security credentials. Scrollen Sie zu Access keys und klicken Sie auf Create access keys.
Wählen Sie als Anwendungsfall Command Line Interface (CLI), bestätigen Sie den Hinweis und klicken Sie auf Next.
Laden Sie die CSV-Datei mit den Access Keys des IAM-Benutzers herunter und speichern Sie sie an einem sicheren Ort.
Wechseln Sie zurück in die Cloud9-Konsole und drücken Sie Enter. Geben Sie den Access Key und den Secret Access Key ein. Übernehmen Sie für den Profilnamen den Standardwert. Damit ist die Amplify CLI in der gewählten Region mit den passenden Sicherheitsanmeldedaten konfiguriert.
Amplify-App initialisieren
Mit dem Befehl ‚amplify init‘ legen Sie ein neues Amplify-Projekt an. Damit wird die React-Anwendung für Amplify vorbereitet. Amplify erkennt das Verzeichnis cloud-wanderer-blog und schlägt sinnvolle Standardwerte vor. Diese können Sie mit ‚Y‘ übernehmen oder mit ‚N‘ ablehnen und eigene Einstellungen vornehmen.
$ cd ~/environment/cloud-wanderer-blog/
$ amplify init
Wählen Sie zur Authentifizierung AWS Profile und das im vorherigen Schritt eingerichtete Standardprofil. Alternativ wählen Sie Access Keys und tragen Access Key und Secret Access Key manuell ein.
Wechseln Sie nun in die Amplify Console und sehen Sie sich die über die Amplify CLI deployte App an.
Amplify mit GitHub-Repository verbinden
Jetzt verbinden wir unsere Amplify-App mit dem GitHub-Repository. Das macht den CI/CD-Prozess deutlich einfacher.
Öffnen Sie in der Amplify Console den Tab für die Hosting-Umgebung der Amplify-App.
Erteilen Sie Amplify die Berechtigung, sich mit Ihrem GitHub-Repository zu verbinden, und wählen Sie Repository und Branch aus.
Wählen Sie unter Build settings als Umgebung ‚dev‘. Legen Sie eine IAM-Rolle an, mit der Amplify auf Ihre Ressourcen zugreifen kann. Amplify erkennt die Standard-Build-Einstellungen automatisch. Bei abweichenden Konfigurationen lässt sich das YAML-Skript jederzeit anpassen.
Prüfen Sie zum Schluss die Einstellungen und klicken Sie auf Save and deploy, um die Anwendung auszurollen.
Provisionierung, Build und Deployment dauern einige Minuten.
Anschließend ist die Amplify-Anwendung über den Endpoint-Link erreichbar.
Continuous Deployment testen
Als Nächstes testen wir das Continuous Deployment. Dafür habe ich die React-Startseite App.js angepasst und mit einer zweiten Seite verlinkt. Die Änderung habe ich lokal in der Vorschau überprüft.
Anschließend habe ich die Änderung über die Git-CLI in Cloud9 ins GitHub-Repository gepusht. AWS Amplify hat die Änderungen automatisch erkannt und einen neuen Build- und Deployment-Prozess gestartet.
Aktualisieren Sie nach Abschluss die Amplify-App im Browser, um die Änderungen zu sehen.
Der Link VISIT Cloud Wanderer BLOG verweist auf die neue Seite.
CloudFront für statische Inhalte bereitstellen
Amazon CloudFront ist entscheidend für die Geschwindigkeit Ihrer Website. CloudFront cacht Ihre Inhalte an AWS-Edge-Locations und liefert sie so schneller an Ihre Nutzer aus.
CloudFront lässt sich über Amplify mit S3 als Origin-Server hinzufügen. Ein Wermutstropfen dieser Methode: Die CloudFront-Distribution kann nicht angepasst werden, weil die Amplify Console die Ressourcen in einem von AWS verwalteten Konto bereitstellt.
Eine Alternative ist die Bereitstellung von CloudFront über die Amplify CLI.
Der Befehl ‚amplify add hosting‘ richtet einen S3-Bucket sowie eine CloudFront-Distribution zum Cachen Ihrer statischen Inhalte ein. Beide Ressourcen können Sie anschließend in Ihrem AWS-Konto einsehen und verwalten.
Führen Sie ‚amplify add hosting‘ aus, wählen Sie Amazon CloudFront and S3 und geben Sie einen Namen für den S3-Bucket ein.
Pushen Sie die Änderungen mit ‚amplify publish‘. Damit werden Build-Artefakte und statische Inhalte in den neuen S3-Bucket hochgeladen. CloudFront liefert die Inhalte anschließend für bessere Ladezeiten aus den Edge-Locations aus.
Mit der AWS CLI lassen sich die Objekte im neu angelegten S3-Bucket auflisten:
$ aws s3 ls s3://cloud-wanderer-bucket-dev - region eu-west-1
Durch das Deployment von CloudFront und S3 entstehen neue Konfigurationen im Amplify-Verzeichnis. Diese Änderungen müssen committet und in Ihr Remote-GitHub-Repository gepusht werden.
CloudFront-Caching-Verhalten
Mit Curl können Sie prüfen, ob CloudFront die statischen Inhalte cacht.
Achten Sie in der Curl-Ausgabe auf den x-cache-Header. ‚Hit from cloudfront‘ zeigt, dass CloudFront die Inhalte cacht. ‚Miss from cloudfront‘ bedeutet hingegen, dass die Inhalte (noch) nicht im Cache liegen.
Kein Grund zur Sorge, wenn beim ersten Aufruf ‚Miss from cloudfront‘ erscheint: Inhalte müssen mindestens einmal abgerufen werden, bevor sie gecacht werden können.
Eigene Domain hinzufügen
Der Standard-Endpoint Ihrer Amplify-App sieht etwa so aus: https://main.d335ddgrzlw9s5.amplifyapp.com/
Damit Ihre Amplify-App leichter erreichbar ist, hinterlegen wir eine eigene Domain.
In diesem Schritt verbinde ich die Domain ‚cloudwanderer.life‘ mit meiner Amplify-App. Erworben habe ich die Domain ‚cloudwanderer.life‘ bei GoDaddy.
Öffnen Sie die Route 53-Konsole unter https://console.aws.amazon.com/route53/
Klicken Sie auf Hosted Zones und anschließend auf Create Hosted Zone. Geben Sie Ihren Domainnamen ein und klicken Sie auf Create. Beim Anlegen einer Hosted Zone weist Route 53 automatisch vier Nameserver zu.
Hinterlegen Sie die Route 53-Nameserver bei Ihrem Domain-Provider (GoDaddy, Google Domains). Damit übernimmt Route 53 die DNS-Verwaltung der Domain.
Bitte beachten Sie: Aufgrund der TTL-Werte (Time to Live) auf DNS-Servern weltweit kann es bis zu 48 Stunden dauern, bis die DNS-Propagation im gesamten Internet wirksam wird.
In der Amplify Console können wir unsere Amplify-Anwendung jetzt unter der eigenen Domain cloudwanderer.life ausliefern.
Klicken Sie in der Amplify Console links im Menü auf Domain Management und anschließend auf die Schaltfläche Add Domain.
Im Dropdown-Menü erscheint die in Route 53 gehostete Domain. Wählen Sie sie aus und klicken Sie auf Configure domain.
Amplify legt CNAME-Einträge in Route 53 an, um die Inhaberschaft der Domain zu verifizieren.
Damit wird die Amplify-App mit Ihrer Domain konfiguriert (das dauert in der Regel 5 bis 20 Minuten).
Anschließend ist Ihre Amplify-App über die eigene Domain erreichbar.
In diesem Tutorial habe ich Ihnen gezeigt, wie Sie mit der Amplify CLI eine React-Anwendung bauen und deployen. Zunächst haben wir eine lokale React-App in Cloud9 entwickelt. Anschließend haben wir die Amplify CLI installiert und konfiguriert und die React-App damit auf Amplify deployt.
Außerdem haben wir die Amplify-React-App mit GitHub verknüpft. Für bessere Performance haben wir CloudFront davorgeschaltet. Zum Schluss haben wir die App mit einer eigenen Domain verbunden.
Ich hoffe, dieses Tutorial war hilfreich – viel Erfolg beim Deployment Ihrer Anwendung!