Como implementar um aplicativo estático na AWS com S3/Cloudfront/Route53

Você tem seu site pronto, mas não sabe onde hospedá-lo? As opções que você encontra parecem muito caras e complicadas? Se você respondeu sim a uma ou ambas as perguntas, a AWS pode ser uma ótima opção para implantar seu site. Amazon Web Services ou AWS, como é conhecido no mundo da nuvem, pode ser intimidante à primeira vista (digo isso por experiência própria). Entrar no console, clicar no navegador de serviços e ver muitas opções pode ser confuso, mas depois de conhecer os diferentes serviços que ele oferece e entender como eles se relacionam, você ficará encantado com o número infinito de projetos que a AWS pode Apoio, suporte.


Vantagens e desvantagens

Entre as vantagens podemos encontrar as seguintes:

- É muito barato. De acordo com a mesma página da AWS, o custo é próximo a US$ 0,50 por mês. Se quiser saber mais, entre aqui.

- Simples de executar. Mesmo que os passos não sejam curtos, você pode encarar este tutorial como um quebra-cabeça que já está montado em menos de 15 minutos e depois disso não demorará mais de 1 minuto para atualizar, caso haja alguma alteração.

- Os pipelines de integração contínua podem ser criados no Github Actions. Dessa forma, suas implantações serão automáticas e você não precisará mais se preocupar em entrar no console e configurar tudo manualmente. Outro detalhe é que para construir esses pipelines já existem templates muito fáceis de usar na internet, então é só entender como funciona o Github Actions, como criar sua primeira Action e como usar o template citado. Neste modelo apenas terá de alterar detalhes como os nomes dos serviços que utiliza.

Entre as desvantagens encontramos as seguintes:

- Essa desvantagem não está relacionada ao uso do AWS, mas ao tipo de renderização que usaremos, pois trabalhamos com arquivos estáticos. A renderização será dada a partir do navegador, o que significa que cada usuário será quem construirá a página que vê através dos arquivos HTML e JavaScript que fornecemos. E por que isso é uma desvantagem? Pois bem, acontece que os bots do Google têm problemas ao indexar páginas que são renderizadas dessa forma, pois as páginas não são totalmente carregadas ao aparecer no Google, mas são construídas no navegador do cliente, como foi mencionado anteriormente. Isso afeta muito o SEO.

Existe outro tipo de renderização: a que vem do servidor. Nesse caso, temos um servidor que está sempre ligado e responde às solicitações dos clientes com toda a nossa página já construída apenas para o navegador exibir. Usar esse tipo de renderização torna mais fácil para os bots do Google indexarem nossa página, ajudando o SEO.

O que eu preciso?

- Uma conta na AWS. A criação é muito simples e existem muitos tutoriais que ensinam como fazer, aqui está um dos meus favoritos.

- Uma pasta com todos os arquivos estáticos do seu projeto. Quais são os arquivos estáticos do meu projeto? Esta pasta leva nomes diferentes dependendo da estrutura com a qual você trabalha. Por exemplo, no caso do Angular 2 em diante, seu nome é dist/, enquanto no caso de uma aplicação feita em React seu nome é build/. Não importa qual estrutura ou biblioteca você usa, é apenas uma questão de pesquisar na Internet como criar a partir de arquivos estáticos para começar com este tutorial.

- Um domínio registrado no Route53. Se o seu domínio não foi registrado no Route53, não se preocupe, pois é possível "transferi-lo" para este serviço. Esta "transferência" varia pouco dependendo do seu provedor de domínio e não é complicada de realizar. Conheça mais detalhes aqui.

Passo a passo

O framework React será utilizado neste momento, mas como mencionado anteriormente, ele também serve como um guia caso você tenha desenvolvido seu front-end com Angular, Vue ou algum outro framework.

O domínio que usaremos para o tutorial será mars-project.xyz.

1) Criação da aplicação em React. Para criar nossa aplicação base em React vamos utilizar o seguinte comando em um terminal, substituindo  pelo nome do seu App:

create-react-app

Este comando criará um front-end de modelo a partir do qual podemos construir nosso projeto. Este modelo inclui todas as pastas e arquivos que podemos precisar. Se você ainda não possui este comando, instale-o com npm através do seguinte comando: npm install -g create-react-app

2) Revisão do package.json de nosso React App.

Nosso novo React App possui entre seus scripts aquele necessário para o build (conforme imagem abaixo).

3) Compile o projeto e explore a pasta com os arquivos estáticos. Se abrirmos um terminal e executarmos o comando npm run build, a pasta build será gerada com os seguintes elementos dentro:

Esses são todos os arquivos estáticos mencionados anteriormente que precisarão ser carregados na AWS.

4) Entenda os serviços da AWS que usaremos.

-S3: Aqui vamos carregar todos os arquivos estáticos usando seus baldes.

-CloudFront: É o AWS CDN. Graças a isso, nosso site atenderá os diferentes clientes em todo o mundo com mais rapidez. Saiba mais sobre CDNs aqui.

-Route53: É o DNS da AWS. Aqui pode registar os seus domínios ou transferir a gestão de domínios registados junto de outros fornecedores.

5) Crie os S3 buckets.

a) Uma vez que entramos no serviço AWS S3, clicamos no botão Create bucket.

b) Vamos criar dois buckets, um com o mesmo nome do nosso domínio e outro com o prefixo www antes do nosso domínio. Neste tutorial, os dois buckets serão:

1. mars-project.xyz
2. www.mars-project.xyz

