Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.
Kontinuierliche Bereitstellung einer modernen AWS Amplify Amplify-Webanwendung aus einem AWS-Repository CodeCommit
Erstellt von Deekshitulu Pentakota (AWS) und Sai Katakam (AWS)
Umgebung: PoC oder Pilotprojekt | Technologien: Web- und mobile Apps DevOps; Modernisierung | AWS-Dienste: AWS Amplify; AWS CodeCommit |
Übersicht
Moderne Webanwendungen sind als Single-Page-Anwendungen (SPAs) aufgebaut, die alle Anwendungskomponenten in statische Dateien packen. Mithilfe von AWS Amplify Hosting können Sie eine CI/CD-Pipeline (Continuous Integration and Continuous Deployment) aufbauen, die eine moderne Webanwendung erstellt, bereitstellt und hostet, die in einem Git-basierten Repository verwaltet wird. Wenn Sie Amplify Hosting mit dem Code-Repository verbinden, initiiert jeder Commit einen einzigen Workflow zur Bereitstellung des Frontends und Backends der Anwendung. Der Vorteil dieses Ansatzes besteht darin, dass die Webanwendung erst aktualisiert wird, nachdem die Bereitstellung erfolgreich abgeschlossen wurde, wodurch Inkonsistenzen zwischen Frontend und Backend vermieden werden.
In diesem Muster verwenden Sie ein CodeCommit AWS-Repository, um Ihre moderne Webanwendung zu verwalten. Die Beispiel-Webanwendung in dieser Anleitung verwendet das React SPA-Framework. Amplify Hosting unterstützt jedoch viele andere SPA-Frameworks wie Angular, Vue, Next.js und unterstützt auch Single-Site-Generatoren wie Gatsby, Hugo und Jekyll.
Dieses Muster richtet sich an AWS-Entwickler, die Erfahrung mit den folgenden Services und Konzepten haben:
AWS CodeCommit
AWS Amplify Hosting
React
JavaScript
Node.js
npm
Git
Voraussetzungen und Einschränkungen
Voraussetzungen
Ein aktives AWS-Konto.
Berechtigungen zum Erstellen von Ressourcen in Amplify und CodeCommit. Weitere Informationen finden Sie unter Identity and Access Management für Amplify und Identity and Access Management für AWS CodeCommit.
AWS-Befehlszeilenschnittstelle (AWS CLI), installiert und konfiguriert.
Ein Texteditor oder Code-Editor.
CodeCommit, eingerichtet für HTTPS-Benutzer mit Git-Anmeldeinformationen.
Eine IAM-Servicerolle für Amplify.
npm und Node.js, installiert
(npm-Dokumentation).
Einschränkungen
Dieses Muster behandelt nicht die Entwicklung und Integration eines Backends für die Amplify-Anwendung, wie z. B. eine API, Authentifizierung oder Datenbank. Weitere Informationen zu Backends finden Sie unter Erstellen eines Backends in der Amplify-Dokumentation.
Produktversionen
AWS-CLI Version 2.0
Node.js Version 16.x oder höher
Architektur
Zieltechnologie-Stack
CodeCommitAWS-Repository mit einem React-SPA
AWS Amplify Hosting-Arbeitsablauf
Zielarchitektur
![Architekturdiagramm der Bereitstellung einer Web-App aus einem CodeCommit Repo und des Hostings mit AWS Amplify](images/pattern-img/370c0a43-fc09-46dc-a018-853cbd4cff11/images/746a9450-6a0b-4798-bf22-e8f89c7933f6.png)
Tools
AWS-Services
AWS Amplify Hosting bietet einen Git-basierten Workflow für das Hosten serverloser Full-Stack-Webanwendungen mit kontinuierlicher Bereitstellung.
AWS CodeCommit ist ein Versionskontrollservice, mit dem Sie Git-Repositorys privat speichern und verwalten können, ohne Ihr eigenes Quellcodeverwaltungssystem verwalten zu müssen.
AWS Identity and Access Management (IAM) hilft Ihnen dabei, den Zugriff auf Ihre AWS-Ressourcen sicher zu verwalten, indem kontrolliert wird, wer authentifiziert und autorisiert ist, diese zu verwenden.
Andere Tools
Node.js
ist eine ereignisgesteuerte JavaScript Laufzeitumgebung, die für die Erstellung skalierbarer Netzwerkanwendungen entwickelt wurde. npm
ist eine Softwareregistrierung, die in einer Node.js -Umgebung ausgeführt wird und verwendet wird, um Pakete gemeinsam zu nutzen oder auszuleihen und die Bereitstellung von privaten Paketen zu verwalten.
Epen
Aufgabe | Beschreibung | Erforderliche Fähigkeiten |
---|---|---|
Erstellen Sie ein -Repository. | Anweisungen finden Sie in der CodeCommit Dokumentation unter Erstellen eines CodeCommit AWS-Repositorys. | AWS DevOps |
Klonen Sie das Repository | Anweisungen finden Sie in der CodeCommit Dokumentation unter Connect zum CodeCommit Repository durch Klonen des Repositorys. Wenn Sie dazu aufgefordert werden, geben Sie die Git-Anmeldeinformationen ein. | App-Developer |
Aufgabe | Beschreibung | Erforderliche Fähigkeiten |
---|---|---|
Erstellen Sie eine neue React-Anwendung. |
Weitere Informationen zum Erstellen einer benutzerdefinierten React-Anwendung finden Sie in der Anleitung Create React App | App-Developer |
Erstellen Sie einen Branch und übertragen Sie den Code. |
| App-Developer |
Aufgabe | Beschreibung | Erforderliche Fähigkeiten |
---|---|---|
Connect Amplify mit dem Repository. | Anweisungen finden Sie unter Ein Repository Connect in der Amplify Hosting-Dokumentation. Wählen Sie AWS CodeCommit und das Repository und den Branch aus, die Sie zuvor erstellt haben. | App-Developer |
Definieren Sie die Frontend-Build-Einstellungen. | Anweisungen finden Sie unter Bestätigen der Build-Einstellungen für das Frontend in der Amplify Hosting-Dokumentation. Akzeptieren Sie die Standardeinstellungen oder geben Sie Folgendes ein.
| App-Developer |
Überprüfen und bereitstellen. | Anweisungen finden Sie unter Speichern und Bereitstellen in der Amplify Hosting-Dokumentation. Warten Sie, bis der Bereitstellungsvorgang abgeschlossen ist. | App-Developer |
Aufgabe | Beschreibung | Erforderliche Fähigkeiten |
---|---|---|
Überprüfen Sie die erste Bereitstellung. | Wenn der Bereitstellungsvorgang abgeschlossen ist, wählen Sie unter Domain den Link aus. Stellen Sie sicher, dass die Anwendung wie erwartet funktioniert. | App-Developer |
Senden Sie eine Änderung in das Code-Repository. | Bearbeiten Sie den Code auf Ihrer lokalen Workstation und übertragen Sie die Änderungen in das CodeCommit Repository. Amplify Hosting erkennt die Änderung im Repository und startet automatisch den Build- und Bereitstellungsprozess. Vergewissern Sie sich, dass die Anwendungsupdates auf der Domain sichtbar sind. | App-Developer |
Zugehörige Ressourcen
CodeCommit AWS-Dokumentation
Dokumentation zum AWS Amplify Hosting
React-Ressourcen