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á.
Crie um backend para uma aplicação Gen 1
Neste tutorial, você configurará um fluxo de trabalho completo de CI/CD com o Amplify. Você implantará um aplicativo de frontend no Amplify Hosting. Em seguida, você criará um backend usando o Amplify Studio. Por fim, você conectará o backend da nuvem ao aplicativo de frontend.
Pré-requisitos
Antes de começar este tutorial, conclua os pré-requisitos a seguir.
- Cadastrar-se em uma Conta da AWS
-
Se você ainda não é cliente da AWS, precisará criar uma Conta da AWS
seguindo as instruções online. Se cadastrar habilitará o acesso ao Amplify e a outros serviços da AWS que poderão ser usados com a sua aplicação. - Crie um repositório Git
-
O Amplify oferece suporte ao GitHub, Bitbucket, GitLab e AWS CodeCommit. Envie sua aplicação para seu repositório Git.
- Instalação da interface de linha de comandos (CLI) do Amplify
-
Para obter instruções, consulte Instalar a Amplify CLI
na documentação do Amplify Framework.
Etapa 1: Implantar um frontend
Se você tiver um aplicativo de frontend existente em um repositório Git que deseja usar neste exemplo, siga as instruções para implantar um aplicativo de frontend.
Se você precisar criar uma nova aplicação de frontend para usar neste exemplo, siga as instruções em Criar aplicação do React
Para implantar um aplicativo de frontend
-
Faça login no AWS Management Console e abra o console do Amplify
. -
Na página Todos os aplicativos, escolha Novo aplicativo e, em seguida, Hospedar aplicativo web no canto superior direito.
-
Selecione GitHub, Bitbucket, GitLab ou o provedor de repositório AWS CodeCommit e escolha Continuar.
-
O Amplify autoriza o acesso ao seu repositório git. Para repositórios do GitHub, o Amplify agora usa o atributo Aplicativos do GitHub para autorizar o acesso ao Amplify.
Para obter mais informações sobre como instalar e autorizar o aplicativo do GitHub, consulte Configurar o acesso do Amplify aos repositórios do GitHub.
-
Na página Adicionar ramificação do repositório, faça o seguinte:
-
Na lista Repositórios atualizados recentemente, selecione o nome do repositório a ser conectado.
-
Na lista Ramificação, selecione o nome da ramificação do repositório a ser conectada.
-
Escolha Próximo.
-
-
Na página Definir configurações de segurança, escolha Próximo.
-
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)__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
Etapa 2: criar um backend
Agora que você implantou um aplicativo de frontend no Amplify Hosting, é possível criar um backend. Use as instruções a seguir para criar um backend com um banco de dados simples e endpoint da API do GraphQL.
Para criar um backend
-
Faça login no AWS Management Console e abra o console do Amplify
. -
Na página Todos os aplicativos, selecione o aplicativo que você criou na Etapa 1.
-
Na página inicial do aplicativo, escolha a guia Ambientes de backend e escolha Conceitos básicos. Isso inicia o processo de configuração de um ambiente de teste padrão.
-
Depois que a configuração for concluída, escolha o Iniciar Studio para acessar o ambiente de backend de teste padrão no Amplify Studio.
O Amplify Studio é uma interface visual para criar e gerenciar seu backend e acelerar o desenvolvimento de sua interface de usuário de frontend. 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
-
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.
-
Na página Modelagem de dados, escolha Adicionar modelo.
-
No título, insira
Todo. -
Escolha Adicionar um campo.
-
Em Nome do campo, insira
Description.A captura de tela a seguir é um exemplo de como seu modelo de dados será exibido no designer.
-
Escolha Salvar e implantar.
-
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 recursos da AWS necessários no backend, incluindo uma API GraphQL AWS AppSync para acessar dados e uma tabela do Amazon DynamoDB para hospedar os itens do Todo. O Amplify usa o AWS CloudFormation para implantar seu backend, o que permite que você armazene sua definição de backend como infraestrutura como código.
Etapa 3: Conectar o backend ao frontend
Agora que você implantou um frontend e criou um backend 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 backend ao seu projeto de aplicativo local com a Amplify CLI.
Para conectar um backend de nuvem a um frontend local
-
Abra uma janela de terminal e navegue até o diretório raiz do seu projeto local.
-
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 backend do seu projeto.
amplify pull --appIdabcd1234--envNamestaging -
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 backend ao fluxo de trabalho de implantação contínua. Use as instruções a seguir para conectar uma ramificação de frontend a um backend no console do Amplify Hosting.
Para conectar uma ramificação de aplicativos de frontend e um backend de nuvem
-
Na página inicial do aplicativo, escolha a guia Ambientes de hospedagem.
-
Localize a ramificação principal e escolha Editar.
-
Na janela Editar backend de destino, em Ambiente, selecione o nome do backend a ser conectado. Neste exemplo, escolha o backend de teste padrão que você criou na Etapa 2.
Por padrão, a CI/CD full-stack está ativada. Desmarque essa opção para desativar o CI/CD full-stack para esse backend. Desativar o CI/CD full-stack 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 backend. -
Em seguida, você deve configurar um perfil de serviço para dar ao Amplify as permissões necessárias para fazer alterações no backend do seu aplicativo. É possível usar um perfil de serviço existente ou criar outro. Para obter instruções, consulte Adição de um perfil de serviço a uma aplicação do Amplify.
-
Depois de adicionar um perfil de serviço, retorne à janela Editar backend de destino e escolha Salvar.
-
Para concluir a conexão do backend de teste padrão à ramificação principal do aplicativo de frontend, 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 backend.
Crie uma interface de usuário de frontend no Amplify Studio
Use o Studio para criar sua UI de frontend com um conjunto de componentes de UI prontos para uso e, em seguida, conecte-o ao backend do seu aplicativo. Para obter mais informações e tutoriais, consulte o guia do usuário do Amplify Studio
