Optimización Web con Cloudflare Workers: Tu CDN Personalizado y Edge Computing

🚀 Introducción a Cloudflare Workers y Edge Computing

En la era digital actual, la velocidad y la fiabilidad de las aplicaciones web son cruciales para el éxito. Los usuarios esperan experiencias instantáneas, y cualquier retraso puede traducirse en una pérdida de interés. Aquí es donde entra en juego el Edge Computing y herramientas como Cloudflare Workers.

Cloudflare Workers permite a los desarrolladores ejecutar JavaScript, WebAssembly, o cualquier otro lenguaje compilado a WebAssembly en la red global de Cloudflare, que se extiende a más de 300 ciudades en más de 120 países. Esto significa que tu código se ejecuta cerca de tus usuarios, reduciendo drásticamente la latencia y la carga en tus servidores de origen. Piensa en Workers como funciones 'serverless' distribuidas globalmente que puedes personalizar a tu antojo.

Este tutorial te guiará paso a paso para aprovechar el poder de Cloudflare Workers. Aprenderemos a:

• Configurar un entorno de desarrollo para Workers.
• Crear una CDN personalizada para servir contenido estático.
• Implementar lógica compleja para la manipulación de solicitudes y respuestas HTTP.
• Explorar casos de uso avanzados para mejorar el rendimiento y la seguridad de tu sitio web.

🛠️ Requisitos Previos y Configuración del Entorno

Antes de sumergirnos en la codificación, necesitamos asegurarnos de que tenemos las herramientas adecuadas instaladas y configuradas.

1. Cuenta de Cloudflare

Si aún no tienes una, necesitarás crear una cuenta de Cloudflare. Puedes registrarte de forma gratuita.

2. Node.js y npm

Workers se desarrolla típicamente con JavaScript, y usaremos npm (Node Package Manager) para instalar dependencias y herramientas.

Asegúrate de tener Node.js (versión 16 o superior) y npm instalados. Puedes verificarlo abriendo tu terminal y ejecutando:

node -v
npm -v

Si no los tienes, puedes descargarlos desde el sitio oficial de Node.js.

3. Wrangler CLI

Wrangler es la herramienta de línea de comandos oficial de Cloudflare para desarrollar, probar y desplegar Workers. Es indispensable.

Instálalo globalmente usando npm:

npm install -g wrangler

Una vez instalado, autentica Wrangler con tu cuenta de Cloudflare:

wrangler login

Esto abrirá tu navegador para que inicies sesión en tu cuenta de Cloudflare y autorices Wrangler.

✨ Creando Tu Primer Cloudflare Worker

Vamos a empezar con un Worker básico que responderá con un simple mensaje.

1. Inicializando un Nuevo Proyecto Worker

Crea un nuevo directorio para tu proyecto y navega hacia él:

mkdir my-first-worker
cd my-first-worker

Ahora, inicializa un nuevo proyecto Worker con Wrangler. Elegiremos la plantilla 'Hello World':

wrangler init

Wrangler te hará algunas preguntas:

• ¿Quieres usar TypeScript? (Recomendado, pero para este tutorial usaremos JavaScript simple para mayor claridad) -> No
• ¿Quieres un proyecto 'Hello World'? -> Yes
• ¿Quieres instalar las dependencias? -> Yes

Esto creará una estructura de archivos básica, incluyendo src/index.js (donde irá nuestro código Worker) y wrangler.toml (archivo de configuración).

2. Entendiendo src/index.js

Abre src/index.js. Deberías ver algo similar a esto:

/**
 * Welcome to Cloudflare Workers!
 *
 * This is a template for a simple 'Hello World' worker that you can use to test
 * and deploy your first Worker.
 *
 * To run this worker locally, run `npm install` and then `npm run dev`.
 *
 * To deploy to production, run `npm run deploy`.
 */

export default {
  async fetch(request, env, ctx) {
    return new Response('Hello World from Cloudflare Workers!');
  },
};

