Erste Schritte mit AWS

Erstellen einer React-Anwendung

Erstellen Sie eine einfache Web-Anwendung mit AWS Amplify

Modul 1: React-Web-App bereitstellen und hosten

In diesem Modul erstellen Sie eine React-Anwendung und stellen sie mit dem Webhosting-Service von AWS Amplify in der Cloud bereit.

Einführung

AWS Amplify bietet einen Git-basierten CI/CD-Workflow für die Erstellung, Bereitstellung und das Hosting von einseitigen 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 Modul beginnen wir mit dem Erstellen einer neuen React-Anwendung und mit dem Übertragen in ein GitHub-Repository. Dann werden wir das Repository mit dem Webhosting von AWS Amplify verbinden und es in einem weltweit verfügbaren Content Delivery Network (CDN) bereitstellen, das auf einer amplifyapp.com-Domain 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.

Lerninhalte

  • Erstellen einer React-Anwendung
  • Initialisieren eines GitHub-Repositorys
  • Bereitstellen Ihrer App mit AWS Amplify
  • Code-Änderungen implementieren und Ihre Anwendung neu bereitstellen

Wichtige Konzepte

React-Anwendung – React ist ein Web-Anwendungsframework, das es Entwicklern ermöglicht, mit Hilfe von JavaScript schnell performante Anwendungen für einzelne Seiten zu erstellen.

Git – Ein Versionskontrollsystem, das es Entwicklern ermöglicht, Dateien zu speichern sowie Beziehungen zwischen Dateien und Verzeichnissen, Versionen und Änderungen an den Dateien zu pflegen und zu aktualisieren.

 Veranschlagte Zeit

10 Minuten

 Verwendete Services

Implementierung

  • 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 mit dem folgenden Befehl in Ihrer Eingabeaufforderung oder Ihrem Terminal:

    npx create-react-app amplifyapp
    cd amplifyapp
    npm start
  • 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).

    Front End GitHub Repository Module 1

    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
  • Melden Sie sich bei der AWS-Managementkonsole an.

    Ö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.

    Front End AWS Console Find Amplify Module 1
  • Bereitstellen Ihrer App mit 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 in der AWS Amplify Service-Konsole unter Bereitstellen die Option "Erste Schritte".

    Front End Amplify Deploy Module 1

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

    Front End Amplify GitHub Module 1.png

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

    Front End GitHub Add Repository Module 1.png

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

    Front End GitHub Add Repository2 Module 1.png

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

    Front End GitHub Add Repository3 Module 1.png

    f. AWS Amplify wird nun Ihren Quellcode erstellen und Ihre Bereitstellung der Amplify-Anwendung unter https://...amplifyapp.com durchführen.

    Front End Amplify Deploy Source Module 1

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

    Front End Initial App Module 1
  • Automatisches Bereitstellen von Codeänderungen

    In diesem Schritt werden Sie einige Änderungen am Code mit Ihrem Texteditor vornehmen und die Änderungen in den Master-Zweig Ihrer Anwendung verschieben.

    a. Bearbeiten Sie src/App.js mit dem untenstehenden Code und speichern Sie ihn.

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1>Hello from V2</h1>
          </header>
        </div>
      );
    }
    
    export default App;

    b. Übertragen Sie die Änderungen in GitHub in der Eingabeaufforderung (Windows) oder im Terminal (MacOS), um automatisch einen neuen Build zu starten: 

    git add .
    git commit -m “changes for v2”
    git push origin master

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

    Front End HelloV2 App Module 1

Fazit

Sie haben eine React-Anwendung in der AWS Cloud durch Integration mit GitHub und Verwendung von AWS Amplify bereitgestellt. Mit AWS Amplify können Sie Ihre Anwendung weiter in der Cloud bereitstellen und in einem global verfügbaren CDN hosten.

Als Nächstes werden wir eine lokale Version der Anwendung erstellen, um die Entwicklung fortzusetzen und neue Funktionen hinzuzufügen.

War das Modul hilfreich?

Vielen Dank
Bitte teilen Sie uns mit, was Ihnen gefallen hat.
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.

Lokale Anwendung initialisieren