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

  Code snippet copied

  Kopieren
• 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

  Code snippet copied

  Kopieren
• 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.
  

  

• 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".
  

  

  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 und den Master-Zweig, die Sie zuvor erstellt haben, 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. AWS Amplify wird nun Ihren Quellcode erstellen und Ihre Bereitstellung der Amplify-Anwendung unter https://...amplifyapp.com durchführen.
  

  

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

  

• 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;

  Code snippet copied

  Kopieren

  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

  Code snippet copied

  Kopieren

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