Crear una aplicación React de pila completa

Implementación

• Instalar bibliotecas de Amplify

  Necesitaremos dos bibliotecas de Amplify para nuestro proyecto. La biblioteca aws-amplify principal contiene todas las API del lado del cliente para interactuar con los diferentes servicios de AWS con los que trabajaremos y la biblioteca @aws-amplify/ui-react contiene componentes de IU específicas para el marco. Instale estas bibliotecas en la raíz del proyecto.
  

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

  Code snippet copied

  Copiar
• Cree el servicio de autenticación

  Para crear el servicio de autenticación, use la CLI de 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

  Copiar
• Implemente el servicio de autenticación

  Ahora que se ha configurado el servicio de autenticación en forma local, podemos implementarlo ejecutando el comando de envío de Amplify:
  

  amplify push --y

  Code snippet copied

  Copiar
• Configure el proyecto React con recursos de Amplify

  La CLI ha creado y seguirá actualizando un archivo denominado aws-exports.js que se encuentra en el directorio src de nuestro proyecto. Usaremos este archivo para permitir que el proyecto React conozca los diferentes recursos de AWS que están disponibles en nuestros proyecto de Amplify.

  Para configurar nuestra aplicación con estos recursos, abra src/index.js y agregue el siguiente código debajo de la última importación:

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

  Code snippet copied

  Copiar
• Agregue el flujo de autenticación en App.js

  Luego, abra src/App.js y actualice el siguiente código:

  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

  Copiar

  En este código, hemos utilizando el componente withAuthenticator. Este componente armará un andamio de un flujo completo de autenticación de usuarios lo que permitirá que los usuarios se registren, inicien sesión, restablezcan su contraseña y confirmen el inicio de sesión para lograr una autenticación de múltiples factores (MFA). También hemos añadido un botón de Cierre de sesión para cerrar la sesión de los usuarios.
  

• Ejecute la aplicación en forma local

  Espere a que los recursos terminen de implementarse y, a continuación, ejecute la aplicación para ver el nuevo flujo de autenticación que protege la aplicación:
  

  npm start

  Code snippet copied

  Copiar

  

  Aquí puede intentar registrarse, lo que le enviará un código de verificación a su correo electrónico. Use el código de verificación para iniciar sesión en la aplicación. Al iniciar sesión, debería ver el botón Cerrar sesión, que cierra sesión y reinicia el flujo de autenticación.

  

• Configure el CI/CD del frontend y el backend

  A continuación, debemos configurar el proceso de creación de Amplify para añadir el backend como parte del flujo de trabajo de despliegue continuo. Desde la ventana de su terminal, ejecute:
  

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

  Code snippet copied

  Copiar

  Esto abrirá la consola de Amplify. En el panel de navegación, seleccione Configuración de la creación y modifíquela para añadir la sección de backend (líneas 2 a 7 del código siguiente) a su amplify.yml. Luego de realizar las ediciones, seleccione Guardar.
  

  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

  Copiar

  Desplácese hacia abajo hasta Crear ajustes de imagen y elija Editar. Seleccione el menú desplegable Agregar anulación de la versión del paquete y seleccione Amplify CLI. Debería tener la versión más reciente de forma predeterminada, como se muestra en la imagen.

  

  A continuación, actualice su rama de frontend para que apunte al entorno de backend que acaba de crear. Debajo del nombre de la rama, elija Editar y, a continuación, apunte su rama principal al backend de ensayo que acaba de crear. Elija Guardar.
  

  

  

  Si ve el mensaje Configure un rol de servicio... , siga las instrucciones que se proporcionan antes de seguir configurando y adjuntando un rol de servicio a su aplicación.

• Implemente los cambios en el entorno en vivo

  Ahora regrese a la ventana de su terminal local e implemente los cambios en GitHub para comenzar una nueva compilación en la consola de Amplify:

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

  Code snippet copied

  Copiar