Aquí, el objeto export default define el manejador de eventos para tu Worker. La función fetch es el corazón de cualquier Worker. Se ejecuta cada vez que una solicitud HTTP es interceptada por el Worker.

• request: El objeto Request entrante, que contiene información sobre la solicitud HTTP (URL, encabezados, método, cuerpo, etc.).
• env: Un objeto que contiene las variables de entorno y los enlaces a otros recursos (como KV, R2, D1, etc.) configurados para tu Worker.
• ctx: Un objeto ExecutionContext que proporciona métodos para extender el ciclo de vida de un evento, útil para tareas asíncronas.

Por ahora, simplemente devuelve un Response con el texto 'Hello World from Cloudflare Workers!'.

3. Ejecutando el Worker Localmente

Wrangler incluye un servidor de desarrollo local que te permite probar tu Worker sin desplegarlo.

Desde el directorio de tu proyecto, ejecuta:

wrangler dev

Esto iniciará un servidor en http://localhost:8787. Abre tu navegador y navega a esa URL. Deberías ver el mensaje 'Hello World from Cloudflare Workers!'.

4. Desplegando el Worker

Una vez que estés satisfecho con tu Worker, puedes desplegarlo a la red global de Cloudflare con un simple comando:

wrangler deploy

Wrangler compilará y desplegará tu código. Te proporcionará una URL *.workers.dev donde tu Worker estará accesible públicamente. Además, si configuraste tu dominio en wrangler.toml, tu Worker también se ejecutará en ese dominio.

🌐 Creando una CDN Personalizada con Workers

Ahora que sabemos lo básico, vamos a un caso de uso más práctico: construir una CDN personalizada. Esto es ideal para servir activos estáticos (imágenes, CSS, JavaScript) desde el borde, mejorando la velocidad de carga de tu sitio.

Imagina que tienes un bucket de almacenamiento S3 (o R2 de Cloudflare, que es compatible con S3 API) y quieres servir sus contenidos a través de tu dominio de Cloudflare, con caching inteligente y lógica personalizada.

1. Configuración de un Origen de Almacenamiento (simulado)

Para simplificar, vamos a simular un origen de almacenamiento usando una URL base. En un escenario real, esto podría ser un bucket R2, S3 o incluso un servidor web tradicional.

Modifica src/index.js:

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    // Definimos nuestro origen de almacenamiento 'simulado'
    // En un caso real, esto sería tu bucket S3/R2 o servidor de origen
    const ASSET_ORIGIN = 'https://example.com/assets'; // Cambia esto por tu URL de origen real

    // Construimos la URL del activo en el origen
    const assetUrl = new URL(ASSET_ORIGIN + url.pathname);

    // Creamos una nueva solicitud para el origen
    const assetRequest = new Request(assetUrl, request);

    // Realizamos la solicitud al origen
    let response = await fetch(assetRequest);

    // Clonamos la respuesta para poder modificarla (Headers, etc.)
    response = new Response(response.body, response);

    // Agregamos encabezados de caché para que Cloudflare cachee el activo
    // Esto es crucial para la funcionalidad de CDN
    response.headers.set('Cache-Control', 'public, max-age=31536000, immutable');

    return response;
  },
};

Explicación:

