Aplicación Práctica De Las Funciones Cloudfront

Introducción

En esta serie te muestro como desarrollé este blog desde 0, y en el artículo anterior te explico como desplegar un sitio web estático usando Buckets S3 y Distribuciones Cloudfront. En este artículo te mostraré un problema que tuve usando esta combinación de servicios y como lo resolví.

Problema de navegación

Recordemos que hasta este punto tenemos todos los ficheros de nuestro sitio estático almacenados en nuestro Bucket S3 y quien sirve los ficheros hacia el navegador es Cloudfront. Ahora necesitamos entender algo sobre como funciona la combinación de estos dos servicios.

En la imagen anterior podemos ver el contenido de nuestro sitio estático. Tenemos que entender que nuestra distribución de Cloudfront responde a un dominio específico, en nuestro caso, el dominio es https://compacompila.com, que corresponde a la raíz de nuestro bucket S3. O sea, si queremos que Cloudfront sirva nuestro sitio web, deberíamos acceder a https://compacompila.com/index.html, esto teniendo en cuenta que que el index.html se encuentra en la raíz de nuestro bucket. Pero, si es así, ¿porque cuando accedemos al blog sin el index.html en la URL igualmente Cloudfront devuelve este fichero?

En la imagen anterior vemos la respuesta a esta pregunta, y es que esta configuración le dice a Cloudfront que fichero devolver en caso que se acceda a la raíz (/) de la distribución de Cloudfront. Hasta aquí todo bien, pero veamos que pasa cuando navegamos hacia una ruta que no sea la raíz de la distribución.

Como podemos ver en la imagen anterior, el navegador accede a la URL https://compacompila.com/posts/deploy-static-websites-serverless/, y por lo tanto Cloudfront accede a la ruta /posts/deploy-static-websites-serverless/ en el bucket S3. Veamos que tenemos en esa ruta en el bucket S3.

En la imagen anterior vemos que en esta carpeta tenemos entre otros ficheros, el index.html, que es el fichero que Cloudfront necesita devolver para poder renderizar esa página en el navegador. Y aquí es donde vienen las funciones Cloudfront.

Funciones Cloufront

Las funciones Cloudfront, son pequeñas funciones muy rápidas que se ejecutan en los edge locations de Cloudfront. Estas duran en el orden de los milisegundos y la idea es poder hacer modificaciones ligeras a las solicitudes que entran y salen de nuestra distribución. Existen cuatro hooks relacionados a las funciones Cloudfront:

• Solicitud cliente
• Respuesta cliente
• Solicitud origen
• Respuesta origen

Estaré dedicando otro post a explicar cuando debemos usar cada uno de estos hooks, pero para lo que necesitamos ahora, usaremos el 1ero, que por su traducción al inglés es Viewer request. El motivo es el siguiente, si nuestro navegador en vez de acceder a Cloudfront a través de la ruta /posts/deploy-static-websites-serverless/, accediera a través de /posts/deploy-static-websites-serverless/index.html, tuviéramos nuestro problema resuelto, ya que Cloudfront accediera directo al fichero y se pudiera renderizar esa vista en el navegador, en este caso queremos modificar la solicitud que hace el navegador, y en este caso el navegador es el cliente.

Desarrollando nuestra función Cloudfront

Nunca debemos olvidar el hecho que nuestras funciones Cloudfront siempre deben realizar ligeras modificaciones que no impliquen una gran demora en nuestro tráfico, a continuación nuestra función Cloudfront:

function handler(event) {
    var request = event.request;
    var uri = request.uri;

    // Check if URI is missing a file name (no extension) or ends with a slash
    if (uri.endsWith('/')) {
        // If URI ends with a slash, append 'index.html'
        request.uri += 'index.html';
    }
    return request;
}

Como podemos ver con esta función garantizamos que siempre se añada al final de nuestra ruta, un index.html, y de esta forma tenemos resuelto nuestro problema.

Hasta la próxima

Esto es todo por el momento. En el próximo artículo te daré el paso a paso que necesitas para que puedas efectuar todo lo que he explicado en esta serie. Recuerda que la mejor forma en que me puedes ayudar es dejándome un comentario, igual me gustaría saber que te interesa aprender respecto a AWS para tenerlo en cuenta para los próximos artículos. Nos vemos pronto.