Construindo um back-end para um aplicativo - AWS Amplify Hospedagem
Crie um back-end para um aplicativo de 2ª geraçãoCrie um back-end para um aplicativo de primeira geração

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Construindo um back-end para um aplicativo

Com AWS Amplify você pode criar um aplicativo fullstack com dados, autenticação, armazenamento e hospedagem de front-end implantados em. AWS

AWS O Amplify Gen 2 apresenta uma experiência de desenvolvedor TypeScript baseada em código que prioriza a definição de back-ends. Para saber como usar o Amplify Gen 2 para criar e conectar um back-end ao seu aplicativo, consulte Criar e conectar back-end nos documentos do Amplify.

Se você estiver procurando a documentação para criar um back-end para um aplicativo de primeira geração, usando a CLI e o Amplify Studio, consulte Criar e conectar back-end nos documentos do Amplify de primeira geração.

Crie um back-end para um aplicativo de 2ª geração

Para ver um tutorial que orienta você nas etapas de criação de um aplicativo fullstack do Amplify Gen 2 com um back-end TypeScript baseado, consulte Primeiros passos na documentação do Amplify.

Crie um back-end para um aplicativo de primeira geração

Neste tutorial, você configurará um fluxo de trabalho completo de CI/CD com o Amplify. Você implantará um aplicativo de front-end no Amplify Hosting. Em seguida, você criará um back-end usando o Amplify Studio. Por fim, você conectará o back-end da nuvem ao aplicativo de front-end.

Pré-requisitos

Antes de começar este tutorial, preencha os pré-requisitos a seguir.

Inscreva-se para um Conta da AWS

Se você ainda não é AWS cliente, precisa criar um Conta da AWS seguindo as instruções on-line. A inscrição permite que você acesse o Amplify e outros AWS serviços que você pode usar com seu aplicativo.

Crie um repositório Git

O Amplify suporta GitHub Bitbucket e. GitLab AWS CodeCommit Envie seu aplicativo para o seu repositório Git.

Instale a interface de linha de comando (CLI) do Amplify

Para obter instruções, consulte Instalar a Amplify CLI na documentação do Amplify Framework.

Etapa 1: Implantar um front-end

Se você tiver um aplicativo de front-end existente em um repositório git que deseja usar neste exemplo, siga as instruções para implantar um aplicativo de front-end.

Se precisar criar um novo aplicativo de front-end para usar neste exemplo, siga as instruções do Create React App na documentação Create React App.

Para implantar um aplicativo de front-end

  1. Faça login no AWS Management Console e abra o console do Amplify.

  2. Na página Todos os aplicativos, escolha Novo aplicativo e, em seguida, Hospedar aplicativo web no canto superior direito.

  3. Selecione seu provedor GitHub, Bitbucket ou AWS CodeCommit repositório e escolha Continuar. GitLab

  4. O Amplify autoriza o acesso ao seu repositório git. Para GitHub repositórios, o Amplify agora usa o recurso Apps para autorizar GitHub o acesso ao Amplify.

    Para obter mais informações sobre como instalar e autorizar o GitHub aplicativo, consulteConfigurar o acesso do Amplify aos repositórios do GitHub.

  5. Na página Adicionar ramificação do repositório, faça o seguinte:

    1. Na lista Repositórios atualizados recentemente, selecione o nome do repositório a ser conectado.

    2. Na lista Ramificação, selecione o nome da ramificação do repositório a ser conectada.

    3. Escolha Próximo.

  6. Na página Definir configurações de segurança, escolha Próximo.

  7. Na página Revisar, escolha Salvar e implantar. Depois de concluir a implantação, seu aplicativo poderá ser visualizado no domínio padrão amplifyapp.com.

nota

Para aumentar a segurança de seus aplicativos do Amplify, o domínio amplifyapp.com é registrado na Lista Pública de Sufixos (PSL). Para maior segurança, recomendamos que você use cookies com um prefixo __Host- se precisar definir cookies confidenciais no nome de domínio padrão para seus aplicativos do Amplify. Essa prática ajudará a defender seu domínio contra tentativas de falsificação de solicitação entre sites (CSRF). Para obter mais informações, consulte a página Set-Cookie na Mozilla Developer Network.

Etapa 2: criar um back-end

Agora que você implantou um aplicativo de front-end no Amplify Hosting, é possível criar um back-end. Use as instruções a seguir para criar um back-end com um banco de dados simples e endpoint da API do GraphQL.

Para criar um back-end

  1. Faça login no AWS Management Console e abra o console do Amplify.

  2. Na página Todos os aplicativos, selecione o aplicativo que você criou na Etapa 1.

  3. Na página inicial do aplicativo, escolha a guia Ambientes de back-end e escolha Conceitos básicos. Isso inicia o processo de configuração de um ambiente de teste padrão.

  4. Depois que a configuração for concluída, escolha o Iniciar Studio para acessar o ambiente de back-end de teste padrão no Amplify Studio.

