Desplegando Nuestro Blog Sin Usar Servidores

Introducción

En esta serie te muestro como desarrollé este blog desde 0, y en el artículo anterior te explico que es un SSG y porque seleccioné Hugo como herramienta principal para este blog. Ahora que ya sabemos como vamos a generar nuestro sitio web, tenemos que ver como lo desplegamos, y de eso se trata este artículo

Distintas formas de desplegar nuestro sitio web

Existen diversas formas de desplegar un sitio web estático (HTML, CSS y Javascript), desde las más tradicionales como usar NginX, hasta desplegarlo sin usar servidores, que desde ya te adelanto que es mi favorita. Si, soy fan de todo lo que se puede hacer sin servidores, o sea, de las aplicaciones serverless como tal, y uno de mis objetivos con este blog es que aprendas al respecto. Pero vamos al grano, en este artículo te enseñaré como puedes desplegar tus sitios web estáticos usando Buckets S3 y Distribuciones Cloudfront.

Buckets S3

Imagina que tienes un montón de videos, imágenes, documentos, copias de seguridad y muchos otros tipos de ficheros. Un Bucket S3 es como una carpeta gigante en la que puedes almacenar todo esto y quien lo provee es AWS. S3 significa Servicio de Almacenamiento Simple (por sus siglas en inglés), y usándolo, tienes una carpeta en la nube en la que puedes guardar y obtener ficheros (siempre y cuando tengas permisos) de una manera segura.
Uno de los usos más comunes de los buckets S3 es el siguiente, si en tu aplicación web tienes una entidad producto, la cual tiene asignada una imagen, lo primero es que esta imagen no se debe guardar en la base de datos que estés usando debido a que si lo haces esto enlentecería mucho las consultas. Entonces como alternativa se guarda la imagen en un bucket S3 y en la base de datos en vez de tener un campo image tendrías un campo image_url, con la URL que apunta a la dirección donde se guardó la imagen.
Perfecto, pero, ¿qué tiene que ver todo esto con nuestro sitio web? El punto es que en nuestro bucket S3 es donde guardaremos todos los ficheros estáticos que generará nuestro SSG una vez hagamos el build de nuestro sitio web. O sea, nuestros ficheros HTML, CSS y Javascript los almacenaremos en nuestro bucket S3.

Distribuciones Cloudfront

Ahora que ya tenemos almacenados los ficheros de nuestro sitio web, necesitamos distribuirlos, y para esto lo mejor es usar una CDN (red de distribución de contenido, por sus siglas en inglés). La responsabilidad de la CDN es distribuir nuestro contenido de una manera efectiva independientemente del lugar desde el cual se acceda a nuestro sitio web, o sea, desde América Latina o Medio Oriente. Las distribuciones Cloudfront son las CDN que tenemos a disposición a través de AWS. En otro artículo estaré dejando una explicación detallada de Cloudfront, pero por ahora es suficiente con lo que sabemos.

¿Porque usar ambos servicios?

En la imagen anterior, vemos cual sería la configuración de nuestra infraestructura en caso que no usemos una distribución de Cloudfront. Como podemos ver, en este ejemplo asumimos que nuestro Bucket S3 se encuentra en Estados Unidos y el cliente que desea acceder a nuestro sitio web se encuentra en Emiratos Árabes Unidos y esto trae como consecuencia que solo la transferencia de datos entre el cliente y nuestro Bucket sea de más de un segundo. Lo más importante de esto que te muestro es que tengas en cuenta que con esta configuración, la transferencia de datos entre el cliente y nuestro Bucket puede tardar bastante.

Los Bucket S3 en AWS son globales, o sea, no se despliegan en una región específica desde la consola AWS, pero esto no significa que no tengan una localización específica

En la imagen anterior podemos ver las ventajas de usar una CDN para distribuir nuestro sitio web. Veámoslo de la siguiente forma, la distribución de Cloudfront actúa como una caché, o sea, la primera vez que un cliente pide los ficheros del sitio web, la distribución de Cloudfront los trae de nuestro Bucket S3, y esta transferencia demora lo mismo que en la configuración anterior, pero a partir de este momento, todas las peticiones que hagan los otros clientes demorarán considerablemente menos debido a que los ficheros estáticos se encuentran disponibles y no hay que buscarlos en el bucket S3.

Cloudfront hace uso de los llamados edge locations de AWS. Básicamente son puntos como el del diagrama distribuidos alrededor del mundo, de esta manera si usas una distribución Cloudfront, tus clientes se conectarán al edge location más cercano. En el caso de nuestro diagrama, sería el edge location ubicado en Dubai. En este enlace puedes acceder a los mapas con los edge locations de AWS

Hasta la próxima

Esto es todo por el momento. En el próximo artículo te mostraré como automaticé el despliegue de este blog y te comentaré sobre un problema que tuve relacionado a la navegación y como lo resolví. Recuerda que lo que más me ayuda para seguir compartiendo mis experiencias contigo es que comentes y compartas este artículo.