Frontend en AWS: CloudFront + S3
Cómo servir un SPA con latencia mínima usando CloudFront como CDN global, S3 para el almacenamiento y WAF para protección.
Arquitectura de despliegue de frontend estático en AWS. Los archivos viven en S3, CloudFront los distribuye desde 400+ edge locations en todo el mundo y WAF protege el distribution de ataques comunes.
Componentes
Navegador
Navegador web que solicita la SPA
Route53
DNS de AWS que resuelve el dominio al distribution de CloudFront
ACM / TLS
AWS Certificate Manager gestiona el certificado TLS del dominio
AWS WAF
Web Application Firewall que protege el distribution de CloudFront
CloudFront
CDN global con 400+ edge locations. Sirve archivos desde el cache más cercano al usuario.
S3 Bucket
Bucket privado con archivos estáticos del SPA. Solo accesible desde CloudFront via OAC.
Escenarios
Haz click en un nodo para explorarlo — los nodos con → tienen arquitectura interna
Frontend en AWS: CloudFront + S3
Arquitectura de despliegue de frontend estático en AWS. Los archivos viven en S3, CloudFront los distribuye desde 400+ edge locations en todo el mundo y WAF protege el distribution de ataques comunes.
Componentes
- — Navegador
- — Route53
- — ACM / TLS
- — AWS WAF
- — CloudFront
- — S3 Bucket
Haz click en cualquier componente del diagrama para ver su rol, riesgos y alternativas.
Selecciona un escenario en la barra lateral para iniciar la simulación.
Conceptos relacionados
Recursos
Componentes de Frontend en AWS: CloudFront + S3
- Navegador: Navegador web (Chrome, Firefox, Safari) o cliente HTTP del usuario final. — Iniciar el request HTTPS a la URL de la aplicación y renderizar los archivos descargados.
- Route53: Amazon Route53 es el servicio de DNS de AWS. Resuelve el nombre de dominio de la aplicación al CNAME del distribution de CloudFront. — Enrutar el tráfico DNS al distribution de CloudFront correcto, con health checks opcionales.
- ACM / TLS: AWS Certificate Manager (ACM) provee y renueva automáticamente certificados TLS/SSL para el dominio de la aplicación. — Garantizar que la comunicación entre el navegador y CloudFront sea cifrada con TLS 1.2 o superior.
- AWS WAF: AWS WAF (Web Application Firewall) es un firewall de capa 7 que filtra requests maliciosos antes de que lleguen a CloudFront o al origen. — Proteger el frontend y el backend de ataques comunes como SQL injection, XSS, bots y DDoS de capa 7.
- CloudFront: Amazon CloudFront es la CDN global de AWS con más de 400 puntos de presencia en todo el mundo. — Servir los archivos estáticos del SPA desde el edge location más cercano al usuario para minimizar latencia.
- S3 Bucket: Amazon S3 bucket privado que almacena los archivos compilados del SPA (index.html, bundle.js, styles.css, imágenes). — Ser el origen de CloudFront. Solo entrega archivos cuando CloudFront tiene un cache MISS.
Escenarios
- Cache HIT — CloudFront sirve desde el edge: El archivo está cacheado en el edge location. CloudFront responde en <10ms sin tocar S3.
- Cache MISS — CloudFront va a S3: El archivo no está en el edge. CloudFront hace un origin fetch a S3, lo cachea y lo sirve al usuario.
- Deploy con invalidación de caché: Se despliega una nueva versión del frontend. Los archivos con hash en el nombre no necesitan invalidación, solo index.html.