c) Para a criação dos baldes, apenas os nomes serão modificados conforme pode ser visto aqui:

Em seguida, clicamos no botão Criar bucket na parte inferior da página e continuamos.

6) Carregue os arquivos estáticos no bucket do S3.

a) Entramos no balde www.mars-proyect.xyz.
b) Ao entrar veremos as opções (como na imagem abaixo). Clicamos no botão laranja que diz Carregar.

c) Ao clicar no botão no ponto b, veremos uma tela como a seguinte:

Aqui começaremos clicando em Adicionar pasta e faremos o upload da pasta ou pastas que foram geradas dentro de nossa pasta de construção a partir do ponto 3. Como podemos ver, a única pasta a ser carregada é a pasta estática.

Em seguida, selecionamos Adicionar arquivos e carregue todos os outros arquivos.

Finalmente, quando a pasta e os arquivos forem carregados corretamente, a página deverá ficar semelhante à imagem abaixo. É importante observar que o número total de arquivos é bastante variável e depende de cada projeto.

7) Configure as permissões do bucket www.mars-proyect.xyz.

a) Começaremos editando as configurações do balde. Clique no botão Editar mostrado abaixo.

Uma tela será aberta. Nela, desmarque a caixa de seleção, para que a página fique conforme a imagem abaixo e clique em Salvar alterações.

Edite a Bucket Policy.

Para isso, usaremos um modelo que você pode encontrar aquí.

É importante destacar a partir desse modelo que devemos substituir Bucket-Name pelo nome do nosso bucket. No caso deste tutorial, www.mars-proyect.xyz.

Nosso Bucket Policy ficará assim:

8) Configure as propriedades do balde www.mars-proyect.xyz.

Depois de selecionar as properties, rolamos para baixo até a parte inferior da página. Lá veremos uma seção que diz Static Site Hosting. Clicamos no botão Edit.

Aqui alteramos os campos, de forma que fique como na imagem abaixo. Em seguida, damos Save Changes.

9) Configure as propriedades do balde mars-proyect.xyz.

Como no ponto anterior, depois de entrar no bucket e clicar em Properties, descemos até ao fundo da página. Lá clicaremos no botão Edita na seção Static Website Hosting.

Aqui modificaremos os campos para que fiquem como na imagem abaixo e clicaremos em Save changes. O que faremos com este bucket é redirecionar as requisições para o bucket com o prefixo www.

10) Gere nosso certificado no AWS Certificate Manager.

a) Entramos no serviço AWS Certificate Manager.

b) Clicamos no botão laranja Request.

c) Ao clicar nele, aparecerão as opções abaixo. Selecionamos Next.

d) Adicionar os nomes de domínio Adicionaremos dois nomes de domínio: www.mars-proyect.xyz e mars-proyect.xyz.

Clicamos em Solicitar para finalizar.

11) Validar nossos certificados. Isso será fácil já que nosso domínio está na AWS. Para isso, basta inserir o certificado e selecionar Create records in Route 53 conforme abaixo:

Em seguida, aparecerá a seguinte tela. Clicamos em Create records e pronto.

Para confirmar que foi validado, revisamos nossa lista de certificados até que o status mude para Issued.

12) Crie as distribuições no CloudFront.

a) Entramos no serviço AWS CloudFront.

b) Escolhemos Create Distribution.

c) Entramos e esta será a primeira tela que veremos ao fazê-lo:

No campo Origin domain, colocaremos o endpoint do bucket www.mars-proyect.xyz. Para isso, entramos em nosso bucket e procuramos esse imóvel dentro de properties.

d) Na mesma tela do ponto c, alteramos a Protocol policy para que ele redirecione de http para https.

e) Na seção Settings da mesma tela dos pontos c e d, adicionamos o nome de domínio e também o certificado que geramos anteriormente.

f) Fazemos o mesmo para o outro bucket.

g) Uma vez criadas nossas distribuições, podemos ver a deployment na coluna Last modified. Atualizamos até que o valor da coluna mude para uma data.

13) Realize a Hospedagem com Route53.

a) Acessamos o serviço AWS Route53.

b) Entramos na Hosted Zone do nosso domínio, mars-proyect.xyz.

c) Escolhemos Create Record no botão laranja, conforme a imagem abaixo.

d) Escolhemos a opção Simple Routing e clicamos em Next.

e) Na tela que aparece, clicamos no botão Define Simple Records.

f) Criamos dois registros A, um para mars-proyect.xyz e outro para www.mars-proyect.xyz. Ambos os registros devem apontar para as Cloudfront distributions.

g) Defina o record para mars-project.xyz.

h) Definimos o registro da mesma forma para www.mars-proyect.xyz, apenas alterando a distribuição e adicionando o subdomínio www.

i) Ao finalizarmos a definição de nossos registros, clicamos no botão laranja Create records.

14) Pronto! Você pode visitar o projeto em: https://www.mars-proyect.xyz/.

Como podemos ver, implantar um aplicativo na AWS não é complicado. Pelo contrário, é simples, barato e amigável ao desenvolvedor. Mas, como tudo no mundo da programação, essa forma tem suas desvantagens e nós, como construtores, devemos levá-las em consideração.

Devemos sempre considerar as limitações dos serviços, frameworks ou linguagens que utilizamos. Nesse caso, a maior limitação é a questão de SEO mencionada entre as desvantagens, então se você está muito preocupado com SEO eu recomendo usar a rserver-side rendering junto com alguma outra forma de hospedar seu app, como o AWS Fargate.

Até a próxima!