AWS S3 + CloudFront + Route53 Guia Completo de Implementação em Ambiente de Produção

📅 2026-01-31

✅Primeira Parte: Preparação Prévia

Lista de Verificação de Preparação

  • Conta AWS (com método de pagamento ativado)
  • Nome de domínio próprio (por exemplo: example.com)
  • Arquivos do site prontos (HTML/CSS/JS)
  • Navegador aberto no console AWS (console.aws.amazon.com)

Compreensão de Conceitos-Chave

  • Bucket S3: Contêiner para armazenar arquivos do site
  • CloudFront: CDN global, acelera distribuição de conteúdo
  • Route53: Serviço de resolução DNS, associa domínios
  • ACM: Serviço de certificado SSL/TLS gratuito
  • OAC: Origin Access Control, garante que apenas CloudFront acesse S3

💾Segunda Parte: Criação e Configuração do Bucket S3

1Criar um Bucket S3

Caminho: Página inicial do console AWS → S3 → Buckets → Criar bucket

Passos Detalhados

  1. Faça login no console AWS
  2. Na caixa de pesquisa superior, digite S3 → Clique para entrar no serviço S3
  3. Na barra lateral esquerda, clique em "Buckets"
  4. Clique no botão "Criar bucket" (azul)

Preencher o Formulário

┌─ Nome do bucket │ Insira: example-com-website │ ✓ Único globalmente │ ✓ Apenas letras minúsculas, números, hífens │ ✓ Não pode começar com "xn--" │ ├─ Região │ Selecione: us-east-1 (ou a região mais próxima) │ 💡 Recomenda-se us-east-1 para reduzir custos do CloudFront │ ├─ Propriedade do objeto │ Selecione: ACL desabilitado │ ├─ Configuração de bloqueio de acesso público │ ✓ Mantenha tudo marcado (controlará o acesso por meio do CloudFront depois) │ ├─ Versionamento │ ○ Desabilitado (opcional, recomenda-se desabilitar para reduzir custos) │ ├─ Criptografia do lado do servidor │ ○ Usar chaves gerenciadas pelo Amazon S3 (SSE-S3) │ └─ Botão Criar Clique em "Criar bucket"
✅ Indicador de Sucesso: O novo bucket aparece na lista de buckets com status ✓

2Habilitar Hospedagem de Site Estático

Caminho: Bucket S3 → Propriedades → Editar hospedagem de site estático

Passos Detalhados

  1. Clique no nome do bucket que acabou de criar (example-com-website)
  2. Clique na guia "Propriedades" (quinta a partir da direita)
  3. Role para baixo para encontrar a seção "Hospedagem de site estático"
  4. Clique no botão "Editar"

Itens de Configuração

┌─ Hospedagem de site estático │ ○ Habilitar ← Você deve selecionar esta opção │ ├─ Tipo de hospedagem │ ○ Hospedar um site ← Selecione esta opção (não selecione redirecionamento de solicitação) │ ├─ Documento de índice │ Insira: index.html │ Descrição: Arquivo retornado quando o usuário acessa / │ ├─ Documento de erro │ Insira: error.html │ Descrição: Arquivo retornado quando ocorrem erros 404/403 │ └─ Salvar alterações → Clique no botão "Salvar"
✅ Verificação com Sucesso:
  • A página mostra "✓ Atualização concluída"
  • Sob "Hospedagem de site estático" mostra "Habilitado"
  • Você verá uma URL de endpoint do site

3Carregar Arquivos do Site

Caminho: Bucket S3 → Objetos → Carregar

Exemplo de Estrutura de Arquivos

my-website/ ├── index.html ← Obrigatório ├── error.html ← Obrigatório ├── css/ │ └── style.css ├── js/ │ └── app.js ├── images/ │ └── logo.png └── about.html

Método de Carregamento

Método A: Arrastar e Soltar
Arraste a pasta do site para a área de carregamento, suporta carregamento recursivo de subpastas

Método B: Selecionar Clicando
Clique em "Adicionar arquivo" ou "Adicionar pasta" e selecione arquivos um a um
✅ Verificação de Carregamento:
  • Veja o progresso de carregamento atingir 100%
  • Depois de retornar ao bucket, veja a lista de todos os arquivos

🔐Terceira Parte: Criar Origin Access Control (OAC)

4Criar OAC

Caminho: CloudFront → Segurança → Origin Access

Passos Detalhados

  1. Na caixa de pesquisa superior, digite CloudFront → Entre no serviço CloudFront
  2. Na barra lateral esquerda, expanda o menu "Segurança"
  3. Clique em "Origin Access"
  4. Clique no botão "Criar Origin Access Control"

