Cómo configurar Cloudflare Workers para personalización web

Qué vas a lograr

Un Worker de Cloudflare que personaliza tu sitio web en el edge: detecta el país del visitante y redirige a la versión correcta de tu sitio, modifica precios a moneda local, o sirve contenido diferente sin modificar tu servidor de origen. Todo esto ocurre en menos de 5ms adicionales.

Requisitos previos

• Dominio activo en Cloudflare (cualquier plan, gratuito funciona)
• Cloudflare Workers (plan gratuito: 100,000 requests/día, Workers Paid $5/mes para más)
• Conocimiento básico de JavaScript (ES6)
• Acceso al Cloudflare Dashboard

Paso 1 — Crear tu primer Worker

1. Cloudflare Dashboard → Workers & Pages → Create Worker
2. Cloudflare abre el editor en línea con un Worker de ejemplo
3. El Worker básico tiene esta estructura: addEventListener con tipo fetch, que recibe un evento, obtiene la request y retorna una response
4. Cada Worker tiene su propio subdominio en workers.dev para pruebas antes de asociarlo a tu dominio

Paso 2 — Implementar redirección por país

// Worker: redirigir por país
export default {
  async fetch(request) {
    const country = request.cf.country;
    const url = new URL(request.url);
    
    // Si el visitante es de México y no está en /mx/
    if (country === 'MX' && !url.pathname.startsWith('/mx/')) {
      return Response.redirect(
        `https://${url.host}/mx${url.pathname}`,
        302
      );
    }
    
    // Para otros países: dejar pasar sin modificación
    return fetch(request);
  }
}

1. El objeto request.cf contiene: country (código ISO), continent, city, latitude, longitude, timezone, asOrganization
2. Puedes redirigir, modificar headers, o transformar el HTML de respuesta

Paso 3 — A/B Testing en el edge

// Worker: A/B test simple 50/50
export default {
  async fetch(request) {
    const url = new URL(request.url);
    
    // Solo en la homepage
    if (url.pathname === '/') {
      const group = Math.random() < 0.5 ? 'A' : 'B';
      const targetUrl = group === 'A' 
        ? request.url 
        : request.url.replace('/', '/variant-b/');
      
      const response = await fetch(targetUrl);
      const newResponse = new Response(response.body, response);
      newResponse.headers.set('X-AB-Group', group);
      return newResponse;
    }
    
    return fetch(request);
  }
}

Paso 4 — Asociar Worker a tu dominio

1. En el Worker: Settings → Triggers → Add Route
2. Route: patrón de URL donde debe ejecutarse, ej. tusitio.com/* para todo el sitio o tusitio.com/api/* solo para la API
3. Zone: selecciona tu dominio de Cloudflare
4. Save route
5. A partir de este momento, todas las requests que coincidan con el route pasarán por tu Worker antes de llegar al origen

Verificación y troubleshooting

• Test antes de publicar: usa el editor en línea de Cloudflare que tiene un tester integrado con requests simuladas
• Logs en tiempo real: Workers → tu Worker → Logs → Start Log Stream
• Error 1101 Worker threw exception: agrega try/catch en tu Worker y loguea el error para debugging
• Latencia alta: los Workers agregan mínimo ~5ms. Si ves más: revisa si tu Worker hace fetch de recursos externos que añaden latencia

Próximos pasos y optimización

• Workers KV: almacén clave-valor distribuido globalmente para guardar configuraciones sin latencia (ej. lista de IPs bloqueadas, configuración de experimentos)
• Durable Objects: para estado compartido entre Workers (ej. contador de visitas en tiempo real)
• Analytics Engine: loguea eventos de Workers directamente a Cloudflare Analytics para métricas de personalización

En Weblindrome ofrecemos Desarrollo web para ayudarte con esta y otras implementaciones. Solicita una cotización personalizada.