Implantar uma aplicação Web no Amazon Amplify
GUIA DE CONCEITOS BÁSICOS
Módulo 3: Automatizar a implementação
Neste módulo, você usará o pipeline incorporado de integração e entrega contínuas do Amplify para implantar sua aplicação Web.
Introdução
Neste módulo, você armazenará a aplicação em um repositório (também chamado de repo) do GitHub e usará a console do Amplify para configurar a implementação contínua.
O que você aprenderá
- Conectar um repositório do GitHub ao Amplify
- Usar o Amplify para configurar a implementação contínua
Tempo para a conclusão
5 minutos
Pré-requisitos do módulo
- Conta da AWS com acesso de administrador**
- Navegador recomendado: versão mais recente do Chrome ou Firefox
[**]Talvez as contas criadas nas últimas 24 horas ainda não tenham acesso aos serviços necessários para este tutorial.
Implementação
Armazenar o projeto no GitHub
Antes de configurar o projeto para implantar atualizações automaticamente, você precisa hospedá-lo em algum lugar. Este guia pressupõe que você já conhece o GitHub, tem uma conta e sabe criar um repositório privado. Crie um repo privado e publique nele o código criado até o momento.
Configurar a implementação contínua
Para configurar o Amplify para implantar o código, conecte-o à sua conta do GitHub. Para fazer isso, abra a Console AWS, pois é preciso gerar um token do GitHub para acessar o repo privado e armazená-lo na sua conta da AWS. No diretório amplify-app, execute amplify add hosting. O Amplify mostrará uma lista de perguntas sobre a hospedagem. Selecione as opções exibidas abaixo:
amplify add hosting
? Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
Amazon CloudFront and S3
? Choose a type
❯ Continuous deployment (Git-based deployments)
Manual deployment
Learn moreUma nova janela abrirá no navegador, e você poderá acessar a console do Amplify para configurar a hospedagem no projeto. Na página da aplicação na console do Amplify, clique na aba Frontend environments (Ambientes de frontend), selecione GitHub e clique no botão Connect branch (Conectar ramificação).
Você acessará o GitHub. Agora conceda à console do Amplify acesso à sua conta do GitHub para que ela possa implantar o código-fonte hospedado nela. Para fazer isso, clique no botão verde Authorize aws-amplify-console (Autorizar aws-amplify-console).
Agora você conectará seu repo do GitHub à aplicação do Amplify. Na página Add repository branch (Adicionar ramificação do repositório), selecione o repo amplify-web-app e a ramificação main. Depois, clique em Next (Avançar).
Na próxima etapa, defina as configurações da compilação da aplicação. Você precisará de uma role de serviço do IAM que permita que o Amplify acesse seus recursos da AWS na sua conta para realizar a implantar automaticamente. Na página Configure build settings (Definir configurações da compilação), clique no botão Create new role (Criar função) na caixa azul.
A console do IAM abrirá em uma nova aba e será preenchida com os valores necessários. Clique em Create Role (Criar role):
- Tipo de entidade confiável: serviço da AWS
- Serviço: Amplify
- Caso de uso: Amplify: implementação de backend
- Política de permissão: AdministratorAccess-Amplify
Após a criação, feche a aba do navegador e volte para a página Configure build settings (Definir configurações da compilação). Clique em Refresh existing roles (Atualizar roles existentes) e selecione a role recém-criada no menu suspenso. Depois, selecione dev no menu suspenso Environment (Ambiente). Esse é o ambiente criado ao configurar o Amplify no seu projeto depois de executar amplify init.
Deixe as configurações restantes com os valores-padrão e clique em Next (Avançar).
Verifique os valores configurados e clique em Save and deploy (Salvar e implantar). Agora o Amplify começará a implantar automaticamente a aplicação React nas alterações do repositório de origem.
Volte para o terminal e pressione Enter para acompanhar o andamento:
? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository
Amplify hosting urls:
┌──────────────┬────────────────────────────────────────────┐
│ FrontEnd Env │ Domain │
├──────────────┼────────────────────────────────────────────┤
│ main │ https://main.d339jiqv9kzj2m.amplifyapp.com │
└──────────────┴────────────────────────────────────────────┘Após a conclusão da implementação, ela estará disponível no URL exibido, e todos poderão acessar a aplicação por ele.
Conclusão
Neste módulo, você aprendeu a conectar seu repo privado do GitHub ao código da aplicação Web para configurar a implementação automática com o Amplify. No próximo módulo, você aprenderá a excluir a aplicação implantada e todos os recursos da AWS criados para ela.
A seguir: Limpar os recursos