Preencher o Formulário

┌─ Nome do Origin Access Control │ Insira: s3-website-oac │ Descrição: Para facilitar a identificação, personalizável │ ├─ Tipo de origem │ ✓ S3 ← Você deve selecionar S3 │ ├─ Descrição (opcional) │ Insira: Para site estático de example.com │ └─ Botão Criar Clique em "Criar"
✅ Indicador de Sucesso:
  • O OAC recém-criado aparece na página
  • Copie o ID do OAC mostrado (por exemplo: E127EXAMPLE51Z)
⚠️ Nota Importante: Lembre-se do ID do OAC, você precisará dele para configuração posterior

⚡Quarta Parte: Criar Distribuição CloudFront

5Criar Distribuição CloudFront

Caminho: CloudFront → Distribuições → Criar distribuição

Configuração de Origem - Parte Origin

┌─ Domínio de origem │ Clique na caixa de entrada → Selecione o bucket S3 no menu suspenso │ Deve mostrar: example-com-website.s3.us-east-1.amazonaws.com │ ⚠️ Não selecione o endpoint s3-website, selecione a URL S3 padrão │ ├─ Acesso de origem │ ○ Configuração do Origin Access Control ← Selecione esta opção │ ├─ Controle de Acesso de Origem │ Clique no menu suspenso → Selecione o "s3-website-oac" que criou anteriormente │ └─ Protocolo quando S3 é a origem ○ Apenas HTTPS ← Recomenda-se selecionar (mais seguro)

Configuração do Comportamento de Cache Padrão

┌─ Política de protocolo do visualizador │ ○ Redirecionar HTTP para HTTPS ← Selecione esta opção │ Descrição: Redireciona automaticamente HTTP para HTTPS │ ├─ Métodos HTTP permitidos │ ✓ GET, HEAD (mantenha o padrão) │ ├─ Política de cache e política de solicitação de origem │ Política de cache: Clique no menu suspenso → Selecione "CachingOptimized" │ Política de solicitação de origem: Clique no menu suspenso → Selecione "S3Origin" │ └─ Comprimir objetos ✓ Habilitar ← Pode reduzir custos de dados

Configuração de Distribuição

┌─ Habilitar esta distribuição │ ✓ Deve estar marcado │ ├─ Nomes de domínio alternativos (CNAME) │ ⚠️ Não preencha por enquanto, configure depois │ ├─ Objeto raiz padrão │ Insira: index.html │ Descrição: Arquivo retornado quando / é acessado │ ├─ IPv6 │ ✓ Habilitar (já é o padrão) │ └─ Criar distribuição Clique no botão "Criar distribuição"
⏳ Aguarde: A implementação da distribuição leva 5-10 minutos, o status muda de "Em progresso" para "Implantado"

6Copiar Nome de Domínio CloudFront

Caminho: CloudFront → Distribuições → Detalhes da Distribuição

  1. Depois de criar a distribuição, clique no ID da distribuição
  2. Na guia "Detalhes da Distribuição" veja as informações a seguir
  3. Copie o nome de domínio da distribuição (d111111abcd.cloudfront.net)
Nome de domínio da distribuição: d111111abcd.cloudfront.net ↑ Copie este item (para usar depois) ID da distribuição: E1234ABCD

7Aplicar Política do Bucket S3

Caminho: S3 → Bucket → Permissões → Política do Bucket

Passos de Operação

  1. Volte ao serviço S3
  2. Selecione o bucket do site (example-com-website)
  3. Clique na guia "Permissões"
  4. Role para baixo para encontrar "Política do Bucket" e clique em "Editar"
  5. Cole o seguinte JSON na caixa de edição

JSON da Política do Bucket (requer modificação)

