Créer une application React complète

Mise en œuvre

• Installer les bibliothèques Amplify

  Nous aurons besoin de deux bibliothèques Amplify pour notre projet. La bibliothèque aws-amplify library principale contient toutes les API client que nous utiliserons pour l'intégration avec les différents services AWS et la bibliothèque @aws-amplify/ui-react qui contient les composants de l'interface utilisateur propre au cadre. Installez ces bibliothèques à la racine du projet.
  

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

  Code snippet copied

  Copier
• Créer le service d'authentification

  Pour créer ce service, utilisez l’interface de ligne de commande Amplify :
  

  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

  Copier
• Déployer le service d'authentification

  Une fois le service d'authentification configuré localement, nous pouvons le déployer en exécutant la commande Amplify push :
  

  amplify push --y

  Code snippet copied

  Copier
• Configurer le projet React avec les ressources Amplify

  La CLI a créé et continuera de mettre à jour le fichier aws-exports.js situé dans le répertoire src de notre projet. Nous utiliserons ce fichier pour faire connaître au projet React les différentes ressources AWS qui sont disponibles dans notre projet Amplify.

  Pour configurer notre application avec ces ressources, ouvrez le fichier src/index.js et ajoutez le code suivant sous la dernière importation :

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

  Code snippet copied

  Copier
• Ajouter le flux d'authentification dans le fichier App.js

  Ensuite, ouvrez le fichier src/App.js et mettez-le à jour avec le code suivant :

  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

  Copier

  Dans ce composant, nous avons utilisé le composant withAuthenticator. Ce composant mettra en place un flux d'authentification complet permettant aux utilisateurs de s'inscrire, de se connecter, de réinitialiser leur mot de passe et de confirmer leur connexion pour l'authentification multifactorielle (MFA). Nous avons également ajouté un bouton de Déconnexion pour déconnecter les utilisateurs.
  

• Exécuter l'application localement

  Attendez que le déploiement des ressources soit terminé, puis exécutez l'application pour voir le nouveau flux d'authentification protégeant l'application :
  

  npm start

  Code snippet copied

  Copier

  

  Ici, vous pouvez essayer de vous inscrire, ce qui enverra un code de vérification à votre e-mail. Utilisez le code de vérification pour vous connecter à l'application. Une fois connecté, vous devriez voir un bouton de Déconnexion, qui vous déconnecte et redémarre le flux d'authentification.

  

• Configurer le CI/CD du frontend et du backend

  Ensuite, nous devons configurer le processus de génération d'Amplify pour ajouter le backend dans le cadre du flux de travail de déploiement continu. Depuis la fenêtre de votre terminal, exécutez :
  

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

  Code snippet copied

  Copier

  Ceci entraîne l'ouverture de la console Amplify. Dans le volet de navigation, choisissez Paramètres de l'application > Paramètres de génération et modifiez-le pour ajouter la section backend (lignes 2 à 7 dans le code ci-dessous) à votre amplify.yml. Après avoir effectué les modifications, choisissez Enregistrer.
  

  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

  Copier

  Faites défiler la page vers le bas jusqu'à Paramètres d'image de génération et choisissez Modifier. Sélectionnez le menu déroulant Ajouter un remplacement de version de package et sélectionnez CLI Amplify. La version par défaut doit être la plus récente, comme indiqué sur l'image.

  

  Ensuite, mettez à jour votre branche frontend pour qu'elle pointe vers l'environnement principal que vous venez de créer. Sous le nom de la branche, choisissez Modifier, puis pointez votre branche principale vers le backend intermédiaire que vous venez de créer. Choisissez Enregistrer.
  

  

  

  Si le message Please set up a service role… (Veuillez configurer une fonction du service…) s'affiche, suivez les instructions fournies avant de continuer à configurer et à associer un rôle de service à votre application.

• Déployer les modifications dans l'environnement réel

  Revenez maintenant à la fenêtre de votre terminal local et déployez les modifications sur GitHub pour commencer une nouvelle version dans la console Amplify :

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

  Code snippet copied

  Copier