In diesem Modul konfigurieren Sie AWS Amplify so, dass es die statischen Ressourcen für Ihre Webanwendung mit integrierter kontinuierlicher Bereitstellung hostet. Die Amplify Console bietet einen Git-basierten Workflow für die kontinuierliche Bereitstellung und das Hosting von Fullstack-Webanwendungen. In Folgemodulen fügen Sie diesen Seiten mithilfe von JavaScript dynamische Funktionen zum Aufrufen von RESTful-APIs hinzu, die mit AWS Lambda und Amazon API Gateway erstellt werden.
Die Architektur für dieses Modul ist sehr geradlinig. Alle Ihre statischen Webinhalte einschließlich HTML, CSS, JavaScript, Bilder und andere Dateien werden von der AWS Amplify-Konsole verwaltet. Ihre Endbenutzer greifen dann über die öffentliche Website-URL, die von der AWS Amplify-Konsole angezeigt wird, auf Ihre Website zu. Sie müssen zur Bereitstellung Ihrer Website keine Webserver betreiben oder andere Dienste verwenden.
Für die meisten richtigen Anwendungen müssen Sie eine benutzerdefinierte Domäne verwenden, um Ihre Website zu hosten. Wenn Sie daran interessiert sind, Ihre eigene Domäne zu verwenden, folgen Sie den Anweisungen zum Einrichten einer benutzerdefinierten Domäne auf Amplify.
Veranschlagte Zeit für das Modul: 15 Minuten
Verwendete Services: AWS Amplify
Befolgen Sie die folgende schrittweise Anleitung zum Hosten einer statischen Website. Klicken Sie auf die Nummer eines jeweiligen Schritts, um den Bereich zu erweitern.
-
Schritt 1. Auswählen einer Region
Diese Webanwendung kann in jeder AWS-Region eingesetzt werden, die alle in dieser Anwendung verwendeten Dienste unterstützt. Dazu gehören AWS Amplify, AWS CodeCommit, Amazon Cognito, AWS Lambda, Amazon API Gateway und Amazon DynamoDB.
Auf der Übersichtstabelle der Regionen ist zu sehen, welche Regionen die unterstützten Services aufweisen. Die unterstützten Regionen sind u. a.:
- USA Ost (Nord-Virginia)
- USA Ost (Ohio)
- USA West (Oregon)
- EU (Frankfurt)
- EU (Irland)
- EU (London)
- Asien-Pazifik (Tokio)
- Asien-Pazifik (Seoul)
- Asien-Pazifik (Sydney)
- Asien-Pazifik (Mumbai)
Wählen Sie Ihre Region aus dem Dropdownmenü in der oberen rechten Ecke der AWS-Managementkonsole.
(Zum Vergrößern klicken)
-
Schritt 2: Ein Git-Repository erstellen
Sie haben zwei Möglichkeiten, den Quellcode für dieses Modul zu verwalten: AWS CodeCommit (im kostenlosen Kontingent von AWS enthalten) oder GitHub. In diesem Tutorial werden wir CodeCommit verwenden, um unseren Anwendungscode zu speichern, aber Sie können dasselbe tun, indem Sie ein Repository auf GitHub erstellen.
a. Öffnen Sie die AWS CodeCommit-Konsole
b. Wählen Sie Repository erstellen aus
c. Setzen Sie den Repository-Namen* auf "wildrydes-site"
d. Wählen Sie Erstellen aus
e. Nun, da das Repository erstellt ist, richten Sie einen IAM-Benutzer mit Git-Berechtigungsnachweisen in der IAM-Konsole ein, indem Sie diesen Anweisungen folgen.
f. Wieder in der CodeCommit-Konsole: Wählen Sie in der Dropdown-Liste URL klonen die Option HTTPS klonen
g. Führen Sie von einem Terminalfenster aus den git-Klon und die HTTPS-URL des Repositorys aus:
$ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
Das Klonen in 'Wildrydes-Site'...
Benutzername für 'https://git-codecommit.us-east-1.amazonaws.com':XXXXXXXXXXXX
Passwort für 'USERID': XXXXXXXXXXXXXXXX
Warnung: Sie scheinen ein leeres Repository geklont zu haben.
-
Schritt 3: Füllen Sie das Git-Repository aus
Sobald Sie entweder AWS CodeCommit oder GitHub.com verwendet haben, um Ihr Git-Repository zu erstellen und lokal zu klonen, müssen Sie den Website-Inhalt aus einem bestehenden öffentlich zugänglichen S3-Bereich, der mit diesem Workshop verbunden ist, kopieren und den Inhalt zu Ihrem Repository hinzufügen.
a. Wechseln Sie das Verzeichnis in Ihr Repository und kopieren Sie die statischen Dateien aus S3:
cd wildrydes-site/
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursiveb. Übertragen Sie die Dateien an Ihren Git-Dienst
$ git add .
$ git pushCounting objects: 95, done.
Compressing objects: 100% (94/94), done.
Writing objects: 100% (95/95), 9.44 MiB | 14.87 MiB/s, done.
Total 95 (delta 2), reused 0 (delta 0)
To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
* [new branch] master -> master
-
Schritt 4: Web-Hosting mit der AWS Amplify-Konsole aktivieren
Als Nächstes verwenden Sie die AWS Amplify-Konsole zum Bereitstellen der Website, die Sie gerade für git bereitgestellt haben. Die Amplify-Konsole übernimmt die Arbeit der Einrichtung eines Speicherplatzes für Ihren statischen Webanwendungscode und bietet eine Reihe hilfreicher Funktionen, die sowohl den Lebenszyklus dieser Anwendung vereinfachen als auch bewährte Verfahren ermöglichen.
a. Starten Sie die Konsolenseite der Amplify-Konsole
b. Klicken Sie unter Bereitstellen mit Amplify-Konsole auf Loslegen
c. Wählen Sie den heute verwendeten Repository-Dienstanbieter aus und wählen Sie Weiter
d. Wenn Sie GitHub verwendet haben, müssen Sie AWS Amplify für Ihr GitHub-Konto autorisieren
e. Wählen Sie aus der Dropdown-Liste das Repository und den Zweig, die gerade erstellt wurden
e. Lassen Sie auf der Seite "Build-Einstellungen konfigurieren" alle Standardeinstellungen stehen und wählen Sie Weiter.
f. Wählen Sie auf der Seite "Überprüfung" die Option Speichern und bereitstellen
g. Der Vorgang dauert ein paar Minuten, bis die Amplify-Konsole die erforderlichen Ressourcen erstellt und Ihren Code bereitgestellt hat.
Wenn Sie fertig sind, klicken Sie auf das Bild der Website, um Ihre Wild Rydes-Website zu starten.
Wenn Sie auf den Link für Master klicken, sehen Sie die Build- und Bereitstellungsdetails in Bezug auf Ihren Zweig sowie Screenshots der Anwendung auf verschiedenen Geräten:
-
Schritt 5: Ändern Sie Ihre Website
Die AWS Amplify-Konsole baut die Anwendung neu auf und verteilt sie neu, wenn sie Änderungen am verbundenen Repository feststellt. Nehmen Sie eine Änderung auf der Hauptseite vor, um diesen Prozess zu testen.
a. Öffnen Sie die Seite `index.html` und ändern Sie die Titelzeile so, dass dort steht: <title>Wild Rydes - Rydes of the Future!</title>
b. Speichern Sie die Datei und übertragen Sie sie wieder in Ihr Git-Repository. Die Amplify-Konsole beginnt bald nach der Benachrichtigung über die Aktualisierung des Repositorys wieder mit der Erstellung der Site. Es wird ziemlich schnell gehen! Gehen Sie zurück zur Konsolenseite der Amplify Console, um den Prozess zu beobachten.
$ git add index.html $ git commit -m "updated title" [master dfec2e5] updated title 1 file changed, 1 insertion(+), 1 deletion(-) $ git push Counting objects: 3, done. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done. Total 3 (delta 2), reused 0 (delta 0) remote: processing To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site 2e9f540..dfec2e5 master -> master
c. Öffnen Sie nach Fertigstellung die Wild Rydes-Website erneut und beachten Sie die Titeländerung.
-
Zusammenfassung
In diesem Modul haben Sie eine statische Website erstellt, die die Grundlage für unser Wild Rydes-Geschäft bilden wird. Die AWS Amplify-Konsole macht es wirklich einfach, statische Websites nach einem kontinuierlichen Integrations- und Bereitstellungsmodell bereitzustellen. Es bietet die Möglichkeit, kompliziertere, auf Javascript-Frameworks basierende Anwendungen zu "bauen", und verfügt über Funktionen wie Feature-Zweig-Bereitstellung, einfache benutzerdefinierte Domäneneinrichtung, sofortige Bereitstellung und Passwortschutz.