{ "Version": "2012-10-17", "Statement": [ { "Sid": "AllowCloudFrontOAC", "Effect": "Allow", "Principal": { "Service": "cloudfront.amazonaws.com" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::example-com-website/*", "Condition": { "StringEquals": { "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/E1234ABCD" } } } ] }
⚠️ Três Itens que Você Deve Modificar:
  • example-com-website → Substitua pelo nome do seu bucket
  • 123456789012 → Substitua pelo seu ID de conta AWS
  • E1234ABCD → Substitua pelo seu ID de distribuição CloudFront
✅ Concluído: Clique em "Salvar alterações"

🔒Quinta Parte: Solicitar Certificado ACM

8Solicitar Certificado SSL/TLS

Caminho: ACM (AWS Certificate Manager) → Certificados → Solicitar certificado

Nota Importante

⚠️ A Região é Muito Importante: Certifique-se de que a região seja US East (N. Virginia), CloudFront apenas suporta certificados desta região

Passos Detalhados

  1. Na caixa de pesquisa superior, digite Certificate Manager → Entre no serviço ACM
  2. Certifique-se de que a região seja US East (N. Virginia)
  3. Clique no botão "Solicitar certificado"

Preencher o Formulário

┌─ Tipo de certificado │ ○ Certificado público ← Você deve selecionar esta opção │ ├─ Adicionar nomes de domínio │ Clique em "Adicionar nome de domínio" → Insira: example.com │ Clique novamente → Insira: *.example.com │ │ Exibição final: │ ✓ example.com │ ✓ *.example.com │ ├─ Método de validação │ ○ Validação DNS ← Selecione esta opção (mais rápido que Email) │ ├─ Algoritmo de chave │ ○ RSA 2048 (mantenha o padrão) │ ├─ Marcas (opcional) │ Insira: website-cert │ └─ Botão Solicitar Clique em "Solicitar"

Validação DNS Posterior

Após solicitar, a página solicitará que você valide o domínio:

Passos:
  1. Na área de "Validação de Domínio" você verá os registros de validação
  2. Clique no botão "Criar registro do Route53"
  3. AWS adicionará automaticamente um registro CNAME no Route53
  4. Aguarde 5-30 minutos, o status mudará para "Emitido"
✅ Concluído: O status do certificado mudará para "Emitido"

🌐Sexta Parte: Configuração de DNS do Route53

9Criar Zona Hospedada do Route53

Caminho: Route53 → Zonas Hospedadas → Criar Zona Hospedada

Passos Detalhados

  1. Na caixa de pesquisa superior, digite Route53 → Entre no serviço Route53
  2. Na barra lateral esquerda, clique em "Zonas Hospedadas"
  3. Clique no botão "Criar Zona Hospedada"

Preencher o Formulário

┌─ Nome do domínio │ Insira: example.com │ ⚠️ Não inclua www ou http:// │ ├─ Descrição (opcional) │ Insira: Hospedagem de site │ ├─ Tipo │ ○ Zona Hospedada Pública ← Selecione esta opção │ └─ Criar Zona Hospedada Clique no botão "Criar Zona Hospedada"

Registrar Informações Importantes

ID da Zona Hospedada: Z1234567890ABC ↑ Copie e anote este item Servidores de Nomes (registros NS): ns-1111.awsdns-22.com ns-2222.awsdns-33.co.uk ns-3333.awsdns-44.org ns-4444.awsdns-55.net ↑ Copie estes 4 registros NS

10Atualizar Configuração de DNS do Registrador de Domínio

Operação no Registrador de Domínio (como GoDaddy, Namecheap, Aliyun, etc.)

Passos

  1. Faça login em sua conta do registrador de domínio
  2. Encontre "Gerenciamento de DNS" ou "Gerenciamento de Domínio"
  3. Modifique os Servidores de Nomes (registros NS) para os 4 que copiou acima
  4. Salve as alterações
⏳ Propagação de DNS: Pode levar 1-48 horas, você pode verificar com o seguinte comando:
nslookup example.com # Você deveria ver os registros NS da AWS

11Criar Registros de Alias no Route53

Caminho: Route53 → Zonas Hospedadas → Criar Registro

Criar Primeiro Registro (Domínio Raiz)

┌─ Nome do registro │ Deixe em branco (representa o domínio raiz example.com) │ ├─ Tipo de registro │ Clique no menu suspenso → Selecione "A" │ ├─ Alias │ ✓ Habilitar alias ← Você deve marcá-lo │ ├─ Selecionar política de tráfego │ ○ Roteamento simples ← Mantenha o padrão │ ├─ Rotear tráfego para │ Clique no menu suspenso → Selecione "Distribuição CloudFront" │ ├─ Selecionar distribuição │ Clique no menu suspenso → Selecione sua distribuição (d111111abcd.cloudfront.net) │ ├─ Avaliar integridade do destino │ ○ Não (mantenha o padrão) │ └─ Criar registro Clique em "Criar registro"

Criar Segundo Registro (Subdomínio www)

Repita os passos anteriores, mas mude "Nome do registro" para www, o resto da configuração é igual.

✅ Concluído: Ambos os registros devem apontar para a mesma distribuição CloudFront

12Configurar CNAME do CloudFront e Certificado

Caminho: CloudFront → Distribuições → Editar

Passos

  1. Volte ao serviço CloudFront
  2. Selecione sua distribuição (clique no ID da distribuição)
  3. Clique no botão "Editar"
  4. Encontre o campo "Nomes de domínio alternativos (CNAME)"
  5. Clique na caixa de entrada e adicione dois nomes de domínio
Adicione na caixa de entrada de nomes de domínio alternativos: example.com www.example.com

Selecionar Certificado SSL

Role para baixo para encontrar "Certificado SSL personalizado" ou "Certificado SSL" ┌─ Certificado SSL │ ✓ Certificado SSL personalizado │ ├─ Selecionar certificado │ Clique no menu suspenso → Selecione o certificado que solicitou anteriormente │ Deve mostrar: example.com (e *.example.com) │ └─ Salvar Clique em "Salvar alterações"
⏳ Aguarde Implementação: O status da distribuição muda de "Em progresso" para "Implantado" (geralmente 5-10 minutos)

⚙️Sétima Parte: Configurar Política de Cache

13Definir Cache para Diferentes Tipos de Arquivo

Caminho: CloudFront → Distribuições → Comportamentos → Editar

Esta etapa é usada para otimizar custos e desempenho. Defina diferentes tempos de cache para diferentes tipos de arquivo.

Configuração do Comportamento Padrão

1. Volte à página de edição de distribuição CloudFront 2. Clique na guia "Comportamentos" 3. Selecione Comportamento Padrão → Clique em "Editar" ┌─ Chave de cache e política de solicitação de origem │ Política de cache: CachingOptimized (já configurado) │ ├─ Cabeçalhos de controle de cache de solicitação do visualizador │ ✓ Usar cabeçalho Cache-Control original │ └─ Salvar Clique em "Salvar"

Opcional: Criar Comportamento Separado para HTML

Se precisar de controle mais granular, você pode criar regras de comportamento diferentes para diferentes tipos de arquivo:

Comportamento do Arquivo HTML:
Padrão de caminho: *.html Política de cache: Cache Desabilitado (não armazene em cache, obtenha o mais recente cada vez) Política de solicitação de origem: S3Origin
Comportamento do Arquivo JavaScript:
Padrão de caminho: *.js Política de cache: CachingOptimized Compressão: Habilitar

✔️Oitava Parte: Teste e Verificação

14Testar Acesso ao Site

URL de Teste

Acesse no navegador: https://example.com https://www.example.com https://d111111abcd.cloudfront.net (URL direta do CloudFront)

Indicadores de Sucesso

  • ✅ A página carrega normalmente
  • ✅ HTTPS é válido (a barra de endereços mostra um ícone de cadeado)
  • ✅ As informações do certificado estão corretas (clique no ícone de cadeado para ver)

Tabela de Solução de Problemas

Problema Causa Solução
Mostra página de erro do AWS S3 Política do bucket S3 não configurada corretamente Verifique o ID da distribuição na política do bucket
Mostra "Access Denied" OAC não aplicado corretamente Confirme que há OAC na política do bucket S3
O nome de domínio personalizado não funciona DNS do Route53 não entrou em vigor Aguarde propagação de DNS (máximo 48 horas)
Certificado SSL inválido Certificado ACM não implementado no CloudFront Selecione o certificado correto no CloudFront
O acesso é lento O cache não está funcionando Verifique a configuração do cabeçalho Cache-Control

🚀Nona Parte: Otimização de Desempenho

15Configurar Otimização de Cabeçalho de Cache

Definir cabeçalhos Cache-Control apropriados para arquivos no S3 pode reduzir significativamente custos e melhorar desempenho.

Método A: Através do Console AWS

  1. S3 → Bucket → Objetos
  2. Selecione arquivo → "Ações de Objeto" → "Editar Metadados"
  3. Adicione metadados personalizados (Chave: Cache-Control)

Recomendação de Tempo de Cache

Tipo de Arquivo Valor de Cache-Control Descrição
Arquivo HTML public, max-age=300, must-revalidate 5 minutos, deve revalidar
CSS/JS/Imagem public, max-age=31536000, immutable 1 ano, requer nomes de arquivo com versão
Resposta de API public, max-age=0 Sem cache, obtenha o mais recente cada vez

Método B: Através da AWS CLI

# Carregar e configurar cache HTML aws s3 cp index.html s3://example-com-website/index.html \ --metadata "Cache-Control=public, max-age=300" # Carregar e configurar cache a longo prazo para JS/CSS aws s3 cp app.a1b2c3d4.js s3://example-com-website/ \ --metadata "Cache-Control=public, max-age=31536000, immutable"

16Habilitar Compressão Gzip

Habilitar compressão automática no CloudFront pode reduzir tráfego em 60-70%.

Passos

  1. CloudFront → Distribuições → Editar
  2. Encontre "Comportamento de Cache Padrão"
  3. Marque "Habilitar Compressão" ✓
💰 Economia de Custos: Depois de habilitar a compressão, arquivos de texto (HTML, CSS, JS) podem reduzir 60-70% do volume de transferência

📊Décima Parte: Monitoramento e Controle de Custos

17Configurar Alertas de Monitoramento

Monitoramento do Custo do CloudFront

  1. Entre em CloudWatch ou Gerenciamento de Custos
  2. Configure alertas orçamentários
Nome do orçamento: Website Monthly Cost Valor do orçamento: $10 (exemplo) Limite de alerta: Notificar quando atingir 80%

Monitoramento de Indicadores-Chave de Desempenho

Veja os seguintes indicadores na distribuição CloudFront:

  • Número de solicitações: Total de solicitações por dia
  • Volume de transferência de dados: Tamanho do tráfego de saída
  • Taxa de acerto do cache: Deve ser > 90%
  • Taxa de erros: Deve estar perto de 0%

Tabela de Estimativa de Custos (Mensal)

Serviço Custo Descrição
Armazenamento S3 $0.23 10GB × $0.023
Solicitações GET S3 $0.04 1M ÷ 1000 × $0.0004
Saída CloudFront Grátis Cota gratuita de 1TB (100GB usado)
Solicitações CloudFront Grátis Cota gratuita de 10M (1M usado)
Route53 $0.50 Taxa mensal de zona hospedada
Certificado ACM Grátis Grátis para uso interno da AWS
Total $0.77/mês

Perguntas Frequentes

P1: Como atualizar arquivos do site?

# Método 1: Usar AWS CLI aws s3 cp ./new-file.html s3://example-com-website/ aws s3 sync ./website-files/ s3://example-com-website/ --delete # Método 2: Usar console AWS # S3 → Bucket → Carregar → Selecionar arquivo → Carregar

P2: Como limpar o cache do CloudFront?

  1. CloudFront → Distribuições → Invalidações
  2. Criar invalidação → Insira caminho /* → Criar
💡 Dica: Isto removerá todos os arquivos em cache (geralmente entra em vigor em 5 minutos)

P3: Qual é o fluxo de transferência de dados de S3 + CloudFront?

Usuário → Nó Perimetral CloudFront → Bucket S3 ↓ Retornar conteúdo em cache (rápido)

P4: Como implementar redirecionamento HTTPS?

Já está configurado no CloudFront:

  • Política de protocolo do visualizador: Redirecionar HTTP para HTTPS

Todas as solicitações HTTP serão redirecionadas automaticamente para HTTPS.

✅Lista de Verificação Resumida

Após a Implementação, Verifique os Seguintes Itens

  • Bucket S3 criado e arquivos carregados
  • Hospedagem de site estático habilitada (index.html, error.html)
  • OAC criado
  • Distribuição CloudFront criada e implementada
  • Certificado ACM solicitado e verificado
  • Zona hospedada Route53 criada
  • DNS do registrador de domínio atualizado para NS do Route53
  • Registros de alias (registros A) criados
  • CNAME do CloudFront configurado
  • Certificado ACM aplicado ao CloudFront
  • https://example.com acessível normalmente
  • Política de cache otimizada
  • Compressão habilitada
  • Monitoramento de custos configurado

Manutenção Posterior

Operação Diária

  • Verifique regularmente a taxa de acerto do cache do CloudFront (deve ser > 90%)
  • Monitore o custo mensal
  • Use o comando aws s3 sync ao atualizar conteúdo do site

Manutenção Regular

  • Verifique a data de expiração do certificado ACM (renovação automática)
  • Verifique se a configuração de DNS do Route53 está correta
  • Limpe versões antigas de objetos S3 (se versionamento for habilitado)

Otimização de Desempenho

  • Use registros em tempo real do CloudFront para analisar taxa de acerto do cache
  • Ajuste regularmente a configuração do cabeçalho Cache-Control
  • Considere usar Lambda@Edge para computação na borda

🎉 Implementação Concluída

Agora você tem uma solução de hospedagem de site estático de nível de produção e baixo custo

📊 Custo: $0.50 - $5 em média mensal
⚡ Desempenho: Carregamento global < 500ms
🔒 Segurança: HTTPS + Proteção DDoS
📈 Escalabilidade: Manipula automaticamente crescimento de tráfego