Última actualización: 12 de septiembre

Cómo crear un CDN de imágenes con AWS S3 y CloudFront

Kevin van Zonneveld

Cofundador · Ámsterdam, Países Bajos ·

El rendimiento de la entrega de imágenes es crucial para las aplicaciones web modernas. Al crear tu propio CDN de imágenes con AWS S3 y CloudFront, puedes mejorar significativamente los tiempos de carga y enriquecer la experiencia de usuario. Esta guía te acompaña en la configuración de una infraestructura robusta de CDN de imágenes.

Por qué usar un CDN para imágenes

Las redes de entrega de contenido (CDN, por sus siglas en inglés) ofrecen varias ventajas para la entrega de imágenes:

Menor latencia gracias al almacenamiento en caché en ubicaciones de borde.
Menores costos de ancho de banda al descargar tráfico de tu servidor de origen.
Mejor rendimiento del sitio web con tiempos de carga de página más rápidos.
Experiencia de usuario mejorada en diversas regiones geográficas.
Mejor manejo de los picos de tráfico durante aumentos repentinos de la demanda.

Configurar un bucket de AWS S3

Crea un nuevo bucket de S3:
- Inicia sesión en la AWS Management Console.
- Ve a S3.
- Haz clic en Create bucket.
- Introduce un nombre de bucket único.
- Selecciona la región de AWS que prefieras.
- Mantén habilitada la opción Block all public access para proteger tu bucket.
- Haz clic en Create bucket.

Configura la política del bucket:

Actualiza la política de tu bucket para permitir que CloudFront acceda de forma segura a tu bucket de S3 mediante Origin Access Control (OAC). Aplica esta política después de crear la distribución en la siguiente sección, cuando su ID esté disponible:

