Tutorial de integración de AWS CloudFront para distribuir contenido estático

1. Introducción a AWS CloudFront

Amazon CloudFront es una red de distribución de contenido (CDN) global que acelera la entrega de archivos estáticos y dinámicos, como HTML, CSS, JavaScript, imágenes y vídeos. Al colocar servidores perimetrales (edge locations) en todo el mundo, CloudFront reduce la latencia y mejora la experiencia de usuario.

2. ¿Por qué usar CloudFront

• Rendimiento mejorado: reduce el tiempo de carga al acercar el contenido al usuario.
• Alta disponibilidad: utiliza múltiples ubicaciones perimetrales con redundancia automática.
• Seguridad robusta: integra AWS Shield y AWS WAF para protección DDoS y filtrado de solicitudes.
• Escalabilidad: adapta el tráfico automáticamente sin necesidad de aprovisionamiento manual.
• Optimización de costos: pago por uso, sin cargos iniciales.

3. Requisitos previos

1. Cuenta de AWS activa.
2. Bucket de Amazon S3 con contenido estático (imágenes, CSS, JS, HTML).
3. Permisos adecuados (IAM) para CloudFront, S3 y Route 53/ACM si se configuran dominios y certificados.
4. Dominio registrado si se desea usar dominio personalizado.

4. Paso a paso de la configuración

4.1. Creación y configuración del bucket S3

• Ingresar a la consola de Amazon S3.
• Crear nuevo bucket asignar un nombre DNS válido (my-static-content-bucket).
• Habilitar Block Public Access desactivando la restricción para permitir archivos públicos.
• Subir el contenido estático (index.html, estilos, imágenes).
• Configurar políticas de bucket para permitir acceso GetObject a Principal=:

{
  Version:2012-10-17,
  Statement:[{
    Sid:PublicReadGetObject,
    Effect:Allow,
    Principal:,
    Action:s3:GetObject,
    Resource:arn:aws:s3:::my-static-content-bucket/
  }]
}
  

4.2. Creación de distribución CloudFront

En la consola de Amazon CloudFront:

1. Seleccionar Create Distribution gt Web.
2. En Origin Settings:
   • Origin Domain Name: my-static-content-bucket.s3.amazonaws.com.
   • Origin Protocol Policy: HTTPS Only.
   • Restrict Bucket Access: Yes para generar OAI (Origin Access Identity).
3. En Default Cache Behavior Settings:
   • Viewer Protocol Policy: Redirect HTTP to HTTPS.
   • Allowed HTTP Methods: GET, HEAD (suficiente para contenido estático).
   • Cache Based on Selected Request Headers: None (Improves Caching).
4. En Distribution Settings:
   • Alternate Domain Names (CNAMEs): cdn.ejemplo.com (opcional).
   • SSL Certificate: seleccionar Custom SSL Certificate (ACM) o Default CloudFront Certificate.
   • Default Root Object: index.html.
5. Hacer clic en Create Distribution. La distribución tardará unos minutos en desplegarse.

4.3. Configuración de DNS y certificado SSL

• Solicitar certificado en AWS Certificate Manager para cdn.ejemplo.com.
• Validar dominio (DNS o email).
• En Route 53 (o proveedor DNS), crear un CNAME:
  • Nombre: cdn.ejemplo.com
  • Tipo: CNAME
  • Valor: d1234abcdef8.cloudfront.net (nombre de tu distribución).

5. Políticas de caché y encabezados

Para optimizar la caché, es esencial configurar correctamente los encabezados HTTP y las políticas de TTL.

Encabezado	Propósito	Recomendación
Cache-Control	Control del tiempo de vida de los objetos.	max-age=86400 (1 día) o más para activos inmutables.
Expires	Fecha de expiración.	Fecha futura acorde al max-age.
Vary	Especifica las cabeceras que alteran el caché.	Vary: Accept-Encoding

6. Invalidaciones y control de versiones

Cuando se actualiza contenido crítico, podemos invalidar objetos obsoletos:

aws cloudfront create-invalidation 
  --distribution-id E123456ABCDEF 
  --paths /css/ /js/app.js
  

Alternativa: implementar versionado de archivos (hash en nombre) para evitar invalidaciones frecuentes.

7. Seguridad adicional

• Habilitar AWS WAF para filtrar IPs maliciosas.
• Configurar Geo Restriction para limitar acceso por ubicación.
• Usar Signed URLs o Signed Cookies si el contenido debe ser restringido.
• Monitorizar con AWS CloudWatch: métricas de errores, latencia y tráfico.

8. Monitorización y métricas

CloudFront envía datos a CloudWatch, donde puede:

• Configurar Alarmas para errores 4xx/5xx.
• Revisar Latency para optimizar ubicación de orígenes.
• Analizar Requests tomando decisiones de escalado.

9. Optimización avanzada

• Habilitar Lambda@Edge para manipular solicitudes y respuestas en el edge.
• Usar Origin Shield para reducir el número de solicitudes al origen.
• Implementar HTTP/2 o HTTP/3 para mejorar el rendimiento en navegadores compatibles.