Realizza un'applicazione React full-stack

Implementazione

• Installazione delle librerie Amplify

  Per il nostro progetto, avremo bisogno di due librerie Amplify. La libreria aws-amplify principale contiene tutte le API lato cliente per interagire con i vari servizi AWS con cui lavoreremo mentre la libreria @aws-amplify/ui-react contiene componenti IU specifici del framework. Installa queste librerie nella cartella root del progetto.
  

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

  Code snippet copied

  Copia
• Creazione del servizio di autenticazione

  Per creare il servizio di autenticazione, usa l'interfaccia a riga di comando (CLI) di 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

  Copia
• Distribuzione del servizio di autenticazione

  Ora che il servizio di autenticazione è stato configurato localmente, può essere distribuito eseguendo il comando push di Amplify:
  

  amplify push --y

  Code snippet copied

  Copia
• Configurazione del progetto React con le risorse Amplify

  L'interfaccia a riga di comando (CLI) ha creato e continuerà ad aggiornare un file chiamato aws-exports.js che si trova nella directory src del nostro progetto. Useremo questo file per fare in modo che il progetto React conosca le diverse risorse AWS disponibili nel nostro progetto Amplify.

  Per configurare la nostra app con queste risorse, apri src/index.js e aggiungi il seguente codice all'ultima importazione:

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

  Code snippet copied

  Copia
• Aggiunta del flusso di autenticazione in App.js

  Successivamente, apri src/App.js e aggiornalo con il seguente codice:

  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

  Copia

  In questo codice, abbiamo usato il componente withAuthenticator. Questo componente eseguirà lo scaffolding di un intero flusso di autenticazione dell'utente consentendo agli utenti di registrarsi, accedere, ripristinare la password e confermare l'accesso per l'autenticazione a più fattori (MFA). Abbiamo anche aggiunto un pulsante Esci che consente agli utenti di disconnettersi.
  

• Esecuzione dell'app in locale

  Attendi il completamento dell’implementazione delle risorse, quindi esegui l'app per visualizzare il nuovo flusso di autenticazione che protegge l'app:
  

  npm start

  Code snippet copied

  Copia

  

  Qui puoi provare a registrarti e riceverai un codice di verifica alla tua e-mail. Usa questo codice per accedere all'app. Una volta effettuato l'accesso, dovresti vedere un pulsante Esci, che ti disconnette e riavvia il flusso di autenticazione.

  

• Configurazione di CI/CD del front-end e del back-end

  A questo punto, dobbiamo configurare il processo di compilazione di Amplify per aggiungere il back-end come parte del flusso di lavoro di implementazione continua. Dalla finestra del terminale esegui:
  

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

  Code snippet copied

  Copia

  Verrà aperta la console Amplify. Dal pannello di navigazione, scegli Impostazioni app > Crea impostazioni e modifica la sezione in modo da aggiungere la sezione di back-end (righe 2-7 nel codice seguente) al file amplify.yml. Dopo aver apportato le modifiche, scegli Salva.
  

  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

  Copia

  Scorri verso il basso fino a Crea impostazioni immagine e scegli Modifica. Seleziona il menu a discesa Aggiungi sostituzione della versione del pacchetto e seleziona Amplify CLI. L'impostazione predefinita dovrebbe essere la versione più recente, come mostrato nell'immagine.

  

  Quindi, aggiorna il ramo front-end in modo che punti all'ambiente di back-end appena creato. Sotto il nome del ramo, scegli Modifica, quindi punta il ramo principale verso il back-end di staging appena creato. Scegli Salva.
  

  

  

  Se viene visualizzato il messaggio Configura un ruolo di servizio..., segui le istruzioni fornite prima di continuare a configurare e assegnare un ruolo di servizio alla tua app.

• Implementazione delle modifiche nell'ambiente reale

  Ora torna alla finestra del terminale locale e implementa le modifiche su GitHub per iniziare una nuova build nella console Amplify:

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

  Code snippet copied

  Copia