CloudFront: cómo empezar a configurar el CDN de AWS

Me ha escrito una persona al blog preguntando sobre CloudFront 👍 así que aquí estoy de nuevo compartiendo mi granito de arena en todo esto de la informática. Expongo aquí algunos problemas, y soluciones, que he tenido al trabajar con CloudFront tiempo atrás. Es decir, esto es un howto para montar el CDN de AWS, llamado CloudFront.

CloudFront no es una simple red de distribución de contenidos, sino que hace muchas más cosas aparte de cachear y distribuir contenidos. Pero vayamos al grano..

* Si estás aquí deduzco que estás optimizando, te puede interesar también este post relacionado con las optimizaciones de aplicaciones web 😉

Ideas generales, primeros pasos

Lo principal es que ponemos entre Internet, y los sistemas informáticos, a CloudFront:

Internet <=> CloudFront <=> Servidor, balanceador o contenidos en almacén estático.

Eso se consigue siguiendo estos pasos:

  1. Alta de una distribución de CloudFront.
  2. Configurar el registro DNS de tipo CNAME, donde quieres poner delante el CDN, para que apunte a la distribución de CloudFront nueva.
  3. En dicha distribución apuntamos, al origen de datos, al destino, en el caso del post lo apunto a jnjsite.com.
  4. En dicha distribución configuramos que va a recibir el registro prueba.jnjsite.com, con su certificado SSL.
  5. En el servidor origen de los datos, sólo hay que tener dado de alta el host prueba.jnjsite.com.

Alta de la distribución de CloudFront

Para esto simplemente vamos a AWS a la sección de CloudFront y damos de alta una distribución con todos los valores por defecto. Lo único a tener en cuenta es que sea Web y para HTTP/HTTPS. Nos tiene que quedar algo parecido a lo de la imagen siguiente:

CloudFront initial configs
CloudFront, alta de una distribución de pruebas..
CloudFront initial configs 2
CloudFront, alta de una distribución de pruebas, detalles de la distribución..
CloudFront initial configs 3
CloudFront, alta de una distribución de pruebas, sólo un comportamiento..

En esta sección de comportamientos, es donde luego podremos definir los comportamientos que definen los cacheados o distribución entre nuestros sistemas informáticos.

Una cosa clave para el alta de la distribución es poner el Origin Domain Name. Aquí nos permitirá todas las opciones disponibles. Para evitar ciclos en las peticiones DNS, conviene no usar los mismos nombres de registro de DNS, luego me explico. La idea es evitar ciclos en las peticiones de DNS, no sea que tanto servidor DNS como servidor web, estén en el mismo servidor, entonces corremos el peligro de que las peticiones no localicen el camino correcto.

Para este primer caso es más sencillo, como origen de datos he puesto:

jnjsite.com

Y como CNAME alternativo de la distribución:

prueba.jnjsite.com

Al crear la distribución le damos siguiente, siguiente, todo por defecto.. Y si todo ha ido bien, podremos entrar luego en sus configuraciones para modificar todo lo que queramos. Por ejemplo, en el behaviour (comportamiento) por defecto he dejado que pase todo, sólo 3 cabeceras, cacheo recogiendo las respuestas del servidor:

CloudFront, comportamiento por defecto modificado.
CloudFront, comportamiento por defecto modificado.

Es importante tener en cuenta que para cada modificación pueden pasar hasta 15 minutos en aplicarse los cambios en toda la red. Así que no conviene tocar sin parar las configuraciones. Ahora mismo nada pasa por el CDN, así que vamos a seguir..

Apuntar el registro de DNS elegido para el CDN, a la distribución de CloudFront

Tendremos dado de alta un dominio de CloudFront de la forma:

xxxxxxxxxxxxxx.cloudfront.net

Es lo que pondremos como valor CNAME en el registro..

Podríamos pasar el 100% del tráfico a través de un CDN, pero para este post, sólo configuramos el subdominio prueba.jnjsite.com. Serviría lo mismo si quisiéramos poner un dominio principal o de primer orden. Hay servidores de DNS, o proveedores de alojamientos más bien, que no te permiten poner un dominio principal como registro CNAME. Lo que sí es seguro que se puede hacer son registros CNAME del tipo de subdominio como www.tudominio.com, prueba.otrodominio.com, cdn1.dominiodedicadoacedeenes.com, etc..

