Mejora la experiencia de usuario, rendimiento y el posicionamiento orgánico de tu sitio desplegando una CDN con Amazon CloudFront

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:

  1. 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
  2. En la sección Bucket Configuration, asegúrate de seleccionar la opción ACLs disabled (recommended)
  3. Luego en Block Public Access settings for this bucket selecciona la opción Block all public access
  4. Mantén el resto de opciones por defecto y haz clic en crear bucket, (las últimas opciones deben verse así)

xLa5tch hqHt bpPrsEaj9ziqD4ORcmFfU41Lv VFu64mZ 8lYjnAjzm62kFhqG0g1gH91OU5iJrb5AY3Rl2xC7tkVzpGwIK1e 8v GjEAIgXdXwiIzDeZf89RCXjcBOqkvCjHjiSJYCmztVRkFYLcTWCZnsutE1lPO nTzSVVfZA1CXCdmhuVZitsZaGI2hn Q9zhC Q

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

C9pvzZiGBFpGkF9Jf5GOKOqbZRGeHQqCxCNHroWpfdGKRzeCxt3SOT0GrpxW3az yPMh UYRym uWQ4vvp82iznG 4k3eE0e SUn5ySCeh LIFtHIsCvjqkECbbu2qbx8rP UZ1SpUOj99miosB5Ezkj XzeB0EUfgqEKCYujEC8s tIiNB2wlpf6PY45g ITvG9AFdQMQ

CloudFront subdomain

  1. Escribe el nombre del subdominio que utilizarás como CDN (cdn.example.com en este ejemplo)
  2. En Validation method selecciona la opción DNS
  3. y como algoritmo selecciona RSA 2048

6pqsci8U hgvPLATNgmUe5xUp2JLpWUMkafrFFjYpBUGYdeLvwfHcll4cRln9PT51ABoSDJpVizf0ZN7Jdnv8AjbeAnhJ3Y8IcNNohl 80VErGCqSXz3siNGtCNqEDbqgD43VwoIXlcMZ8yH59RRg9dA79cVM2hI9e

CloudFront certificate

  1. Haz clic en request y busca el nuevo certificado en el listado que te aparece (si no te aparece solo actualiza la página)
  2. Selecciona el certificado y te verás a los detalles
  3. 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

TYPENAMEVALUE
CNAMEcdn.example.comvalor 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

Comparte este post

Posts Relacionados

Optimizar CSS WordPress

La optimización de CSS en WordPress puede ayudar a mejorar la velocidad de carga y el rendimiento de su sitio web. Aquí hay algunos consejos

Read More »