Neste guia, vou me aprofundar no deploy de uma aplicação ReactJS no AWS Amplify. Vou mostrar como configurar uma aplicação ReactJS local no AWS Cloud9 e enviá-la para o AWS Amplify em produção. Também vou apresentar os passos para fazer o deploy do app usando um repositório do GitHub.
Vou explicar como usar o AWS Amplify para hospedar o app com o Amazon S3 e o CloudFront, garantindo uma distribuição rápida da aplicação web. E, para fechar com chave de ouro, vou mostrar como configurar um domínio personalizado para o seu app.
Por que usar o AWS Amplify? O AWS Amplify é um conjunto de ferramentas e serviços que ajuda desenvolvedores a criar e fazer deploy de aplicações web e mobile full-stack na AWS. Com o AWS Amplify, dá para criar em poucos minutos um backend completo com autenticação, dados, armazenamento e muito mais. Você também pode montar uma UI de frontend de forma visual, com a integração design-to-code do Figma, e conectar a UI ao backend em poucos cliques.
O Amplify tem suporte a vários frameworks web e roda na nuvem segura e escalável da AWS. Então, se você está começando agora ou já programa há anos, o AWS Amplify pode facilitar — e muito — a sua vida.
Pré-requisitos do tutorial
Para este tutorial, você vai precisar de:
- Uma conta AWS.
- Uma conta no GitHub para hospedar repositórios Git.
- Conhecimento básico do uso do Git CLI para enviar commits a um repositório remoto.
- Domínio personalizado (opcional).
Crie um ambiente AWS Cloud9
O AWS Cloud9 é uma IDE poderosa baseada na nuvem que permite escrever, executar e depurar código direto no navegador. Ideal para apps serverless e ReactJS, ele dá suporte a várias linguagens sem precisar de instalações locais.
Nesta etapa, vamos criar um ambiente no AWS Cloud9 e usá-lo para criar uma aplicação ReactJS local.
Abra o console do AWS Cloud9 em https://console.aws.amazon.com/cloud9/.
Vamos começar criando um ambiente Cloud9. Ele vai rodar em uma instância T3.small com Amazon Linux 2. O acesso à instância subjacente será configurado pelo AWS Systems Manager, o que permite fazer SSH para a instância sem precisar abrir nenhuma porta de entrada no security group. Durante a configuração, o Cloud9 cria roles do IAM para acessar serviços da AWS em seu nome.
Na página do ambiente, selecione sua instância Cloud9 e clique no link Open. Pronto: você já está conectado à sua IDE Cloud9.
Antes de criar o app ReactJS, confira se a sua instância está rodando o Node.js na versão 12.x e o npm na versão 6.x ou superior.
O React usa essas versões para garantir desempenho e compatibilidade na construção de interfaces de usuário.
Crie uma aplicação ReactJS local
Vamos configurar uma aplicação React no AWS Cloud9 para testes locais. A partir do diretório '~/environment', vamos criar um novo projeto React chamado "cloud-wanderer-blog". Execute os comandos:
$ npx create-react-app cloud-wanderer-blog
$ cd cloud-wanderer-blog
$ npm start
Para iniciar o app React, entre no diretório do projeto 'cloud-wander-blog' e rode o comando 'npm start'.
O AWS Cloud9 não usa um localhost para acessar suas aplicações em execução. Em vez disso, ele oferece um recurso de pré-visualização dentro da própria IDE.
No menu superior da IDE do AWS Cloud9, selecione Preview > Preview Running Application. Isso vai abrir uma nova aba no seu ambiente, exibindo o app React em execução.
Crie um repositório no GitHub e adicione ao Cloud9
Faça login na sua conta do GitHub e selecione 'New repository' no botão '+' no canto superior direito. Esse repositório vai armazenar os arquivos e configurações da aplicação React. Eu chamei o meu novo repositório de cloud-wanderer.
Não marque 'Add a README file', porque a instalação do React no Cloud9 já criou o arquivo README.
Faça o upload da sua aplicação React do Cloud9 para o novo repositório remoto no GitHub. Você pode adicionar os arquivos pelo próprio GitHub ou usar o Git CLI na sua instância Cloud9.
Confira o link do GitHub para orientações sobre como fazer upload de arquivos: https://docs.github.com/en/repositories/working-with-files/managing-files/adding-a-file-to-a-repository
Observe que, quando inicializei meu repositório Git local no Cloud9, ele criou uma branch 'master'. Para manter tudo consistente e preparado para o futuro com o repositório remoto no GitHub, renomeei minha branch local de 'master' para 'main'. Essa mudança de 'master' para 'main' faz parte de uma iniciativa mais ampla para promover uma linguagem mais inclusiva.
Instale o Amplify CLI
Com o ambiente de staging configurado no Cloud9, agora vamos preparar um ambiente de produção no AWS Amplify. Para configurar o app Amplify, instalei o Amplify CLI a partir de '~/home/ec2-user' na minha instância Cloud9. Para que o Amplify CLI consiga abrir arquivos e links de URL para o console de gerenciamento da AWS, instalei também o xdg-utils.
$ cd
$ sudo yum install xdg-utils -y
$ npm install -g @aws-amplify/cli
Configure o Amplify CLI
Para configurar o Amplify CLI na sua máquina local, é preciso conectá-lo à sua conta AWS. Para isso, usamos o 'amplify configure'. Clique no link fornecido para fazer login no Console da AWS.
Volte ao terminal do Cloud9 e informe a região da AWS. Eu escolhi a região eu-west-1.
O Amplify CLI vai pedir que você crie um usuário IAM. Clique no link de criação de usuário, que abrirá a página de criação de usuário do IAM. Informe um User name e selecione Next. Você pode dar qualquer nome ao usuário, mas eu vou chamá-lo de "amplify-cli-admin". Clique no botão Next.
Selecione Attach policies directly e escolha AdministratorAccess-Amplify como a política de permissões.
Na página Review, confira se está tudo certo e selecione Create user.
Você vai ser redirecionado para a página com a lista de usuários. Selecione o usuário que acabou de criar. Na página de detalhes do usuário, abra a aba Security credentials. Role até Access keys e clique em Create access keys.
Em caso de uso, selecione a opção Command Line Interface (CLI). Confirme o aviso e clique em Next.
Baixe uma cópia do arquivo CSV com as access keys do usuário IAM. Guarde o arquivo em um local seguro.
Volte ao console do Cloud9 e pressione Enter. Informe os valores da Access key e da Secret access key. Selecione o padrão para o nome do profile. Pronto: o Amplify CLI está configurado na região escolhida com as credenciais de segurança.
Inicialize o app Amplify
Execute o comando 'amplify init' para criar um novo projeto Amplify. Isso prepara a aplicação React para o Amplify. O Amplify é esperto o bastante para sugerir configurações padrão com base no diretório cloud-wanderer-blog. Você pode aceitar esses padrões pressionando 'Y' ou recusá-los e definir suas próprias preferências pressionando 'N'.
$ cd ~/environment/cloud-wanderer-blog/
$ amplify init
Para autenticar, escolha AWS Profile. Selecione o profile padrão configurado na etapa anterior. Caso contrário, escolha Access Keys e informe manualmente os IDs da Access Key e da Secret Access Key.
Vá até o Console do Amplify e veja o app Amplify implantado pelo Amplify CLI.
Conecte o Amplify ao repositório do GitHub
Agora vamos conectar nosso app Amplify ao repositório do GitHub. Isso facilita muito o processo de CI/CD.
No console do Amplify, abra a aba do hosting environment do app Amplify.
Autorize o Amplify a se conectar ao seu repositório do GitHub. Adicione o repositório e a branch.
Em Build settings, selecione 'dev' como ambiente. Crie uma role do IAM para o Amplify acessar seus recursos. O Amplify detecta as configurações de build padrão. Se você tiver configurações diferentes, é só editar o script Yaml.
Quando terminar, revise as configurações e clique em Save and deploy para finalmente fazer o deploy da aplicação.
O processo de provisionamento, build e deploy leva alguns minutos.
A aplicação Amplify já está disponível pelo link do endpoint.
Teste o deploy contínuo
Agora é hora de testar o deploy contínuo. Nesta etapa, modifiquei o App.js, a página inicial do React, vinculando-o a uma segunda página. Pré-visualizei a página para conferir a alteração localmente.
Usando o Git CLI no Cloud9, enviei a alteração para o repositório do GitHub. O AWS Amplify detectou as mudanças automaticamente e iniciou um novo processo de build e deploy.
Quando terminar, atualize o app Amplify no navegador e confira as mudanças.
O VISIT Cloud Wanderer BLOG agora aponta para a nova página.
Faça o deploy do CloudFront para hospedar conteúdo estático
Usar o Amazon CloudFront é fundamental para a velocidade do seu site. O CloudFront armazena seu conteúdo em cache nas Edge locations da AWS para entregá-lo aos usuários com mais rapidez.
O CloudFront pode ser adicionado pelo Amplify usando o S3 como servidor de origem. Uma ressalva desse método é que não é possível modificar a distribuição do CloudFront, já que usar o console do Amplify implanta os recursos em uma conta gerenciada pela AWS.
Uma alternativa é fazer o deploy do CloudFront pelo Amplify CLI.
O comando 'amplify add hosting' configura um bucket S3 e uma distribuição CloudFront para fazer cache do seu conteúdo estático. Você poderá acessar e gerenciar tanto o bucket S3 quanto a distribuição CloudFront a partir da sua conta AWS.
Execute o comando 'amplify add hosting'. Selecione Amazon CloudFront and S3. Informe um nome para o bucket S3.
Envie suas alterações executando 'amplify publish'. Isso faz o upload dos artefatos de build e do conteúdo estático para o novo bucket S3. O CloudFront vai entregar o conteúdo estático a partir das edge locations, melhorando os tempos de carregamento.
Com o AWS CLI, podemos listar os objetos no bucket S3 recém-criado:
$ aws s3 ls s3://cloud-wanderer-bucket-dev - region eu-west-1
O deploy do CloudFront e do S3 introduz novas configurações no diretório do Amplify. Essas alterações precisam ser commitadas e enviadas para o seu repositório remoto no GitHub.
Comportamento de cache do CloudFront
Use o Curl para verificar se o CloudFront está fazendo cache do conteúdo estático.
Na saída do Curl, observe o header x-cache. 'Hit from cloudfront' indica que o CloudFront está armazenando o conteúdo em cache. Já 'Miss from cloudfront' significa que o conteúdo não está sendo cacheado.
Não se preocupe se aparecer 'Miss from cloudfront' na primeira tentativa. O conteúdo precisa ser acessado pelo menos uma vez antes de ser armazenado em cache.
Adicionando um domínio personalizado
O endpoint padrão do Amplify é parecido com https://main.d335ddgrzlw9s5.amplifyapp.com/
Para facilitar o acesso ao seu app Amplify, vamos configurá-lo com um domínio personalizado.
Nesta etapa, vou adicionar o domínio 'cloudwanderer.life' ao meu app Amplify. Comprei o domínio 'cloudwanderer.life' na GoDaddy.
Abra o console do Route 53 em https://console.aws.amazon.com/route53/
Clique em Hosted Zones. Escolha Create Hosted Zone. Informe o nome do seu domínio e clique em Create. Quando você cria uma hosted zone, o Route 53 atribui automaticamente quatro name servers à zona.
Na sua conta de hospedagem (GoDaddy, Google Domains), atualize o DNS com os name servers do Route 53. Assim, o Route 53 passa a controlar o DNS do domínio.
Vale lembrar que a propagação do DNS pode levar até 48 horas para se completar pela internet, por causa dos valores de TTL (Time to Live) configurados nos servidores DNS pelo mundo.
Agora, no console do Amplify, podemos servir nossa aplicação Amplify usando o domínio personalizado cloudwanderer.life
No console do Amplify, clique em Domain Management no menu à esquerda. Em seguida, clique no botão Add Domain.
Aqui, o menu suspenso mostra o domínio hospedado no Route53. Escolha esse domínio e clique em Configure domain.
O Amplify vai criar registros CNAME no Route53 para verificar a propriedade do domínio.
Isso configura o app Amplify com o seu domínio (leva entre 5 e 20 minutos).
Quando terminar, você poderá acessar seu app Amplify pelo domínio personalizado.
Neste tutorial, mostrei como usar o Amplify CLI para criar e fazer deploy de uma aplicação React. Primeiro, criamos um app React local no Cloud9. Depois, instalamos e configuramos o Amplify CLI. Em seguida, fizemos o deploy do app React no Amplify usando o Amplify CLI.
Mostramos como conectar o app React do Amplify ao GitHub. Para melhorar o desempenho do app, configuramos ele com o CloudFront. Por fim, configuramos nosso app Amplify com um domínio personalizado.
Espero que este tutorial tenha sido útil e desejo muito sucesso no deploy da sua aplicação!