Criar uma aplicação React de pilha completa

Implementação

• Instale as bibliotecas do Amplify

  Precisaremos de duas bibliotecas do Amplify para nosso projeto. A biblioteca aws-amplify principal contém todas as APIs do cliente para interação com os vários serviços da AWS com os quais trabalharemos, e a biblioteca @aws-amplify/ui-react contém componentes da interface de usuário específicos da estrutura de trabalho. Instale essas bibliotecas na raiz do projeto.
  

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

  Code snippet copied

  Copiar
• Criar o serviço de autenticação

  Para criar o serviço de autenticação, use a CLI do 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
• Implantar o serviço de autenticação

  Agora que o serviço de autenticação foi configurado localmente, podemos implantá-lo executando o comando push do Amplify:
  

  amplify push --y

  Code snippet copied

  Copiar
• Configurar o projeto React com os recursos do Amplify

  A CLI criou e continuará a atualizar um arquivo chamado aws-exports.js, localizado no diretório src do nosso projeto. Usaremos este arquivo para informar o projeto do React sobre os diferentes recursos da AWS, disponíveis em nosso projeto do Amplify.

  Para configurar a aplicação com esses recursos, abra o src/index.js e adicione o código abaixo à última importação:

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

  Code snippet copied

  Copiar
• Adicione o fluxo de autenticação no App.js

  Depois, abra o src/App.js e atualize-o com o seguinte 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

  Neste código, usamos o componente withAuthenticator. Esse componente estruturará todo o fluxo de autenticação do usuário, permitindo que eles se cadastrem, façam login, redefinam senhas e confirmem o login para a autenticação multifator (MFA). Também adicionamos um botão Sair para desconectar os usuários.
  

• Execute o a aplicação localmente

  Aguarde a conclusão da implantação dos recursos e execute a aplicação para ver o novo fluxo de autenticação protegendo a aplicação:
  

  npm start

  Code snippet copied

  Copiar

  

  Aqui, você pode tentar se inscrever, o que enviará um código de verificação para seu e-mail. Use o código de verificação para fazer login na aplicação. Quando estiver conectado, você verá um botão Sair, que desconecta você e reinicia o fluxo de autenticação.

  

• Configure o CI/CD do front-end e do back-end

  Em seguida, precisamos configurar o processo de construção do Amplify para adicionar o back-end como parte do fluxo de trabalho de implantação contínua. Na janela do seu terminal, execute:
  

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

  Code snippet copied

  Copiar

  Isso abrirá o console do Amplify. No painel de navegação, escolha Configurações da aplicação > Configurações de criação e modifique-as para adicionar a seção de back-end (linhas 2 a 7 no código abaixo) ao seu amplify.yml. Depois de fazer as edições, escolha Salvar.
  

  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

  Role para baixo até Criar configurações de imagem e escolha Editar. Selecione o menu suspenso Adicionar substituição de versão do pacote e selecione Amplify CLI. O padrão deve ser a versão mais recente, conforme mostrado na imagem.

  

  Em seguida, atualize sua ramificação de front-end para apontar para o ambiente de back-end que você acabou de criar. Abaixo do nome da ramificação, escolha Editar e, em seguida, aponte sua ramificação principal para o back-end de teste que você acabou de criar. Escolha Salvar.
  

  

  

  Se a mensagem Configure um perfil de serviço... for exibida, siga as instruções fornecidas antes de continuar configurando e anexe um perfil de serviço à aplicação.

• Implante as alterações no ambiente ativo

  Agora, retorne à janela do terminal local e implante as alterações no GitHub para iniciar uma nova compilação no console do Amplify:

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

  Code snippet copied

  Copiar