DNS não transporta o conteúdo
O Route 53 resolve o hostname. Depois disso, o navegador estabelece a conexão HTTPS diretamente com a rede do CloudFront.
Voltar para projetos
Projeto concluídoCloud & CDN
Frontend com CDN, S3, TLS e domínio customizado
Arquitetura segura e escalável para publicação de uma SPA React, com origem privada, distribuição global, HTTPS e domínio customizado na AWS.
ReactAmazon S3CloudFrontACMRoute 53OAC
Ambiente implementado
Configuração real validada na AWS
Os dados abaixo representam o ambiente implantado e foram conferidos por consultas de leitura e testes HTTP após o deploy.
- Aplicação
- residencia.fsocloudconsulting.com
- Origem
- Bucket S3 privado em us-east-1
- Distribuição
- CloudFront implantado e habilitado
- Acesso à origem
- OAC com assinatura SigV4
- Certificado
- ACM emitido em us-east-1
- Cache
- Managed-CachingOptimized
Visão geral
Entrega segura e global de uma aplicação frontend
A solução disponibiliza uma aplicação React sem servidores web dedicados. Os arquivos estáticos permanecem em uma origem privada e são entregues pelo CloudFront com cache distribuído, domínio próprio e criptografia TLS.
Desafio
Requisitos que orientaram a solução
- 01Publicar uma SPA com baixa latência e alcance global, sem manter servidores de aplicação.
- 02Proteger os arquivos da origem e impedir que o bucket fosse acessado diretamente pela internet.
- 03Disponibilizar domínio próprio, HTTPS obrigatório e suporte às rotas internas da aplicação.
Arquitetura
Como os recursos se conectam
O Route 53 resolve o hostname, mas não transporta o conteúdo. Depois da resolução DNS, o navegador acessa a rede do CloudFront por HTTPS. A CDN utiliza o certificado do ACM e busca os arquivos no S3 por meio do OAC, sem tornar o bucket público.
AWS Cloud
Usuário
Navegador
↓1. DNS →
Amazon Route 53
DNS público · Alias
↓2. HTTPS →
Amazon CloudFront
CDN global · HTTPS
ACM · TLS · us-east-1
↓3. OAC →
Bucket privado
Amazon S3
index.html + assets
Cache HIT
O CloudFront responde diretamente da edge, sem consultar o S3.
Fallback da SPA
Erros 403 e 404 retornam /index.html com status 200.
O diagrama representa o caminho da requisição, as fronteiras de acesso e o comportamento de cache da solução.
Fundamentos
Conceitos demonstrados pela implementação
Além da criação dos recursos, o projeto foi usado para compreender o caminho da requisição, as fronteiras de segurança e o comportamento do cache.
Edge location não é Região
A borda termina TLS, consulta o cache e busca a origem quando necessário. O bucket continua provisionado em uma Região AWS.
Cache hit e cache miss
Em um hit, a borda responde sem consultar o S3. Em um miss, busca o objeto na origem e pode armazenar uma cópia.
Uma única porta pública
O bucket permanece privado para impedir que domínio, TLS, cache e controles da distribuição sejam contornados.
OAC autentica a CDN
O CloudFront assina a requisição com SigV4, e a bucket policy limita GetObject ao ARN da distribuição autorizada.
Deploy inclui o cache
Enviar arquivos ao S3 não basta: a versão correta precisa estar sendo entregue pela CDN, especialmente o index.html da SPA.
Decisões técnicas
Escolhas que sustentam a arquitetura
Origem privada
O endpoint público de website do S3 foi descartado. O CloudFront acessa o bucket privado por OAC e uma policy restritiva.
DNS direto para a CDN
Um registro Alias A no Route 53 resolve residencia.fsocloudconsulting.com para a distribuição CloudFront.
TLS gerenciado
O certificado do hostname da aplicação foi emitido pelo ACM em us-east-1, região exigida pelo CloudFront.
Cache distribuído
A política gerenciada CachingOptimized reduz acessos à origem. A atualização do index.html exige invalidação ou uma política de TTL específica.
Compatibilidade com SPA
Respostas 403 e 404 retornam o index.html com status 200, preservando o roteamento do lado do cliente.
HTTPS obrigatório
Toda requisição HTTP é redirecionada para HTTPS antes da entrega do conteúdo.
Implementação
Construção e configuração da solução
A implementação conectou a geração do build da aplicação à configuração da origem, distribuição, certificado e DNS, mantendo cada responsabilidade isolada e verificável.
- 1Preparação da aplicação React e geração dos artefatos otimizados para produção.
- 2Criação do bucket S3 com Block all public access habilitado e publicação do build da SPA.
- 3Solicitação e validação DNS do certificado ACM para residencia.fsocloudconsulting.com, na região us-east-1.
- 4Criação da distribuição CloudFront usando a origem S3, OAC, HTTPS obrigatório, GET/HEAD e CachingOptimized.
- 5Configuração do index.html como objeto raiz e fallback da SPA para erros 403 e 404.
- 6Criação do registro Alias A no Route 53, apontando o subdomínio da aplicação para a distribuição.
Validação
Critérios verificados após o deploy
HTTPS
Uma requisição por HTTP é redirecionada para HTTPS com resposta 301.
Roteamento da SPA
Um caminho que não corresponde a um arquivo retorna o index.html, sem expor um erro do S3.
Origem privada
O acesso direto à URL do bucket é negado; o conteúdo é servido exclusivamente pelo CloudFront.
Cache na borda
Uma segunda consulta ao conteúdo retornou Hit from cloudfront em uma edge location de São Paulo.
TesteResultado observado
RedirecionamentoHTTP 301 para HTTPS
Página principalHTTPS 200
Fallback da SPARota inexistente retorna index.html com status 200
Proteção da origemAcesso direto ao S3 retorna 403 AccessDenied
CacheX-Cache: Hit from cloudfront
Segurança do bucketBlock Public Access ativo, ACLs desabilitadas e policy não pública
Validações repetidas em 27/09/2026. Identificadores internos da conta AWS foram omitidos desta página pública.
Resultados
Uma entrega completa dentro do escopo definido
- ✓Distribuição global do frontend por meio da rede de borda do CloudFront.
- ✓Origem privada e protegida contra acesso público direto.
- ✓Comunicação HTTPS em residencia.fsocloudconsulting.com com TLS 1.2 ou superior.
- ✓Rotas da SPA funcionando mesmo em acessos diretos e atualizações de página.
- ✓Arquitetura sem servidores, com menor esforço operacional para hospedar o frontend.
Case técnico