0Pricing
React Academy · Aula

Hospedando uma SPA React no AWS S3 e CloudFront

Compile um aplicativo React, carregue-o no S3 e configure a distribuição do CloudFront e a invalidação do cache.

Hospedando uma SPA React no AWS S3 e CloudFront é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Visão geral da hospedagem estática no S3

O AWS S3 pode disponibilizar arquivos estáticos (HTML, JS, CSS e imagens) como um site. Combinado com o CloudFront (CDN), ele oferece distribuição global, HTTPS e baixa latência para SPAs React.

Compilando a SPA

Compile seu aplicativo React em um diretório de saída estático.

# Vite:
npm run build  # outputs to dist/

# Create React App:
npm run build  # outputs to build/

# Next.js static export:
next build && next export  # outputs to out/

Criando e configurando o bucket do S3

Crie um bucket do S3, habilite a hospedagem de site estático e defina os documentos de índice e de erro.

# Create bucket (replace with your domain name):
aws s3 mb s3://my-react-app.com

# Enable static hosting:
aws s3 website s3://my-react-app.com --index-document index.html --error-document index.html
# Error doc = index.html handles client-side routing (React Router)

Enviando os arquivos da compilação

Sincronize a saída da compilação com o S3. Defina cabeçalhos de cache agressivos para recursos com hash e sem cache para index.html.

# Upload hashed assets with long cache:
aws s3 sync dist/ s3://my-react-app.com/ \
  --exclude index.html \
  --cache-control "max-age=31536000,immutable"

# Upload index.html with no cache (always fresh):
aws s3 cp dist/index.html s3://my-react-app.com/index.html \
  --cache-control "no-cache,no-store"

Criando uma distribuição do CloudFront

Crie uma distribuição do CloudFront apontando para o bucket do S3. Use o endpoint de site do S3 (não o endpoint REST) para oferecer suporte ao roteamento de SPA.

# In AWS console or CDK:
# Origin: my-react-app.com.s3-website-us-east-1.amazonaws.com
# Default root object: index.html
# Viewer protocol: Redirect HTTP to HTTPS
# Error pages: 403 → /index.html (200) for SPA routing

Correção do roteamento de SPA

O CloudFront retorna 403 para caminhos desconhecidos (o S3 não conhece as rotas do React). Configure uma resposta de erro personalizada: 403 → /index.html com status 200.

Domínio personalizado e SSL

Solicite um certificado ACM para seu domínio em us-east-1 (obrigatório para o CloudFront). Associe-o à distribuição e adicione um registro DNS CNAME apontando para o domínio do CloudFront.

Invalidando o cache durante a implantação

Depois de implantar novos arquivos, invalide o cache do CloudFront para index.html (embora ele esteja configurado sem cache no S3, pode estar armazenado no cache do CloudFront).

aws cloudfront create-invalidation \
  --distribution-id EXXXXXXXXXXXXX \
  --paths "/*"

Implantação com GitHub Actions

Automatize o fluxo de implantação na integração contínua: compilação → sincronização com o S3 → invalidação do CloudFront.

- name: Deploy to S3
  run: aws s3 sync dist/ s3://my-react-app.com/ --delete
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET }}

- name: Invalidate CloudFront
  run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"

Política do bucket do S3

Bloqueie o acesso público ao bucket e use uma política de Origin Access Control (OAC) para que somente o CloudFront possa ler o bucket — isso é mais seguro do que hospedar em um bucket público.

Estimativa de custos

A hospedagem estática no S3 é muito barata: ~ $0.023/GB de armazenamento, ~ $0.0004/1000 solicitações. Os custos do CloudFront variam conforme a região e a transferência de dados, mas o primeiro 1TB/mês é gratuito na camada gratuita.

Verificação rápida

Por que você deve definir o documento de erro do S3 como index.html ao hospedar uma SPA React?

Recapitulação

Compile a SPA, sincronize-a com o S3 usando políticas de cache diferentes (cache longo para recursos com hash e sem cache para index.html) e disponibilize-a pelo CloudFront. Corrija o roteamento da SPA mapeando erros 403 para /index.html. Automatize a implantação com o GitHub Actions e invalide o CloudFront a cada implantação.

Perguntas Frequentes

A aula “Hospedando uma SPA React no AWS S3 e CloudFront” é grátis?

Sim — o texto completo de “Hospedando uma SPA React no AWS S3 e CloudFront” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Hospedando uma SPA React no AWS S3 e CloudFront”?

Compile um aplicativo React, carregue-o no S3 e configure a distribuição do CloudFront e a invalidação do cache. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Hospedando uma SPA React no AWS S3 e CloudFront”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Implantando na Vercel: configuração zero e URLs de pré-visualização
  2. Hospedando uma SPA React no AWS S3 e CloudFront
  3. Colocando um aplicativo React/Next.js em contêineres
  4. CI/CD do GitHub Actions para React
← Voltar para React Academy