0Pricing
React Academy · Lección

Alojar una SPA de React en AWS S3 y CloudFront

Compile una aplicación React, súbala a S3 y configure la distribución de CloudFront y la invalidación de caché.

Alojar una SPA de React en AWS S3 y CloudFront es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Descripción general del hosting estático con S3

AWS S3 puede servir archivos estáticos (HTML, JS, CSS e imágenes) como un sitio web. Combinado con CloudFront (CDN), proporciona distribución global, HTTPS y baja latencia para SPAs de React.

Compilación de la SPA

Compile su aplicación de React en un directorio de salida 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/

Creación y configuración del bucket de S3

Cree un bucket de S3, habilite el hosting de sitios web estáticos y establezca los documentos de índice y de error.

# 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)

Carga de los archivos compilados

Sincronice la salida de la compilación con S3. Establezca encabezados de caché agresivos para los recursos con hash y no-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"

Creación de una distribución de CloudFront

Cree una distribución de CloudFront que apunte al bucket de S3. Use el endpoint de sitio web de S3 (no el endpoint REST) para admitir el enrutamiento de la 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

Corrección del enrutamiento de la SPA

CloudFront devuelve 403 para las rutas desconocidas (S3 no conoce las rutas de React). Configure una respuesta de error personalizada: 403 → /index.html con estado 200.

Dominio personalizado y SSL

Solicite un certificado de ACM para su dominio en us-east-1 (es obligatorio para CloudFront). Asígnelo a la distribución y añada un registro DNS CNAME que apunte al dominio de CloudFront.

Invalidación de la caché durante el despliegue

Después de desplegar archivos nuevos, invalide la caché de CloudFront para index.html (aunque no tenga caché en S3, CloudFront podría haberlo almacenado en caché).

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

Despliegue con GitHub Actions

Automatice el flujo de despliegue en CI: compilar → sincronizar con S3 → invalidar 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 del bucket de S3

Bloquee el acceso público al bucket y use una política de Origin Access Control (OAC) para que solo CloudFront pueda leer el bucket; es más seguro que alojarlo en un bucket público.

Estimación de costes

El hosting estático de S3 es muy económico: aproximadamente ~$0.023/GB de almacenamiento y ~$0.0004/1000 solicitudes. Los costes de CloudFront varían según la región y la transferencia de datos, pero el nivel gratuito ofrece 1 TB al mes sin coste.

Comprobación rápida

¿Por qué debe establecer index.html como documento de error de S3 al alojar una SPA de React?

Repaso

Compile la SPA, sincronícela con S3 usando una caché diferenciada (caché prolongada para los recursos con hash y sin caché para index.html) y sírvala mediante CloudFront. Corrija el enrutamiento de la SPA asignando los errores 403 a /index.html. Automatice el despliegue con GitHub Actions e invalide CloudFront en cada despliegue.

Preguntas frecuentes

¿La lección «Alojar una SPA de React en AWS S3 y CloudFront» es gratis?

Sí — el texto completo de «Alojar una SPA de React en AWS S3 y CloudFront» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Alojar una SPA de React en AWS S3 y CloudFront»?

Compile una aplicación React, súbala a S3 y configure la distribución de CloudFront y la invalidación de caché. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Alojar una SPA de React en AWS S3 y CloudFront»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Desplegar en Vercel: configuración cero y URL de preview
  2. Alojar una SPA de React en AWS S3 y CloudFront
  3. Contenerizar una aplicación React/Next.js
  4. CI/CD de GitHub Actions para React
← Volver a React Academy