¿Qué es la función CloudFront?

Las distribuciones de CloudFront tienen que realizar un nivel de cálculo cuando entregan tráfico a nuestras solicitudes. Esto incluye almacenamiento en caché, enrutamiento de URL al origen correcto, etc. Las funciones de CloudFront nos permiten jugar con esto. Ahora no se trata solo de elegir un modelo de almacenamiento en caché administrado o una política de origen predefinida. Con las funciones de CloudFront, podemos procesar cada solicitud de forma independiente, con nuestro código personalizado, a un costo muy bajo.

La siguiente imagen (de la documentación de AWS) describe la relación entre Lambda, Lambda @ Edge, CloudFront Functions, distribuciones CloudFront y Origin.

Ejemplo

Veamos un ejemplo y juguemos con las funciones de Cloud Front. Hay una cosa que teme a cualquier desarrollador web. Quizás sea el mayor enemigo de cualquier desarrollador web. Algo que todos deseamos que no existiera. Sin embargo, tenemos que afrontarlo. Una aplicación que se creó con el único motivo de destruir la comunidad de código abierto. Lo ha adivinado bien: ¡Internet Explorer!

Sé que es posible y puedo solucionar los problemas y hacer que mi sitio web funcione también para IE. Pero siento que alguien que todavía está atascado en IE no merece todo ese esfuerzo. Prefiero prohibirles que visiten mi sitio web.

Las funciones de CloudFront nos permiten hacer eso. Veamos cómo.

Crear una función

Para empezar, por supuesto, debe iniciar sesión en la consola de AWS y pasar a la página de CloudFront. En el panel izquierdo, podemos ver una nueva entrada: Funciones. Haga clic en eso y haga clic en Crear función. Allí, podemos ver un editor de texto para agregar nuestro código.

Agregue este código allí:

function handler(event) {
    var headers = event.request.headers;
    var newurl = `https://thewiz.net/accessdenied.html`     if (headers['user-agent']) {
        var browser = headers['user-agent'].value;
        if (browser.includes("Trident") || browser.includes("Edg")){
            var response = {
                statusCode: 302,
                statusDescription: 'Found',
                headers:
                    { "location": { "value": newurl } }
                }
            return response;
        }
    }
    return request;
}

Ahora, haga clic en Publicar, y luego en el botón “Publicar y actualizar”.

Asociado con distribución

Finalmente, vaya a la cuarta pestaña: Asociar. Allí, podemos elegir una distribución de CloudFront particular que queramos asociar con nuestra aplicación. Podemos elegir el evento en el que se debe invocar la función. Elija lo siguiente y haga clic en asociar.

Y ¡Listo! Hemos configurado la función CloudFront. Ahora, intente visitar la página con un navegador Chrome. Podemos ver la página sin ningún problema. Si intentamos usar IE, recibimos una advertencia inmediata: use Chrome.

Resumen

Este fue un ejemplo simple y divertido para probar el punto. Pero, la belleza aquí es que estas funciones se ejecutan lejos de las regiones y los centros de datos. Estos se ejecutan en Cloud Front, muy cerca de nuestro navegador. Entonces, la velocidad de respuesta es fabulosa. Podemos agregar una lógica más intrincada aquí: validación de JWT, cambios menores en el HTML de respuesta, en función de varios factores. Por lo tanto, la distribución de Cloud Front ya no es estática. Es dinámico, pero súper rápido.

Consulte este enlace para ver algunos ejemplos de código útiles.