Resumen: Presentamos la forma más segura de crear bucket de S3 con los permisos requeridos para funcionar como almacenamiento de contenido estático, como crear y configurar un certificado SSL para garantizar que la entrega de contenido se haga de forma segura y finalmente cómo configurar Amazon CloudFront para que funciones como CDN de tu sitio web y cargue el contenido desde el bucket de S3 creado en la primera parte.
Crear un bucket de S3 para el almacenamiento del contenido estático de un sitio web
Ingresa en la consola de AWS, selecciona el servicio S3 y selecciona la opción Crear nuevo bucket.
Dale un nombre al bucket (te recomiendo utilizar el mismo nombre que tendrá el subdominio de tu CDN para que te sea más fácil de identificar. Ej.: si el sitio es example.com y quieres nombrar a tu CDN cdn.example.com usa este mismo nombre para el bucket.
Configuración inicial del bucket:
- Selecciona la zona en la que estará alojado. Importante: si tu sitio está alojado en Amazon Lightsail el bucket y la instancia de lightsail deben estar en la misma zona
- En la sección Bucket Configuration, asegúrate de seleccionar la opción ACLs disabled (recommended)
- Luego en Block Public Access settings for this bucket selecciona la opción Block all public access
- Mantén el resto de opciones por defecto y haz clic en crear bucket, (las últimas opciones deben verse así)
Crear y configurar un certificado SSL para garantizar que la entrega de contenido se haga de manera segura a tus usuarios
Una vez en la consola de AWS busca el servicio Amazon Certificate Manager (ACM). Este servicio se utiliza para crear certificados SSL públicos y su configuración es extremadamente sencilla.
AWS Certificate Manager CloudFront
Una vez en ACM selecciona la opción “Request” selecciona la opción “Request a public certificate” y luego haz clic en Siguiente
CloudFront subdomain
- Escribe el nombre del subdominio que utilizarás como CDN (cdn.example.com en este ejemplo)
- En Validation method selecciona la opción DNS
- y como algoritmo selecciona RSA 2048
CloudFront certificate
- Haz clic en request y busca el nuevo certificado en el listado que te aparece (si no te aparece solo actualiza la página)
- Selecciona el certificado y te verás a los detalles
- Debes crear un nuevo registro CNAME en tu DNS. El nombre y el valor de este registro aparecen en la sección “Dominios”
Te aparecerá una marca en verde con el texto “verified” cuando el nuevo registro esté activo, esto puede tardar unos minutos. Si registraste tu dominio utilizando el servicio de Amazon Route 53 solo debes hacer clic en la opción “Create records in Route 53” y AWS se encargará de crear el registro.
Crear distribución de Amazon CloudFront para que entregue el contenido que se encuentra en S3
Primero, ir al servicio AWS CloudFront y seleccionar “Crear Nueva Distribución” en la pantalla siguiente se debe introducir la configuración siguiente:
AWS CloudFront control settings
En Origen > Origin domain solo debes seleccionar el bucket de S3 en el que vas a almacenar el contenido estático
En Origin > Origin access selecciona la opción “Origin access control settings” y “Create control settings”. Te aparecerá un aviso en el que te explican que debes actualizar los permisos del bucket, esto se hace al terminar de crear la distribución
AWS CloudFront cache policy
Luego en “Default cache behavior” asegúrate de marcar “redirect http to https” y Allowed HTTP methods GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE y seleccionar OPTIONS en la parte siguiente “Cache HTTP methods”
En el apartado “Cache key and origin requests” marcar la opción “Cache policy and origin request policy”, aquí mismo selecciona en “Cache Policy” la opción de CachingOptimized y en Origin request Policy “CORS-S3Origin”
Al final de esta misma sección, en “Response headers policy” selecciona CORS-and-SecurityHeadersPolicy
Luego en la sección setting selecciona entre las 3 opciones la que más se ajuste a tu público objetivo nosotros recomendamos “Use all edge locations” para garantizar el mejor rendimiento posible.
AWS CloudFront alternate domain name (CNAME)
En el apartado “Alternate domain name (CNAME)” selecciona Add item y escribe el nombre del subdominio que utilizarás para tu CDN. En este ejemplo sería “cdn.example.com”
Luego en el desplegable que aparece a continuación selecciona el certificado SSL que creaste utilizando ACM
Soporte para CloudFront http2 y http3
En “Supported HTTP versions” marca el soporte para http/2 y http/3
Haz clic en “Create distribution”
Ya casi… Solo queda actualizar tu DNS y la política del bucket de S3.
Actualizar el CloudFront DNS CNAME
En CloudFront selecciona la distribución que creaste y copia el valor que te aparece en “Distribution domain name”. Crea un nuevo registro CNAME en tu DNS con los siguientes valores
| TYPE | NAME | VALUE |
| CNAME | cdn.example.com | valor que copiaste de “Distribution domain name”*Debe tener la estructura: letrasynumeros.cloudfront.net* |
AWS CloudFront S3 bucket policy
or último con la distribución seleccionada ve a la pestaña “Origins” marca el origen que aparece y haz clic en el botón de Editar. Casi al principio, en la sección “Origin access” fíjate en el aviso que te aparece y haz clic en la opción de “Copy policy” para copiar al portapapeles la política que permite el acceso a esta distribución de Amazon CloudFront al bucket de S3 y luego haz clic en el enlace que aparece debajo con el texto “Go to S3 bucket permissions”.
Esto te llevará al bucket de S3 que has seleccionado como origen de tu distribución de Amazon CloudFront. Desplázate hacia abajo hasta encontrar la sección “Bucket policy” y haz clic en editar. Pega el contenido del portapapeles (Ctrl + V o Clic derecho > pegar), fíjate que la indentación sea correcta (suele ocurrir que no se copia bien y esto puede provocar que no puedas guardar los cambios). El primer caracter debe ser “{“ por lo que debes borrar cualquier espacio en blanco que aparezca antes de este símbolo.
Comprobando el funcionamiento del servicio AWS CloudFront
Esto es todo, ya está creada tu CDN con Amazon CloudFront. Para probar que toda la configuración está correcta en tu bucket de S3 selecciona la pestaña Objects, arrastra desde tu ordenador una imagen cualquiera hasta esa pestaña. Abre una nueva pestaña en tu navegador y escribe la URL de la imagen que subiste a tu CDN que tendría la ruta siguiente:
https://[subdominio]/[imagen_subida]Supongamos que la imagen se llama img-1.png entonces siguiendo el mismo ejemplo con el que venimos trabajando la ruta sería: https://cdn.example.com/img-1.png