{
  "Version": "2012-10-17",
  "Statement": {
    "Sid": "AllowCloudFrontServicePrincipal",
    "Effect": "Allow",
    "Principal": {
      "Service": "cloudfront.amazonaws.com"
    },
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::your-bucket-name/*",
    "Condition": {
      "StringEquals": {
        "AWS:SourceArn": "arn:aws:cloudfront::111122223333:distribution/<CloudFront distribution ID>"
      }
    }
  }
}

Reemplaza your-bucket-name, el ID de cuenta de ejemplo 111122223333 y <CloudFront distribution ID> por tus valores reales.

Habilita CORS (si es necesario):

Si tu aplicación requiere Cross-Origin Resource Sharing (CORS), configura la política de CORS de tu bucket de S3:

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["*"],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
  }
]

Configurar CloudFront

Crea una distribución de CloudFront:
- Ve a la consola de CloudFront.
- Haz clic en Create Distribution.
- En Origin Domain, selecciona el endpoint normal del bucket de S3, no un endpoint de sitio web de S3.
- En Origin Access, selecciona Origin Access Control (OAC).
- Haz clic en Create new OAC para permitir que CloudFront acceda de forma segura a tu bucket de S3.
- Mantén la configuración recomendada de Sign requests para que CloudFront se autentique ante S3 mediante HTTPS.
- Asegúrate de que la política de tu bucket esté actualizada para otorgar acceso al OAC.
Configura el comportamiento de caché predeterminado:
- Establece Viewer Protocol Policy en Redirect HTTP to HTTPS.
- Permite GET y HEAD; añade OPTIONS si tu aplicación realiza solicitudes preflight de CORS.
- Habilita Cached HTTP Methods para GET y HEAD.
- Personaliza la configuración de la clave de caché en Cache key and origin requests si es necesario.
Configura los ajustes de caché:
- Establece Default TTL en 86.400 segundos (1 día).
- Establece Maximum TTL en 31.536.000 segundos (1 año).
- Establece Minimum TTL en 0 segundos.

Configura las respuestas de error:

Crea primero en el bucket los objetos de error a los que se hace referencia. Si usas CloudFormation, el fragmento de distribución relevante es:

CustomErrorResponses:
  - ErrorCode: 404
    ResponseCode: 404
    ResponsePagePath: /404.html
    ErrorCachingMinTTL: 300
  - ErrorCode: 500
    ResponseCode: 500
    ResponsePagePath: /500.html
    ErrorCachingMinTTL: 10

Habilita los encabezados de seguridad:

Adjunta una política de encabezados de respuesta al comportamiento de caché. Configura X-Content-Type-Options: nosniff y una política de HSTS adecuada después de confirmar que HTTPS funciona. No habilites HSTS includeSubDomains ni preload salvo que todos los subdominios afectados admitan HTTPS. No hace falta una función Lambda@Edge solo para añadir encabezados.

Para el acceso desde el navegador con fetch() o canvas, usa una política de encabezados de respuesta de CORS que coincida con los orígenes de la aplicación. Si en su lugar reenvías las solicitudes de CORS a S3, reenvía Origin y los encabezados preflight requeridos, y tenlos en cuenta en la política de caché. CORS no es autenticación.

Optimizar la entrega de imágenes

Configura los encabezados Cache-Control:

Al subir imágenes versionadas a S3, establece encabezados Cache-Control adecuados. Por ejemplo, con boto3 instalado y las credenciales de AWS configuradas mediante su cadena de proveedores predeterminada:

import boto3

s3_client = boto3.client('s3')
with open('image.jpg', 'rb') as image_file:
    s3_client.put_object(
        Bucket='your-bucket-name',
        Key='images/image-v2.jpg',
        Body=image_file,
        ContentType='image/jpeg',
        CacheControl='public, max-age=31536000, immutable'
    )

Usa nombres de objeto versionados:

Cambia la clave del objeto al reemplazar una imagen almacenada en caché como inmutable:
```
https://d1234.cloudfront.net/images/image-v2.jpg
```
Implementa la optimización de imágenes:

S3 y CloudFront no redimensionan ni convierten imágenes por sí solos. Genera las variantes antes de subirlas o añade un servicio independiente de procesamiento de imágenes. Los parámetros de consulta no tienen ningún efecto de transformación a menos que ese servicio los implemente. Si usas cadenas de consulta para el versionado en lugar de nombres de objeto, incluye explícitamente el parámetro de versión en la clave de caché.

Monitoreo y optimización de costos

Configura el monitoreo con CloudWatch:

Crea paneles de CloudWatch para hacer seguimiento de las métricas clave:
- Tasas de aciertos de caché.
- Tasas de error.
- Latencia y uso de ancho de banda.
- Número de solicitudes.
Configura las alertas:

Configura alarmas de CloudWatch para:
- Tasas de error altas (superiores al 1 %).
- Tasas de aciertos de caché bajas (inferiores al 85 %).
- Patrones de tráfico inusuales.
- Picos de ancho de banda.
Optimiza los costos:
- Usa Price Class 100 para orientarte a Norteamérica y Europa.
- Habilita la compresión para reducir el consumo de ancho de banda.
- Establece valores de TTL adecuados para maximizar los aciertos de caché.
- Revisa periódicamente la capacidad reservada según los patrones de uso.

Solución de problemas comunes

Verifica que el estado de tu distribución de CloudFront sea «Deployed».
Revisa los registros de AWS CloudWatch para ver mensajes de error detallados.
Asegúrate de que la política de tu bucket de S3 y la configuración del OAC estén correctamente definidas.
Confirma que los encabezados Cache-Control se apliquen inspeccionando los encabezados de respuesta HTTP.
Ajusta la configuración de TTL si encuentras problemas de contenido obsoleto.

Probar tu CDN

Verifica el estado de la distribución:

Asegúrate de que el estado de tu distribución de CloudFront sea Deployed.

Prueba la carga de imágenes:

<img
  src="https://your-distribution-id.cloudfront.net/images/test.jpg"
  alt="Test Image"
  loading="lazy"
  width="800"
  height="600"
/>

Monitorea el rendimiento:
- Usa las métricas de AWS CloudWatch para hacer seguimiento del rendimiento.
- Monitorea las tasas de aciertos de caché y las tasas de error.
- Haz seguimiento de la latencia en distintas regiones.
- Analiza los patrones de uso de ancho de banda.

Mejores prácticas

Optimización de imágenes:
- Usa formatos adecuados: JPEG para fotografías, PNG para gráficos con transparencia.
- Implementa imágenes responsivas con los atributos srcset y sizes.
- Habilita la compresión Brotli o GZIP para los recursos basados en texto.
Seguridad:
- Sirve el contenido exclusivamente a través de HTTPS.
- Aplica políticas de CORS adecuadas.
- Usa Signed URLs o Signed Cookies para el contenido privado cuando sea necesario.
- Rota periódicamente las credenciales de seguridad.
- Asegúrate de que tu bucket de S3 sea accesible únicamente a través de CloudFront.
Rendimiento:
- Establece valores de TTL apropiados para equilibrar frescura y eficiencia.
- Usa nombres de objeto versionados para los recursos inmutables.
- Implementa páginas de error personalizadas.
- Monitorea y optimiza continuamente las tasas de aciertos de caché.

Conclusión

Crear un CDN de imágenes con AWS S3 y CloudFront ofrece una solución escalable y segura para entregar imágenes rápidamente en todo el mundo. Esta configuración ayuda a mejorar el rendimiento del sitio web y brinda técnicas avanzadas de optimización que garantizan una entrega de imágenes de alta calidad.

Si buscas un servicio gestionado que incluya tanto funcionalidad de CDN como procesamiento avanzado de imágenes, echa un vistazo a Transloadit, que ofrece capacidades integrales de optimización y entrega de imágenes.