Erstellen einer Full-Stack-React-Anwendung

Implementierung

• Amplify-Bibliotheken installieren

  Für unser Projekt benötigen wir zwei Amplify-Bibliotheken. Die Hauptbibliothek von aws-amplify enthält alle Client-seitigen APIs für die Interaktion mit den verschiedenen AWS-Services, mit denen wir arbeiten werden, und die @aws-amplify/ui-react-Bibliothek enthält Framework-abhängige UI-Komponenten. Installieren Sie diese Bibliotheken im Stammverzeichnis des Projekts.
  

  npm install aws-amplify @aws-amplify/ui-react

  Code snippet copied

  Kopieren
• Authentifizierungs-Service erstellen

  Um den Authentifizierungs-Service zu erstellen, verwenden Sie die Amplify CLI:
  

  amplify add auth
  
  ? Do you want to use the default authentication and security configuration? Default configuration
  ? How do you want users to be able to sign in? Username
  ? Do you want to configure advanced settings? No, I am done.

  Code snippet copied

  Kopieren
• Stellen Sie den Authentifizierungs-Service bereit

  Nun, da der Authentifizierungs-Service lokal konfiguriert wurde, können wir ihn durch Ausführen des Amplify push-Befehls bereitstellen:
  

  amplify push --y

  Code snippet copied

  Kopieren
• Das React-Projekt mit Amplify-Ressourcen konfigurieren

  Die CLI hat eine Datei namens aws-exports.js im src-Verzeichnis unseres Projekts erstellt und wird diese weiterhin aktualisieren. Wir werden diese Datei verwenden, um das React-Projekt über die verschiedenen AWS-Ressourcen zu informieren, die in unserem Amplify-Projekt zur Verfügung stehen.

  Um unsere Anwendung mit diesen Ressourcen zu konfigurieren, öffnen Sie src/index.js und fügen Sie den folgenden Code unterhalb des letzten Imports hinzu:

  import { Amplify } from 'aws-amplify';
  import config from './aws-exports';
  Amplify.configure(config);
  

  Code snippet copied

  Kopieren
• Authentifizierungsablauf in App.js hinzufügen

  Als Nächstes öffnen Sie src/App.js und aktualisieren Sie mit dem folgenden Code:

  import logo from "./logo.svg";
  import "@aws-amplify/ui-react/styles.css";
  import {
    withAuthenticator,
    Button,
    Heading,
    Image,
    View,
    Card,
  } from "@aws-amplify/ui-react";
  
  function App({ signOut }) {
    return (
      <View className="App">
        <Card>
          <Image src={logo} className="App-logo" alt="logo" />
          <Heading level={1}>We now have Auth!</Heading>
        </Card>
        <Button onClick={signOut}>Sign Out</Button>
      </View>
    );
  }
  
  export default withAuthenticator(App);

  Code snippet copied

  Kopieren

  In diesem Code haben wir die withAuthenticator-Komponente verwendet. Diese Komponente stellt einen vollständigen Benutzerauthentifizierungsablauf dar, der es Benutzern ermöglicht, sich für die Multifaktor-Authentifizierung (MFA) zu registrieren, anzumelden, ihr Passwort zurückzusetzen und die Anmeldung zu bestätigen. Wir haben auch eine Schaltfläche zum Abmelden hinzugefügt, um Benutzer abzumelden.
  

• Anwendung lokal ausführen

  Warten Sie, bis die Bereitstellung der Ressourcen abgeschlossen ist, und führen Sie dann die App aus, um den neuen Authentifizierungsablauf zum Schutz der App anzuzeigen:
  

  npm start

  Code snippet copied

  Kopieren

  

  Hier können Sie versuchen, sich anzumelden. Dabei wird Ihnen ein Bestätigungscode per E-Mail zugesandt. Melden Sie sich mit dem Bestätigungscode bei der Anwendung an. Wenn Sie angemeldet sind, sollten Sie eine Schaltfläche Abmelden sehen, die Sie abmeldet und den Authentifizierungsablauf neu startet.

  

• CI/CD des Frontends und Backends einrichten

  Als Nächstes müssen wir den Erstellungsprozess von Amplify so konfigurieren, dass das Backend als Teil des kontinuierlichen Bereitstellungs-Workflows hinzugefügt wird. Führen Sie in Ihrem Terminalfenster Folgendes aus:
  

  amplify console
  ? Which site do you want to open? AWS console

  Code snippet copied

  Kopieren

  Dadurch wird die Amplify-Konsole geöffnet. Wählen Sie im Navigationsbereich Anwendungseinstellungen > Erstellungseinstellungen und fügen Sie den Abschnitt Backend (Zeilen 2–7 im untenstehenden Code) zu Ihrer amplify.yml hinzu. Nachdem Sie die Änderungen vorgenommen haben, wählen Sie Speichern aus.
  

  version: 1
  backend:
    phases:
      build:
        commands:
          - '# Execute Amplify CLI with the helper script'
          - amplifyPush --simple
  frontend:
    phases:
      preBuild:
        commands:
          - yarn install
      build:
        commands:
          - yarn run build
    artifacts:
      baseDirectory: build
      files:
        - '**/*'
    cache:
      paths:
        - node_modules/**/*

  Code snippet copied

  Kopieren

  Scrollen Sie nach unten zu Image-Einstellungen erstellen und wählen Sie Bearbeiten aus. Wählen Sie das Drop-down-Menü Paketversion überschreiben hinzufügen und wählen Sie Amplify-CLI aus. Es sollte standardmäßig die neueste Version verwendet werden, wie im Bild gezeigt.

  

  Aktualisieren Sie als Nächstes Ihren Frontend-Bereich so, dass er auf die soeben erstellte Backend-Umgebung verweist. Wählen Sie unter dem Bereichnamen die Option Bearbeiten aus, und verweisen Sie dann mit Ihrem Hauptbereich auf das soeben erstellte Staging-Backend. Wählen Sie Speichern aus.
  

  

  

  Wenn die Meldung Bitte richten Sie eine Servicerolle ein ... angezeigt wird, befolgen Sie die Anweisungen, bevor Sie mit der Einrichtung fortfahren und Ihrer Anwendung eine Servicerolle hinzufügen.

• Änderungen in der Live-Umgebung bereitstellen

  Kehren Sie nun zu Ihrem lokalen Terminalfenster zurück und stellen Sie die Änderungen auf GitHub bereit, um einen neuen Entwurf in der Amplify-Konsole zu starten:

  git add .
  git commit -m "added auth"
  git push origin main
  

  Code snippet copied

  Kopieren