O Amplify Studio é uma interface visual para criar e gerenciar seu back-end e acelerar o desenvolvimento de sua interface de usuário de front-end. Para obter mais informações sobre como usar o Amplify Studio, consulte a documentação do Amplify Studio.

Use as instruções a seguir para criar um banco de dados simples usando a interface do construtor visual do Amplify Studio.

Criar um modelo de dados

  1. Na página inicial do ambiente de teste padrão do seu aplicativo, escolha Criar modelo de dados. Isso abre o designer do modelo de dados.

  2. Na página Modelagem de dados, escolha Adicionar modelo.

  3. No título, insira Todo.

  4. Escolha Adicionar um campo.

  5. Em Nome do campo, insira Description.

    A captura de tela a seguir é um exemplo de como seu modelo de dados será exibido no designer.

    A interface do usuário do Amplify Studio para criar um modelo de dados.

  6. Escolha Salvar e implantar.

  7. Retorne ao console do Amplify Hosting e a implantação do ambiente de teste padrão estará em andamento.

Durante a implantação, o Amplify Studio cria todos os AWS recursos necessários no back-end, incluindo uma API GraphQL para acessar dados e uma AWS AppSync tabela do Amazon DynamoDB para hospedar os itens do Todo. Amplify usa AWS CloudFormation para implantar seu back-end, o que permite que você armazene sua definição de back-end como. infrastructure-as-code

Etapa 3: Conectar o back-end ao front-end

Agora que você implantou um front-end e criou um back-end em nuvem que contém um modelo de dados, você precisa conectá-los. Use as instruções a seguir para reduzir sua definição de back-end ao seu projeto de aplicativo local com a Amplify CLI.

Para conectar um back-end de nuvem a um front-end local

  1. Abra uma janela de terminal e navegue até o diretório raiz do seu projeto local.

  2. Execute o comando a seguir na janela do terminal, substituindo o texto em vermelho pelo ID exclusivo do aplicativo e pelo nome do ambiente de back-end do seu projeto.

    amplify pull --appId abcd1234 --envName staging

  3. Siga as instruções na janela do terminal para concluir a configuração do projeto.

Agora é possível configurar o processo de compilação para adicionar o back-end ao fluxo de trabalho de implantação contínua. Use as instruções a seguir para conectar uma ramificação de front-end a um back-end no console do Amplify Hosting.

Para conectar uma ramificação de aplicativos de front-end e um back-end de nuvem

  1. Na página inicial do aplicativo, escolha a guia Ambientes de hospedagem.

  2. Localize a ramificação principal e escolha Editar.

    A localização do link Editar de uma ramificação no console do Amplify.

  3. Na janela Editar back-end de destino, em Ambiente, selecione o nome do back-end a ser conectado. Neste exemplo, escolha o back-end de teste padrão que você criou na Etapa 2.

    Por padrão, a CI/CD de pilha completa está ativada. Desmarque essa opção para desativar o CI/CD de pilha completa para esse back-end. Desativar o CI/CD de pilha completa faz com que o aplicativo seja executado no modo pull only. No momento da compilação, o Amplify gerará automaticamente somente o arquivo aws-exports.js, sem modificar seu ambiente de back-end.

  4. Em seguida, você deve configurar um perfil de serviço para dar ao Amplify as permissões necessárias para fazer alterações no back-end do seu aplicativo. É possível usar um perfil de serviço existente ou criar outro. Para obter instruções, consulte Adicionar um perfil de serviço.

  5. Depois de adicionar um perfil de serviço, retorne à janela Editar back-end de destino e escolha Salvar.

  6. Para concluir a conexão do back-end de teste padrão à ramificação principal do aplicativo de front-end, execute uma nova compilação do seu projeto.

    Execute um destes procedimentos:

    • Do seu repositório git, envie algum código para iniciar uma compilação no console do Amplify.

    • No console do Amplify, navegue até a página de detalhes da versão do aplicativo e escolha Reimplantar esta versão.

Próximas etapas

Configurar implantações de ramificação de atributos

Siga nosso fluxo de trabalho recomendado para configurar implantações de ramificações de atributos com vários ambientes de back-end.

Crie uma interface de usuário de front-end no Amplify Studio

Use o Studio para criar sua interface de usuário de front-end com um conjunto de componentes de ready-to-use interface e, em seguida, conecte-a ao back-end do seu aplicativo. Para obter mais informações e tutoriais, consulte o guia do usuário do Amplify Studio na documentação do Amplify Framework.