Así que tenemos que hacer, según nuestro caso, algo como lo siguiente donde configuramos el servidor de DNS:

CNAME apuntando a CloudFront en un panel de control Cpanel, Plesk, Virtualmin..

Otra configuración en otro gestor de DNS, en este caso en AWS Route 53, podría ser:

CNAME apuntando a CloudFront en Route 53..

Si todo ha ido bien, tendremos que esperar a que se propaguen los cambios, y todas las peticiones apuntarán a CloudFront. Podemos hacer una sencilla prueba para ver si tenemos la parte frontal configurada así:

DNS CNAME config for CloudFront..

¡¡IMPORTANTE!! en el mismo host donde apuntemos el CNAME y donde tengamos finalmente el host, no conviene tener tanto servidor DNS como servidor Web. Porque el sistema se puede volver loco buscando donde está el alojamiento.

Es decir, la estructura es la siguiente:

Internet con el servicio de DNS que apunte con CNAME <=> CloudFront <=> Servidor o origen de datos, el servidor web

En la distribución de CloudFront, apuntamos al origen de datos

Si no lo hemos hecho antes, al dar de alta el origen de datos, no pasa nada, lo podemos hacer ahora. Esto se configura en la pestaña de la distribución donde pone Origins and Origin Groups, que a fecha de hoy pinta así:

CloudFront origins and origin groups..

¡Detalle importante! Me repito pero es importante, me ha dado muchos problemas comprender este funcionamiento.

Mira la configuración del origen para evitar ciclos en el DNS, hemos puesto que prueba.jnjsite.com apunta a xxxxxxx.cloudfront.net y luego el origen de datos apunta a jnjsite.com. No podemos poner como origen de datos el mismo dominio de antes prueba.jnjsite.com..

En la distribución de CloudFront configuramos que va a recibir el registro prueba.jnjsite.com, con su certificado SSL

Esto lo podremos hacer también después de dar de alta la nueva distribución. Aquí podemos también hacer uso de AWS Certificate Manager para dar de alta un certificado de seguridad SSL, gratis y engancharlo a CloudFront, siguiendo las instrucciones. Si lo hacemos, tendremos que esperar a que se valide el certificado SSL, y se pueda elegir entonces en la configuración de la distribución de Cloudfront. En la siguiente pestaña se puede entrar a estas configuraciones:

CloudFront configuraciones principales..

Si le damos a Editar vermos un formulario que empieza como el siguiente:

CloudFront editando principales configuraciones, añadiendo un certificado de seguridad SSL..

Mira que nos dejamos por configurar el AWS WAF Web ACL, otro juguete de AWS muy recomendable 🤪👍

En el servidor origen de los datos, sólo hay que tener dado de alta el host

Ya sólo nos queda el último paso. En el servidor origen de datos, simplemente será necesario el dar de alta el alojamiento, configurando en el servidor web que reciba las peticiones al host. En este caso a prueba.jnjsite.com.

Podemos probar un fichero como el siguiente, poniendo en el host un index.php para ver qué tal se cachean las peticiones:

<?php
echo "Current time: ".(new \DateTime())->format('Y-m-d H:i:s').PHP_EOL;

Ya sólo queda comprobar el funcionamiento accediendo al dominio nuevo, a https://prueba.jnjsite.com en este caso, y ver en el navegador si todo ha ido bien. Para esto tenemos que ver algo parecido a lo siguiente al acceder:

Mira que la petición devuelva la cabecera con Hit from CloudFront o si no con Miss from CloudFront. Luego también tendremos una cabecera Age, en caso de ser una respuesta que está cacheada en el CDN. Como en el caso de la prueba, al hacer esta última captura de pantalla, llevaba 74809 segundos cacheada la petición, con lo que la hora actual no corresponde por esto, ni el día, es decir, está cacheando correctamente.

Terminando, más información

Para terminar sólo me queda remitirte a la documentación oficial que está muy bien:
https://docs.aws.amazon.com/es_es/AmazonCloudFront/latest/DeveloperGuide/Introduction.html

Y de nuevo me remito a este post relacionado con las optimizaciones de aplicaciones web 😉

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *