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:
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Amazon_Web_Services-Logo-1024x683.png)
Cloud Front
S3
IAM
CI/CD
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/gitlab-logo1.png)
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:
![](https://brenocarvalho.cloud/wp-content/uploads/2022/12/Create-Bucket-1024x381.png)
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:
![](https://brenocarvalho.cloud/wp-content/uploads/2022/12/Object-Ownership-1024x450.png)
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Block-Public-Access-1-1024x649.png)
![](http://brenocarvalho.cloud/wp-content/uploads/2022/11/Bucket-Versioning.png)
![](http://brenocarvalho.cloud/wp-content/uploads/2022/11/Default-Encryption-1.png)
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:
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Criar-Distribution-1024x486.png)
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:
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Create-Distribution-Origin-2-1024x528.png)
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Origin-access-1-1024x640.png)
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Create-a-control-setting-1024x591.png)
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Alterar-bucket-policy-1024x184.png)
Na etapa de configuração do cache, no Default cache behavior e Cache key and origin requests deixaremos as configurações padrão:
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Default-cache-behavior-1024x808.png)
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Cache-key-and-origin-requests-1024x748.png)
No bloco Function associations, deixaremos o padrão (imagem abaixo), pois não utilizaremos essas configurações nessa demonstração.
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Function-associations-1024x432.png)
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.
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Settings-1-1024x841.png)
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Settings-2-1-1024x583.png)
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:
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Gitlab-1-1024x593.png)
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:
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Gitlab-Project-1024x386.png)
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:
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/Gitlab-Jobs-1024x685.png)
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:
![](https://brenocarvalho.cloud/wp-content/uploads/2022/11/CloudFront-Domain-1024x468.png)
Acessando o endereço, será possível acessar a página de exemplo com a arquitetura serverless do ambiente:
![](https://brenocarvalho.cloud/wp-content/uploads/2022/12/WebSite-Serverless-1024x618.png)
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! 🙂