Deploy automático e escalável de aplicações frontend com AWS Amplify

Todos os dias, novas tecnologias são criadas para facilitar o nosso trabalho como desenvolvedor, sejam elas frameworks de desenvolvimento, CI/CD ou infraestrutura.

Atualmente muito é se falado em deploy de aplicações frontend na Vercel, que é um ótimo serviço e faz muito bem o proposto.

Porém vejo muito pouco se falar sobre o Amplify da AWS, um serviço auto-escalável, e super barato, dependendo do uso o free-tier irá te atender e não pagará nada para hospedar sua aplicação.

Outra vantagem é que caso sua aplicação tenha um backend (API) e você a hospede também na AWS, ai ficará com toda sua infraestrutura em apenas um único lugar.

Como o Amplify funciona, e quais serão os passos cobertos nesse artigo?

• Tenha uma aplicação para fazermos o deploy. Aqui vamos criar uma nova aplicação com Nuxt.js.
• Ao entrar no portal da AWS dentro de seu console, criaremos uma aplicação e conectaremos o nosso repositório Git nela.

Após isso, vamos configurar os passos para o deploy da aplicação:

• Quais serão os branches que farão o trigger de um deploy, aqui podemos, p. e., configurar ambientes de staging e production.
• Variáveis de ambiente.
• Script de deploy (build).
• Etc.

Feito isso, o Amplify te fornecerá uma URL para cada branch e aplicação, a qual você poderá usá-la como um CNAME em seu domínio. Nesse artigo faremos isso usando o AWS Route53.

Criando uma aplicação

Para fins de exemplificar o processo, vamos criar uma aplicação padrão com o framework Nuxt.js, mas esses passos podem ser reutilizados para praticamente todos os tipos de frameworks, seja React, Vue, Angular, etc.

No final vou deixar o link do repositório da aplicação no GitHub, mas para quem quiser seguir o passo a passo, vamos lá:

• Primeiro, criei uma nova aplicação com o comando:

• Após isso, entre na pasta e rode npm install ou yarn install para instalar as dependências.
• Por último, você poderá iniciar a aplicação local rodando npm run dev ou yarn dev, ela se parecerá com isso ao abri-la no seu browser:

Trabalhando com variáveis de ambiente

Para mostrar mais features que o Amplify possui, vamos incluir uma simples variável de ambiente e exibi-la na nossa aplicação. Vamos criar uma variável para determinar o ambiente que estamos utilizando, podendo ser local, staging e production.

Para isso, vamos criar um arquivo .env na raiz da aplicação, com o seguinte conteúdo:

Vamos também criar o arquivo .env.example para termos ele adicionado no nosso repositório GIT, já que por padrão (e razões de segurança) o .env será ignorado pelo arquivo .gitignore.

Agora vamos alterar nossa aplicação para ler essa variável e utilizá-la de alguma forma:

No arquivo nuxt.config.ts vamos adicionar instruções para a aplicação ler as variáveis de ambiente do nosso arquivo .env, incluindo as seguintes configs de runtime:

Pronto, agora na nossa página app.vue podemos alterar o conteúdo para exibir em qual ambiente a aplicação está rodando:

Caso tenha dado tudo certo, você terá isso ao atualizar o seu browser:

Para quem não quer fazer o passo a passo, segue aqui o link para a aplicação. Com isso pronto, podemos partir para o Amplify.

Configurando a aplicação para deploy no Amplify

Aqui vou assumir que já possui uma conta na Amazon e que possui acesso ao painel do Amplify, pode acessá-lo por aqui.

Para configurar sua nova aplicação e conectá-la a seu repositório, siga esses passos, escolhendo é claro o serviço Git de sua preferencia, no meu caso usei o GitHub:

Após isso, escolha o seu repositório, coloque o nome do branch, e clique em Next. Na próxima etapa vamos colocar no nome Revelo Amplify - Production, e vamos configurar abaixo o processo de build da aplicação.

O Amplify tenta “adivinhar” o processo de build da sua aplicação, e quase faz tudo certo, porém vamos modificar o processo de build e o path da build, o arquivo final ficará assim:

Antes de prosseguir, clique em Advanced Settings para configurarmos as variáveis de ambiente de produção.

Em key, adicione APP_ENV e em value production. Pronto, clique em Next, confira se está tudo certo, teremos algo desse tipo:

Se está tudo ok, clique em Save and deploy. Lembrando que caso algo dê errado, você poderá editar tudo isso posteriormente, então fique tranquilo/a 🙂.

Após isso, o Amplify começará a fazer o build da sua aplicação, e após poucos minutos você terá o link da app disponível para acesso. No meu caso, a aplicação de production está em https://master.d13pfaq3tkx46y.amplifyapp.com/.

Como expliquei antes, você pode usar esse link como um CNAME para um domínio que você possua. Para exemplificar, vamos configurar meu site pessoal no Amplify, acessando Domain Management:

Após isso ele pedirá para que configure os registros de CNAME em seu domínio, e após as configurações sua aplicação será acessível por ele, ex: https://revelo-amplify.brayanrastelli.com.br/

Novos ambientes

Caso queira um novo ambiente, como p.e. um ambiente de staging (homologação), você pode conectar um novo branch na sua aplicação Amplify:

Após isso você terá uma nova URL de staging para utilizar, da mesma forma que foi feito com o link de production.

Variável de ambiente de acordo com o branch

Para finalizar, precisamos criar uma variável de ambiente específica para o ambiente de staging. Vamos acessar Environment variables. Ali já temos a variável APP_ENV configurada para todos os branches. Vamos configurar uma nova variável específica para o branch staging:

Agora faremos um novo deploy no site de staging para aplicar a variável de ambiente, e ver o resultado após o final do processo:

Resultado final ao acessar os dois domínios

Conclusão

Nesse artigo vimos como é simples configurar uma aplicação no Amplify, de forma automática, escalável, segura, barata, para não precisar mais ter que se preocupar com servidores, memória, CPU, porém com a mesma flexibilidade para gerar a build, configurar variáveis de ambiente para ter múltiplos ambientes, etc.

Me conta o que achou, se já utiliza ou ficou curioso para aprender e começar a utilizar.

Sucesso!