Provisionando um Site Web ReactJS com AWS Amplify via Terraform

Um guia simples e objetivo para provisionar um site web em ReactJS com AWS Amplify via Terraform.

Essa é a continuação de guias e compartilhamento de experiências que pretendo trazer aqui sobre o provisionamento de aplicações com recursos sob demanda da AWS. Esse guia tem como requisito um domínio no Route 53 da AWS, por tanto, recomendo dar uma olhada em meu último artigo aqui no Medium.

Provisionando um domínio .com.br com AWS Route 53 via Terraform

O guia tem como foco o provisionamento da aplicação, no caso um site web feito com ReactJS.

AWS Amplify

Antes de iniciarmos, é importante explicar o AWS Amplify, serviço da AWS que confesso a vocês que não conhecia até dar início as minhas pesquisas e estudos de serviços sob demanda da AWS e arquitetura serverless.

O AWS Amplify é um conjunto de produtos e ferramentas que permite que desenvolvedores móveis e de frontend na web criem e implantem aplicativos de pilha completa seguros e escaláveis, desenvolvidos pela AWS.

Existem duas principais ferramentas na hora de criar um site pelo Amplify, o Amplify Studio e o Amplify Hosting. Abaixo explico de maneira simples cada ferramenta, mas nesse guia iremos utilizar somente o Amplify Hosting.

Amplify Hosting

O serviço do Amplify Hosting se conecta com o repositório onde fica armazenado o código da sua aplicação e fica reponsavel pela publicação de forma rápida e confiável, garantindo alta disponibilidade e desempenho otimizado da aplicação.

Amplify Studio

O serviço do Amplify Studio, é um ambiente de desenvolvimento visual para desenvolver aplicações móveis e Web de pilha completa. Com o Studio, você pode desenvolver rapidamente um backend de aplicação, criar componentes de IU e conectar uma IU ao backend com o mínimo de codificação. O Studio exporta todos os artefatos de IU e infraestrutura como código, de maneira que você mantém o controle total sobre o design e o comportamento da sua aplicação.

Projeto & Repositório

Explicado o serviço da AWS que iremos utilizar, vamos dar início na criação do projeto e configuração do repositório. Como repositório, optei por utilizar o GitLab, mas a ferramenta tem suporte ao GitHub, Bitbucket, AWS Code Commit e até mesmo implementação sem provedor Git.

Como nosso foco é o provisionamento do projeto, criei em meu GitLab um repositório privado utilizando o mesmo nome fictício “fusotech” com sufixo “web”. Nesse repositório adicionei somente o código seguindo o Getting Started do ReactJS de maneira simples, tendo somente a tela com a logo padrão do React.

Feito isso, por último iremos precisar de um token de usuário com acesso de leitura ao repositório. Para isso basta acessar os seus Access Tokens ou ir em User > Preferences > Access Tokens.

Na tela de configuração, basta definir um nome para o token de acesso, tempo de expiração e as permissões, nesse caso recomendo dar acesso as permissões de “api, read_api, read_repository” conforme a imagem abaixo:

Criado o Access Token, guarde o valor criado em um local seguro para utilizarmos mais tarde no script Terraform.

Terraform

Para o script terraform, irei continuar utilizando o mesmo projeto e configuração de profile do artigo anterior que indiquei no início do artigo. Irei apenas criar um novo arquivo “amplify.tf” para centralizar os recursos do novo serviço.

No script devemos informar a variável “repository” com a url de acesso ao seu repositório e o “access_token” com o token que criamos anteriormente com acesso de leitura, além disso recomendo substituir o termo “my-app” pelo nome da aplicação que será provisionada.

No scrip terraform podemos observar que definimos os comandos para realizarmos o “build” da aplicação no “build_spec”, habilitamos o build automático da aplicação em “enable_auto_build” e configuramos a branch que desejamos gerar versão da aplicação, no caso a branch “main” em “aws_amplify_branch”.

Além disso, como iremos publicar nosso site publicamente, podemos configurar um Basic Auth com usuário e senha, configurados em “enable_basic_auth” e “basic_auth_credentials”, no caso para o teste utilizei username “teste” e password “teste01”.

Entendendo o script, podemos executar:

$ terraform init

Para baixar as dependências necessárias dos recursos do terraform, em seguida:

$ terraform plan -out plan_terraform

Para verificarmos as adições, modificações e deleções que serão aplicadas com o script, estando de acordo, podemos executar:

$ terraform apply "plan_terraform"

Feito isso, se conferirmos o serviço do Amplify no console da AWS, já será possível acessarmos o nosso site em uma url fornecida pelo amplify.com:

Acessando a url da branch main configurada, primeiramente teremos que informar as credenciais informadas como basic auth:

Em seguida seremos direcionados para a tela padrão esperada:

Feito isso, provisionamos nosso site! 🎉 Mas como pretendemos compartilhar a url com o publico, vamos configurar para provisionarmos em um sub-domínio do domínio que adquirimos no último guia.

Para isso, basta configurarmos um novo recurso no mesmo arquivo “amplify.tf”, informando basicamente a referência da branch e do app, além disso, o domínio e sub-domínio que desejamos provisionar.

Podemos executar a mesma sequência que executamos anteriormente, analisando as modificações e adições que serão realizadas.

$ terraform init
$ terraform plan -out plan_terraform
$ terraform apply "plan_terraform"

Feito isso! Podemos acessar o sub-domínio configurado, no meu caso https://teste.fusotech.com.br/. Onde devemos informar novamente as credenciais configuradas no basic auth.

E em seguida:

Onde provisionamos nosso projeto em nosso próprio domínio customizado! 🎉

Existem outras diversas opções de integrações e possibilidades de configurações, recomendo acessar a documentação do Terraform para conferir os recursos do AWS Amplify.

Removendo Recursos Criados

Para realizar a exclusão do recurso, basta executar o seguinte comando e confimar com “yes” caso deseje remover os recursos indicados.

$ terraform destroy

Preços

No momento da escrita desse artigo a política de preços do serviço do AWS Amplify quanto a ferramenta do Amplify Hosting, é a seguinte:

Caso sua conta da AWS ainda esteja no período gratuito, é possível realizar esse guia sem custo algum, caso ao contrário, será cobrado sob demanda.

Em meu caso como minha conta já deixou de ser gratuita, fui cobrado em apenas USD 0,01 pelo tempo de build da aplicação e também pela simplicidade do projeto, recomendo sempre verificar no AWS Amplify Pricing para ficar por dentro caso valores sejam atualizados.

Na documentação a AWS nos fornece alguns exemplos de preços em casos reais para termos noção de valores mensais de baixo e alto uso do serviço, para avaliarmos se vale a pena no uso real em projetos.

Conclusão

O AWS Amplify é um serviço poderoso da AWS com foco na simplicidade e agilidade em integrações e publicação do serviço. Se forem os requisitos que procura, recomendo muito utilizar o serviço. Ele tem como objetivo simplificar muitos passos da publicação, escalabilidade e disponibilidade da aplicação.

Pretendo em breve trazer mais artigos relacionados a criação de recursos sob demanda na AWS seguindo meus estudos de ferramentas para arquitetura Serverless.

Obrigado pelo seu tempo e atenção! Tmjj! 😁