[Notas de estudo] AWS para Engenheiros Frontend

As Tecnologias Principais

Amazon S3 (Simple Storage Service)

• O que é: Um serviço de armazenamento de objetos.
• Para que serve: Atua como o repositório de origem para todos os ativos estáticos (HTML, CSS, JavaScript, imagens e fontes).
• Quando usar: Para hospedar o build de aplicações React, Vue, Angular ou Next.js e armazenar uploads de usuários.
• Dica de Segurança: A prática recomendada é manter o bucket privado e usar o Origin Access Control (OAC) para permitir que apenas o CloudFront acesse os arquivos.

Amazon CloudFront (CDN)

• O que é: Uma Rede de Entrega de Conteúdo (CDN) global com centenas de Pontos de Presença (PoPs).
• Para que serve: Reduz a latência ao servir arquivos de locais fisicamente próximos ao usuário e fornece suporte nativo a HTTPS.
• Quando usar: Sempre que precisar de performance global, proteção contra ataques (DDoS) e certificados SSL gratuitos.

Amazon Route 53 (DNS)

• O que é: Um serviço de DNS altamente disponível e escalável.
• Para que serve: Conecta o domínio (ex: www.sua-app.com) à infraestrutura técnica da AWS.
• Quando usar: Para gestão de domínios e criação de Registros Alias, que permitem mapear o domínio raiz sem custos de consulta.

Computação de Borda (Edge Computing)

• Permite executar lógica de programação nos pontos de presença do CloudFront, eliminando a necessidade de servidores centrais para tarefas simples.
• CloudFront Functions: Scripts JavaScript ultra-leves que rodam em menos de 1ms. Ideais para manipulação de cabeçalhos e reescrita de URLs (como transformar /perfil em index.html para SPAs).
• Lambda@Edge: Funções mais robustas (Node.js/Python) que permitem chamadas de rede e acesso a bancos de dados. Usadas para autenticação na borda, testes A/B e redimensionamento dinâmico de imagens.

A Relação Entre Elas

• S3 armazena o "corpo" da aplicação (os arquivos).
• CloudFront é o "sistema de entrega" que leva esses arquivos rápido ao usuário.
• Route 53 e ACM fornecem o "nome" e o "cadeado de segurança" (HTTPS).
• Edge Functions são a "inteligência no caminho", ajustando a requisição antes que ela chegue ao destino.

Exemplo de Arquitetura para um aplicação SPA

1. O Início (Route 53): O usuário digita seusite.com. O Route 53 traduz esse nome para o endereço da rede da AWS.
2. A Entrega (CloudFront): A requisição chega ao CloudFront, que verifica se já tem uma cópia do seu site guardada em um servidor perto do usuário (cache).
3. A Lógica (Edge Computing): Antes de entregar, pequenos scripts (CloudFront Functions ou Lambda@Edge) podem ajustar a rota, como transformar /perfil em index.html para que apps React/Vue funcionem.
4. A Origem (S3): Se o entregador não tiver o arquivo guardado, ele vai buscar no S3 (o armazém), onde os arquivos reais (HTML, JS, CSS) estão protegidos.
5. A Resposta: O CloudFront recebe o arquivo do S3, guarda uma cópia para o próximo usuário e entrega ao navegador com segurança HTTPS.

Dicas Simples para Cada Serviço

• S3
  • Nunca deixe seu bucket público.
  • Use o OAC (Origin Access Control) para que apenas o CloudFront possa "entrar" no bucket e pegar os arquivos.
• CloudFront:
  • Use hashes nos nomes dos arquivos (Geralmente os frameworks já fazem isso quando geram os arquivos de build). Isso permite que você configure o CloudFront para guardar esses arquivos por 1 ano, pois, se você mudar o código, o nome do arquivo muda e o cache se renova sozinho.
• Route 53:
  • Use Registros Alias em vez de CNAME. Eles são gratuitos para recursos da AWS e permitem que seu site funcione tanto em www.site.com quanto apenas em site.com.
  • AWS ACM: Para funcionar com o CloudFront, você deve criar o seu certificado SSL na região de N. Virginia (us-east-1), mesmo que seu site esteja em outra região.
    • Para que serve: Fornecer certificados HTTPS gratuitos.
• Edge Computing:
  • Use CloudFront Functions para coisas simples (redirecionar URLs ou mudar headers), pois são muito baratas e rápidas.
  • Deixe o Lambda@Edge para coisas complexas, como checar se o usuário está logado, etc.