Aprenda como publicar uma Aplicação Web na internet utilizando a nuvem AWS e com uma Arquitetura 100% Serverless, imagine não se preocupar, por exemplo, em atualizações de patches do sistema operacional, pois essa parte será abstraida pela AWS o que reduz a atuação da equipe responsável pela infraestrutura e no quesito segurança, temos uma redução da superfície de ataque.
Com essa arquitetura é possível dar um foco maior na sua aplicação e não se preocupar com a administração da infraestrutura, pois utilizaremos serviços que são altamente disponíveis e administrados pela própria AWS.
Para saber mais detalhes sobre o modelo de responsabilidade compartilhada, você poderá acessar o endereço:
https://aws.amazon.com/pt/compliance/shared-responsibility-model/
Utilizaremos os seguintes serviços:

Cloud Front
S3
IAM
CI/CD

Vamos lá…
Iniciaremos com os serviços que serão a base da infraestrutura na AWS Criaremos um Bucket no Amazon Simple Storage Service (Amazon S3) ou comumente chamado de S3 para armazenar os arquivos do Web Site, esse é um serviço de Storage na Nuvem da AWS para o armazenamento de objetos onde teremos escalabilidade, alta disponibilidade dos dados, segurança e performance.
S3 – Criação do Bucket
Na tela do Amazon S3, clique no botão laranja Create bucket:

Iremos criar um bucket S3 com as configurações padrões, ativando somente a opção ACLs enabled no Object Ownership e a criptografia padrão conforme as imagens abaixo:




CloudFront – Criar o distribution ID
Agora vamos para o Cloud Front que terá a função de disponibilizar o nosso site para o mundo, pois ele fará a entrega do conteúdo da aplicação. O Cloud Front é uma CDN (Content Delivery Network) da AWS para entrega de conteúdo com alta velocidade e baixa latência devido a sua quantidade de (PoPs) Pontos de Presença espalhados pelo mundo. Mais detalhes sobre esse serviço aqui: https://aws.amazon.com/pt/cloudfront/
Precisaremos criar um Distribution, ao acessar a página do Cloud Front, clique no botão laranja Create distribution:

Ao clicar no botão Create distribution você será direcionado para a página de criação, no primeiro bloco iremos inserir as configurações de Origin, selecionando o bucket que foi criado, a opção Origin access é exibida com algumas opções que iremos configurar conforme as imagens abaixo, visando maior sergurança e performance:




Na etapa de configuração do cache, no Default cache behavior e Cache key and origin requests deixaremos as configurações padrão:


No bloco Function associations, deixaremos o padrão (imagem abaixo), pois não utilizaremos essas configurações nessa demonstração.

Em Settings, podemos configurar a opção de performance, WAF (Web Application Firewall), nome de domínios (CNAME), certificado e versão do HTTP.
Para essa demonstração específica configuraremos o Default root object como index.html, mas dependendo de como a sua aplicação foi construída, pode não ser necessário informar o index.html.


Finalizado a infraestrutura base, seguiremos para o deploy da aplicação…
Deploy da Aplicação
Simularemos uma esteira de CI/CD utilizando o Gitlab para realizar os ajustes na infraestrutura base que criamos anteriormente e o deploy da aplicação (Web Site). O intuito é automatizar esse processo e ganhar agilidade nos deploys. Obs.: É importante lembrar que as etapas demonstradas a partir desse momento, podem ser realizadas manualmente, desde o upload dos arquivos para o S3 até os ajustes no Cloud Front.
Crie um novo projeto no Gitlab e insira as variáveis (AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY e AWS_DEFAULT_REGION) para que o Gitlab tenha acesso ao nosso ambiente AWS e consigar realizar o deploy da aplicação (Web Site) conforme imagem abaixo:

Esse projeto possui uma aplicação web simples para essa demonstração, mas também é possível utilizar a mesma infraestrutura com aplicações em Node.js, React, entre outras, utilizando o arquivo serverless.yml que deixarei disponível nesse projeto.
Iremos focar nos arquivos destacados em vermelho na imagem abaixo:

Na pasta www estão os arquivos que serão enviados para o Bucket S3.
No arquivo .gitlab-ci.yml definimos as ações que serão tomadas, a ordem de execução, em qual condição e os recursos necessários.
Segue abaixo os comandos básicos necessários para fazer o download do projeto para a sua máquina e enviar as alterações para o Gitlab:
# 1- Clonar o projeto com o comando abaixo:
git clone git@gitlab.com:devops-breno/serverless_website.git
# 2 - Faça as alterações necessárias no projeto e envie para o repositório executando os comandos abaixo:
git add .
git commit -m "Novo WebSite Estático"
git origin push main
Após executar os comandos, você poderá acompanhar a execução do Job no menu CI/CD / Jobs, se tiver sucesso no deploy, você irá visualizar uma tela conforme imagem abaixo:

Recebendo a mensagem Job succeeded, o deploy foi realizado com sucesso e você poderá acessar o endereço do Cloud Front para teste conforme abaixo:

Acessando o endereço, será possível acessar a página de exemplo com a arquitetura serverless do ambiente:

Pronto! Agora temos uma Aplicação Web 100% Serverless na AWS.
O link abaixo é referente ao site publicado nesse post:
https://d2uhz4c1bwszas.cloudfront.net
Link para download do projeto utilizado:
https://github.com/BrenoACarvalho/ServerlessWebSite
Até breve! 🙂