En este tutorial se creará un CDN utilizando AWS CloudFront.
Para ello se utilizarán las siguientes tecnologías:
AWS CloudFront: Servicio CDN con el que serviremos nuestro contenido, es decir, nuestra página no será servida directamente de S3.
AWS S3: Almacenamiento en la nube en el que alojaremos nuestros recursos.
Lo primero es buscar el servicio S3 en la consola de AWS, una vez en la consola de S3, procedemos a crear un nuevo bucket, haciendo click en la opción Create Bucket.
En el asistente de creación del bucket:
Name and Region: Indicamos el nombre del bucket, en mi caso es 20190416-sydney-cloudfront-origin, este nombre debe ser único en todo el universo de buckets de AWS, puede que el nombre del bucket ya exista, si es ese el caso recibiremos un mensaje de error y tendremos que modificar el nombre del bucket, dejamos los valores por defecto para el resto de opciones. Además escogemos una región que geográficamente esté muy lejos de nosotros, en mi caso la región más alejada es la de Asia Pacific (Sydney).
Configure options: Dejamos los valores por defecto para estas opciones.
Set permissions: Nos aseguramos que las restricciones para asignar permisos publicos no estén chequeadas, estas opciones aparecen en la siguiente imagen encerradas en dos recuadros amarillos, podemos dejar las opciones de configuración por defecto.
Review: Validamos que toda la configuración realizada corresponda con lo que necesitamos y creamos el bucket.
Posteriormente procedemos a cargar una imagen en alta definición, haciendo click en el boton Upload, en mi caso cargué una fotografía de 4.3 MB.
Dentro del asistente nos aseguramos de hacer público el archivo cargado.
Continuamos con las siguientes fases del asistente dejando el resto de las configuraciones con sus valores por defecto.
Hacemos click en el nombre de la imagen recién cargada y en el Overview del objeto veremos la URL con la que podemos acceder a él.
Copiamos la URL y la pegamos en el navegador, veremos cómo la imagen carga lentamente, esto debido a que físicamente la región de Sydney está muy lejos de mí.
Procedemos a crear nuestro CDN, para ello buscamos el servicio CloudFront en la consola de AWS, una vez en la consola de CloudFront, hacemos click en el boton Create Distribution.
En la sección Web, hacemos click en el botón Get Started.
Configuramos como Origen el bucket que recientemente creamos en la región de Sydney.
Luego de seleccionar nuestro bucket para la opción Origin Domain Name, se asigna automáticamente un Origin ID, este es un nombre que nos permitirá identificar el origen dentro de la distribución.
Seleccionamos la opción Restrict Bucket Access: Yes, esto hará que nuestro bucket que inicialmente era público deje de serlo para que podamos acceder a los archivos del bucket solamente a través de nuestro CDN, de nuestra distribución de CloudFront.
Seleccionamos Origin Access Identity: Create a New Identity, esto creará un identificador que se usará para crear una política en S3 que permita a nuestro CDN acceder a los recursos de S3, que ya no serán públicos debido a la configuración anterior.
Seleccionamos Grant Read Permissions on Bucket: Yes, Update Bucket Policy, esta opción actualizará la política de nuestro bucket y la cambiará para que deje de ser público y comience a ser solamente accesible para nuestro CDN.
En la configuración Viewer Protocol Policy, seleccionamos la opción Redirect HTTP to HTTPS, pues este el principal objetivo en este tutorial, servir la página con a través de HTTPS.
El resto de configuraciones las dejamos con sus valores por defecto y procedemos a hacer click en Create Distribution.
Al finalizar la creación, el status será Deployed y el state será Enabled.
Vamos a S3 y en las propiedades de la imagen cargada, en la sección Permissions, validamos que la imagen sea pública.
Vamos a CloudFront y hacemos click en el identificador de nuestro recién creado CDN, con esto accederemos a sus propiedades, una vez dentro copiamos el dominio del CDN.
Vamos un navegador e ingresamos el nombre dominio de la distribución recién creada, seguida de slash y el nombre de nuestra imagen. Veremos que nuestra imagen cargará lentamente la primera vez, pero si hacemos muchas veces Ctrl+F5. Veremos que solo la primera vez fue lenta, todas las demás cargo más rápido, esto porque la primera vez que se carga, la imagen queda guardada en la cache de nuestra distribución, en un Edge Location que físicamente está cerca de nosotros, mucho más cerca que la región de nuestro bucket (Sydney). Esta es una de las utilidades más importantes de CloudFront.
Por otro lado si cargamos nuestra imagen consultando directamente el bucket de S3, veremos que nuestra imagen cargará lentamente la primera vez, pero si hacemos muchas veces Ctrl+F5. Veremos que todas las veces la imagen carga lentamente, esto porque con cada solicitud, vamos a traer la imagen hasta la región de Sydney, que físicamente está lejos de nosotros.
Con esto llegamos al fin de nuestro tutorial, en el que claramente pudimos apreciar como el uso de una distribución o CDN tiene un impacto positivo en el performance cuando nuestra página o recursos web son consumidos desde muchos lugares diferentes a lo largo y ancho del mundo.
