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 more

Uma 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).

gsg-build-amplify-4.png

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).

gsg-build-amplify-5

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).

gsg-build-amplify-6

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.

gsg-build-amplify-7

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
gsg-build-amplify-8

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).

gsg-build-amplify-9

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.

gsg-build-amplify-10

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

Envie seus comentários.

Agradecemos por seus comentários
Ficamos satisfeitos por esta página ter ajudado você. Deseja compartilhar detalhes adicionais para nos ajudar a continuar melhorando?
Fechar
Agradecemos por seus comentários
Lamentamos que esta página não tenha ajudado você. Deseja compartilhar detalhes adicionais para nos ajudar a continuar melhorando?
Fechar