Funciones de AWS Cloudfront para una CDN

Las funciones de AWS Cloudfront te permiten añadir reglas o personalizar las peticiones de los usuarios, lo que se les entrega, reglas a introducir en la petición al origen (bucket de AWS S3) o reglas en la respuesta del origen.

Cloudfront es una solución excelente a la hora de incluir una CDN en tu sitio web. Una de las mayores ventajas que tiene es que esta CDN la gestionas tú mismo de acuerdo a las necesidades de tu proyecto. Por ejemplo, en el caso de nuestro sitio web utilizamos los plugins EWWW Image Optimizer para convertir las imágenes a formato webp y WP Offload Media para enviar todas las imágenes a un bucket de S3. Estos 2 plugins son una combinación excelente para trabajar con AWS. Sin embargo, requieren que conozcas un poco acerca de AWS y como funcionan algunos servicios sus servicios si quieres trabajar con ambos plugins en la capa gratuita.

Cuando usar funciones de AWS Cloudfront para una CDN

En primer lugar, cuando vas a migrar wordpress a aws, o estás creando un nuevo WordPress en AWS, debes cambiar la forma en que veías wordpress hasta el momento si quieres sacar el mejor partido posible a las ventajas que te ofrecen los servicios Cloud.

En nuestro caso nos sucedió que al instalar el plugin para WordPress AMP las reglas de reescritura webp por js que crea EWWW Image Optimizer dejaron de funcionar. Este plugin continuó trabajando perfectamente para convertir las imágenes. Entonces como era prioridad para nuestro equipo trabajar con AMP para WordPress teníamos dos opciones, 1 ver hasta que punto se podía incluir un equivalente a las reglasde reescritura que teníamos en el htaccess (sin certeza alguna de que esto fuese a funcionar con AMP pero se podía intentar) o dejar este tema a la CDN que es desde donde son servidas todas las imágenes de nuestro sitio web.

Fuimos a por la segunda opción para lo cual añadimos en Cloudfront una función:

function handler(event) {
    var request = event.request;
    var uri = request.uri;
    
    if(uri.match(/(\.jpg|\.png|\.jpeg)$/g)) {
        request.uri += '.webp';
    } 
    return request;
}

La dejamos activa para todas las peticiones del usuario y punto final (bueno para esta primera parte). Cloudfront te permite dos opciones para crear funciones para una distribución (CDN): la primera es Cloudfront functions que es el caso que estas viendo en este sitio web y la otra opción es Lambda@Edge. Cada una tiene sus ventajas sobre la otra y en el caso de utilizar las funciones de Cloudfront para una CDN recomiendo las Cloudfront Functions, son las utilizamos nosotros ya que aceptan más peticiones simultáneas que las Lambda@Edge. Si te interesan más detalles entra a este enlace donde AWS compara los tipos de funciones de Cloudfront.

Una vez configurado todo seguimos desarrollando nuestro sitio maravillosamente. Nos sucedió que al activar el plugin que utilizamos para gestionar la caché (W3 Total Cache) nos ocurrió otro problema. Las peticiones que se hacían a la CDN dejó de presentar el encabezado Access-Control-Allow-Origin para los archivos .ttf, que son las fuentes de Google que utilizamos.

Como resolver Access to [algo en tu CDN] form origin [tu sitio web] has been blocked by CORS con funciones de AWS Cloudfront para tu CDN

Con W3 Total Cache esto es un problema bastante común y al menos nosotros preferimos que buscar la solución fuera del plugin. Te presentamos una solución bastante sencilla y que además hace mejor uso de los recursos de tu cloud para WordPress en AWS.

El problema se ve de la siguiente forma:

Access to font at ‘https://cdn.precisefuture.com/wp-content/uploads/2022/10/BarlowSemiCondensed-Regular.ttf; from origin ‘https://precisefuture.com; has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Tu CDN y tu sitio no van a tener exactamente el mismo origen y si tus CORS no se han declarado es normal que tu CDN no pueda dar una respuesta. Entonces con una función en Cloudfront pudiera resolverse. La traducción de este problema para tu función es la siguiente: Cuando un «request» no presente el encabezado «Access-Control-Allow-Origin» incluye en la «request» el encabezado y listo. Claro, esta solución se recomienda solo para archivos no sensibles. Así que por si acaso creamos la función de esta forma:

function handler(event) {
    var request = event.request;
    var headers  = request.headers;
    
    if(`.ttf` == uri.match(/(\.ttf)$/g)) {
        headers['access-control-allow-origin'] = {value: "*"};
    } 

    return request;
}

Aquí es importante que tengas en cuenta que AWS Cloudfront solo permite solo 1 función para las peticiones de los usuarios a una misma CDN. Así que como teníamos ya otra función en este mismo lugar nos quedó así

function handler(event) {
    
    var request = event.request;
    var uri = request.uri;
    var headers  = request.headers;
    
    if(`.ttf` == uri.match(/(\.ttf)$/g)) {
        headers['access-control-allow-origin'] = {value: "*"};
    } 
    
    if(uri.match(/(\.jpg|\.png|\.jpeg)$/g) != '') {
        request.uri += '.webp';
    } 
    return request;
}