1. const url = new URL(request.url);: Parseamos la URL de la solicitud entrante.
2. const ASSET_ORIGIN = 'https://example.com/assets';: Aquí es donde tus activos estáticos residen originalmente. Asegúrate de cambiar https://example.com/assets por la URL base de tu bucket S3, R2, o cualquier otro servidor de origen.
3. const assetUrl = new URL(ASSET_ORIGIN + url.pathname);: Construimos la URL completa del activo en el origen, utilizando la ruta de la solicitud entrante.
4. const assetRequest = new Request(assetUrl, request);: Creamos una nueva Request para enviar a nuestro origen. Es importante pasar el objeto request original para conservar encabezados como User-Agent, Accept-Encoding, etc.
5. let response = await fetch(assetRequest);: Hacemos la solicitud HTTP a nuestro origen.
6. response = new Response(response.body, response);: Clonamos la respuesta. Esto es necesario porque el objeto Response devuelto por fetch es inmutable y no se pueden modificar directamente sus encabezados.
7. response.headers.set('Cache-Control', 'public, max-age=31536000, immutable');: Esto es la clave de la CDN. Le decimos a Cloudflare (y a los navegadores) que este activo es público, que puede ser cacheado por un año (max-age=31536000), y que su contenido no cambiará (immutable). Cloudflare utilizará este encabezado para almacenar en caché el activo en sus Edge Locations.

2. Probando la CDN Personalizada

Ejecuta wrangler dev y luego navega a http://localhost:8787/image.png (o cualquier ruta que esperes que exista en tu ASSET_ORIGIN). Tu Worker debería interceptar la solicitud, buscar el activo en https://example.com/assets/image.png (o la ruta que hayas configurado) y devolverlo con los encabezados de caché.

Una vez que despliegues con wrangler deploy, tu Worker hará lo mismo en producción. Cada vez que un usuario solicite un activo, el Worker lo buscará en el origen si no está en caché, y luego lo servirá desde el Edge de Cloudflare a los usuarios subsiguientes.

🔒 Mejorando la Seguridad: Bloqueo por País con Workers

Cloudflare Workers no solo optimiza el rendimiento, sino que también puede mejorar la seguridad. Un caso de uso común es el bloqueo de acceso desde ciertos países.

1. Accediendo a la Información de Localización

Cloudflare expone información geográfica del usuario a través del objeto request.cf.

Modifica tu src/index.js:

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    // Definimos nuestro origen de almacenamiento 'simulado'
    const ASSET_ORIGIN = 'https://example.com/assets'; // Tu URL de origen real

    // Países a bloquear (códigos ISO 3166-1 alpha-2)
    const BLOCKED_COUNTRIES = ['RU', 'CN', 'KP']; // Ejemplo: Rusia, China, Corea del Norte

    // Obtenemos el país del visitante
    const country = request.cf && request.cf.country;

    if (country && BLOCKED_COUNTRIES.includes(country)) {
      return new Response('Acceso denegado desde tu región.', {
        status: 403, // Forbidden
        headers: { 'Content-Type': 'text/plain' },
      });
    }

    // Si no está bloqueado, procedemos con la lógica de la CDN
    const assetUrl = new URL(ASSET_ORIGIN + url.pathname);
    const assetRequest = new Request(assetUrl, request);
    let response = await fetch(assetRequest);
    response = new Response(response.body, response);
    response.headers.set('Cache-Control', 'public, max-age=31536000, immutable');

    return response;
  },
};

Explicación:

1. const BLOCKED_COUNTRIES = ['RU', 'CN', 'KP'];: Un array de códigos de país que queremos bloquear.
2. const country = request.cf && request.cf.country;: Accedemos al código de país del visitante. request.cf contiene mucha información útil como city, region, colo, etc.
3. if (country && BLOCKED_COUNTRIES.includes(country)) { ... }: Si el país del visitante está en nuestra lista de bloqueo, devolvemos una respuesta 403 (Prohibido) con un mensaje de error.

Ahora, cuando alguien de uno de los países bloqueados intente acceder a tu Worker, recibirá un mensaje de acceso denegado directamente desde el Edge de Cloudflare, sin llegar a tu servidor de origen.

⚙️ Casos de Uso Avanzados y Patrones Comunes

Cloudflare Workers es increíblemente versátil. Aquí hay algunos casos de uso avanzados y patrones comunes:

1. Reescritura de URLs y Redirecciones

