Erstellen einer Full-Stack-React-Anwendung

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 übertragen Ihren Code in das Repository. Sie benötigen ein GitHub-Konto, um diesen Schritt abzuschließen. Wenn Sie noch kein Konto haben, melden Sie sich hier an.

  a. Erstellen Sie ein neues GitHub-Repository für Ihre Anwendung.
  

  

  b. Öffnen Sie ein neues Terminal und navigieren Sie zurück zum Stammordner Ihrer Anwendung, z. B. amplifyapp.

  c. Durch die Verwendung von create-react-app wird das Git-Repository automatisch initialisiert und eine erste Übergabe durchgeführt. Wenn Sie versuchen, eine vorhandene React-Anwendung bereitzustellen, bei der Git nicht initialisiert wurde, müssen Sie unbedingt die folgenden Befehle eingeben, bevor Sie fortfahren:

  git init
  git add .
  git commit -m "initial commit"

  Code snippet copied

  Kopieren

  d. Wenn Sie GitHub noch nie auf Ihrem Computer verwendet haben, befolgen Sie diese Schritte, bevor Sie die Verbindung zu Ihrem Konto weiterhin zulassen.
  

  Übertragen Sie die Anwendung auf das neue GitHub-Repository, indem Sie die folgenden Befehle in Ihrer Befehlszeilenschnittstelle ausführen:

  git remote add origin git@github.com:username/reponame.git
  git branch -M main
  git push -u origin main

  Code snippet copied

  Kopieren
• Anmelden bei der AWS-Managementkonsole

  Öffnen Sie die AWS-Managementkonsole in einem neuen Browserfenster, sodass Sie diese schrittweise Anleitung geöffnet 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 aus, 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-Servicekonsole die Option Erste Schritte unter Amplify Hosting 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 zuvor erstellte Repository und den Hauptbereich aus 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 nehmen Sie mit Ihrem Texteditor einige Änderungen am Code vor und übertragen die Änderungen in den Hauptbereich Ihrer Anwendung.

  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 der Eingabeaufforderung (Windows) oder im Terminal (macOS) auf GitHub, um automatisch eine neue Erstellung zu starten: 

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

  Code snippet copied

  Kopieren

  c. Sobald die Erstellung abgeschlossen ist, wählen Sie die Miniaturansicht in der AWS-Amplify-Konsole aus, um Ihre aktualisierte Anwendung anzuzeigen.