Stellen Sie eine ReactJS-App und hosten Sie diese

AWS Amplify Console verwenden:

AWS Amplify Console bietet einen auf GIT basierenden CI/CD-Workflow für die Entwicklung, Bereitstellung und das Hosting von Single-Page-Webanwendungen oder statischen Websites mit serverlosen Backends. Sobald ein Git-Repository verbunden wurde, bestimmt Amplify automatisch die Build-Einstellungen für das Frontend-Framework und alle serverlosen Backend-Ressourcen, die über die Amplify-Befehlszeilenschnittstelle konfiguriert wurden.

In diesem Tutorial beginnen wir mit dem Erstellen einer neuen React-Anwendung und mit dem Übertragen in ein GitHub-Repository.  Anschließend verbinden Sie sich mit der Amplify Console und stellen sie in einem global verfügbaren Content Delivery Network (CDN) bereit, das auf einer amplifyapp.com-Domäne gehostet wird. Als nächstes werden wir die kontinuierlichen Bereitstellungsmöglichkeiten demonstrieren, indem wir Änderungen an der React-Anwendung vornehmen und eine neue Version in den Master-Zweig schieben, die automatisch eine neue Bereitstellung einleitet.

Alles, was in diesem Tutorial gezeigt wird, ist als kostenloses Kontingent verfügbar.

Über dieses Tutorial
Zeit 10 Minuten                                           
Kosten Kostenloses Kontingent verfügbar
Anwendungsfall Websites und Webanwendungen
Produkte AWS Amplify-Konsole
Zielgruppe Entwickler
Level Einsteiger
Letzte Aktualisierung 04.03.2018

1. Registrieren bei AWS

Sie benötigen ein AWS-Konto, um dieses Tutorial auf der AWS Amplify-Konsole fortzusetzen. Für die Nutzung von AWS Amplify mit diesem Tutorial fallen keine zusätzlichen Gebühren an. Die in diesem Tutorial erstellten Ressourcen können im Rahmen des kostenlosen Kontingents genutzt werden. 

2. Einrichtung der Umgebung überprüfen

Öffnen Sie Ihre Befehlszeilenschnittstelle und geben Sie den folgenden Befehl ein:

node -v;

Falls bei diesem Befehl weniger als v8.0 zurückgegeben wird, führen Sie ein Upgrade des Knotens auf eine höhere Version als 8 durch. Falls der Befehl nicht gefunden wird, installieren Sie den Knoten unter nodejs.org/download.

3. Erstellen einer neuen React-Anwendung

Die einfachste Möglichkeit zum Erstellen einer React-Anwendung ist die Verwendung des Befehls create-react-app. Installieren Sie dieses Paket anhand des folgenden Befehls:

npx create-react-app amplifyapp
cd amplifyapp
npm start

4. Initialisieren des GitHub-Repositorys

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

5. F: Was ist die AWS Amplify Console?

Öffnen Sie die AWS-Managementkonsole in einem neuen Browserfenster, so dass Sie diese Schritt-für-Schritt-Anleitung offen halten können. Wenn der Bildschirm vollständig geladen ist, geben Sie Ihren Benutzernamen und das Passwort ein, um zu beginnen. Geben Sie dann Amplify in die Suchleiste ein und wählen Sie AWS Amplify, um die Servicekonsole zu öffnen.

6. Bereitstellen Ihrer App in AWS Amplify

In diesem Schritt verbinden Sie das GitHub-Repository, das Sie gerade im AWS Amplify-Service erstellt haben. Damit können Sie Ihre App in AWS entwickeln, bereitstellen und hosten.

a. Wählen Sie unter Bereitstellen Erste Schritte aus.

b. Wählen Sie GitHub als Repository-Service und dann Weiter aus.

c. Authentifizieren Sie sich bei GitHub und kehren Sie zur Amplify-Konsole zurück. Wählen Sie das Repository, das Sie zuvor erstellt haben, und den Master-Zweig und wählen Sie dann Weiter aus.

d. Akzeptieren Sie die standardmäßigen Aufbaueinstellungen und wählen Sie Weiter aus.

e. Überprüfen Sie die endgültigen Details und wählen Sie Speichern und bereitstellen aus.

f. Die AWS Amplify-Konsole erstellt jetzt Ihren Quellcode und stellt Ihre App unter https://<branchname>.<appid>.amplifyapp.com bereit.

g. Sobald die Erstellung abgeschlossen ist, wählen Sie das Miniaturbild aus, um zu sehen, wie Ihre Web-App ausgeführt wird.

tmt-react-ClickThumnail

7. Automatisches Bereitstellen von Codeänderungen

In diesem Schritt nehmen Sie Änderungen am Code vor und übertragen die Änderungen an den Master-Zweig Ihrer App.

a. Bearbeiten Sie die Datei src/App.js.

b. Sobald die Erstellung abgeschlossen ist, wählen Sie das Miniaturbild auf der AWS Amplify-Konsole aus, um Ihre aktualisierte App anzuzeigen.

tmt-react-7b-2

8. Bereinigen Ihrer Ressourcen

Sie können die Ressourcen, die Sie auf der AWS Amplify-Konsole erstellt haben, einfach beenden. Tatsächlich ist es eine bewährte Methode, nicht mehr genutzte Ressourcen zu beenden, um Kosten einzusparen.

Wählen Sie Aktion und dann App löschen aus. Geben Sie in das Modal, das geöffnet wird, löschen ein, um zu bestätigen, dass Sie Ihre App löschen möchten. Ihre App ist jetzt gelöscht.

Herzlichen Glückwunsch!

Sie haben eine React-Anwendung durch Integration in GitHub und Verwendung der Amplify-Konsole in der Cloud bereitgestellt.

Mit der AWS Amplify-Konsole können Sie Ihre Anwendung weiter in der Cloud bereitstellen und in einem global verfügbaren CDN hosten.

War dieses Tutorial hilfreich?

Vielen Dank
Bitte teilen Sie uns mit, was Ihnen gefallen hat.
Schließen
Es tut uns Leid Sie zu enttäuschen
Ist etwas veraltet, verwirrend oder ungenau? Bitte helfen Sie uns, dieses Tutorial zu verbessern, indem Sie Feedback geben.
Schließen