Puedes reescribir URLs antes de que lleguen a tu origen o realizar redirecciones 301/302 condicionales.

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    // Ejemplo: Redireccionar una ruta antigua a una nueva
    if (url.pathname === '/old-page') {
      return Response.redirect('https://example.com/new-page', 301);
    }

    // Ejemplo: Reescribir la ruta para ocultar una extensión de archivo
    if (url.pathname.endsWith('.html')) {
        url.pathname = url.pathname.replace('.html', '');
        // Aquí podríamos hacer un fetch a la URL reescrita en el origen
        // Por simplicidad, solo reescribimos la URL para la demostración
    }

    // Continúa con la lógica normal, usando la URL potencialmente modificada
    return fetch(url.toString(), request);
  },
};

2. Manipulación de Encabezados (Headers)

Modificar encabezados es útil para la seguridad (CORS, HSTS), SEO (Canonical URLs) o simplemente para añadir información.

export default {
  async fetch(request, env, ctx) {
    let response = await fetch(request);

    response = new Response(response.body, response);

    // Añadir un encabezado de seguridad HSTS (HTTP Strict Transport Security)
    response.headers.set('Strict-Transport-Security', 'max-age=63072000; includeSubDomains; preload');

    // Añadir un encabezado X-Worker-ID para depuración
    response.headers.set('X-Worker-ID', 'my-custom-worker-123');

    // Eliminar un encabezado de servidor sensible
    response.headers.delete('X-Powered-By');

    return response;
  },
};

3. Edge HTML Rewriting

Workers pueden modificar el HTML en vivo mientras se sirve al usuario, sin tocar tu servidor de origen. Esto es útil para inyectar scripts de analíticas, modificar enlaces o adaptar contenido para diferentes dispositivos.

Para esto, Cloudflare proporciona el HTMLRewriter API.

import { HTMLRewriter } from 'html-rewriter-wasm';

export default {
  async fetch(request, env, ctx) {
    const response = await fetch(request);

    // Solo reescribir HTML si la respuesta es HTML
    const contentType = response.headers.get('Content-Type');
    if (contentType && contentType.includes('text/html')) {
      return new HTMLRewriter()
        .on('title', { element: el => el.setInnerContent('Mi Nuevo Título con Worker') })
        .on('body', { element: el => el.append('<p>Contenido añadido por Worker en el borde.</p>', { html: true }) })
        .transform(response);
    }

    return response;
  },
};

4. AB Testing y Personalización

Con Workers, puedes implementar AB testing o personalización basada en la ubicación del usuario, dispositivo, o incluso cookies, redirigiendo a diferentes versiones de tu sitio o sirviendo contenido distinto.

5. Integración con otros productos de Cloudflare

Workers se integra perfectamente con otros productos de Cloudflare, extendiendo sus capacidades:

• R2 (Object Storage): Almacena activos directamente en Cloudflare para una latencia mínima.
• KV (Key-Value Store): Almacenamiento distribuido de clave-valor para configuraciones, caches personalizados o datos de usuario.
• D1 (SQL Database): Bases de datos SQL distribuidas en el Edge.
• Durable Objects: Primitivas de concurrencia para construir servicios globales con consistencia fuerte.

📈 Beneficios Clave de Cloudflare Workers

Adoptar Cloudflare Workers ofrece múltiples ventajas significativas:

🏁 Conclusión

Cloudflare Workers es una herramienta transformadora que permite a los desarrolladores llevar la lógica de sus aplicaciones a la red de borde. Hemos explorado cómo configurar un Worker, crear una CDN personalizada y mejorar la seguridad mediante el bloqueo por país. La capacidad de interceptar y modificar solicitudes y respuestas HTTP en el borde de la red global de Cloudflare abre un mundo de posibilidades para la optimización del rendimiento, la mejora de la seguridad y la creación de experiencias de usuario más dinámicas y eficientes.

Al entender y aplicar los conceptos presentados en este tutorial, estás un paso más cerca de construir aplicaciones web más rápidas, seguras y escalables que deleitarán a tus usuarios. ¡El futuro de la web está en el Edge!