En esta publicación voy a compartir contigo cómo puedes crear tu propio acortador de URL de dominio personalizado usando Cloudflare Workers. Ya sea que sea un desarrollador web que busca agregar otra herramienta a su cartera, un propietario de un negocio que desea personalizar sus enlaces sin un alto precio o simplemente alguien a quien le encanta jugar con las tecnologías web, esta guía paso a paso es para tú.
Como desarrollador web y entusiasta de la tecnología, siempre me han fascinado las pequeñas cosas que hacen que Internet sea más eficiente y fácil de usar. Un día, mientras compartía una URL particularmente larga y difícil de manejar con un colega, me encontré deseando una forma sencilla y personalizada de acortar los enlaces. Claro, existen muchos servicios de acortamiento de URL, pero quería algo que se sintiera más "yo", algo que pudiera personalizar y controlar.
Fue entonces cuando se me ocurrió la idea de crear mi propio acortador de URL personalizado utilizando Cloudflare Workers.. Fue como encontrar un tesoro escondido en el vasto mar de tecnologías web. No sólo podía acortar las URL, sino que podía hacerlo con mi propio nombre de dominio, ¡gratis! La emoción de este descubrimiento me recordó la primera vez que implementé un sitio web: esa oleada de empoderamiento y posibilidades infinitas.
Lo que hizo que este descubrimiento fuera aún más emocionante fue darme cuenta de que podría servir como una alternativa fantástica y gratuita a servicios populares como Bit.ly o TinyURL para crear enlaces cortos de marca en un dominio personalizado. Muchas empresas e individuos pagan mucho dinero por este tipo de funcionalidad, pero aquí hay una manera de lograr el mismo resultado sin gastar un centavo.
Paso 1: Registre un nombre de dominio (use un dominio corto)
El primer paso para crear su acortador de URL personalizado es registrar un nombre de dominio. Esta será la base de los enlaces cortos de tu marca, ¡así que elige sabiamente!
A continuación se ofrecen algunos consejos que le ayudarán a seleccionar el dominio perfecto:
- Que sea breve: El objetivo de un acortador de URL es crear enlaces concisos. Busque nombres de dominio con entre 3 y 5 caracteres si es posible. Podría ser una abreviatura, un acrónimo o una palabra pegadiza.
- Hazlo memorable: Elija algo fácil de recordar y escribir. Esto hará que sea más fácil para usted y para otros utilizar sus enlaces acortados.
- Considere su marca: si está utilizando esto para una marca comercial o personal, intente alinear el dominio con su identidad de marca existente.
- Comprobar disponibilidad: Los dominios cortos y atractivos tienen una gran demanda. Es posible que deba ser creativo o considerar dominios de nivel superior (TLD) alternativos como .io, .co o .me si su primera opción no está disponible.
- Piense en el TLD: Si bien .com es popular, no evite otros TLD. Algunos, como .link o .click, podrían ser particularmente adecuados para un acortador de URL.
Aquí tienes algunos ejemplos para inspirarte:
- abc.enlace
- ir.io
- shrt.co
- zap.me
Una vez que haya elegido su dominio, deberá comprarlo a un registrador de dominios. Algunas opciones populares incluyen:
- Namecheap
- Ve papi
- Cloudflare (Recomendado, lo cual también es muy conveniente ya que usaremos Cloudflare Workers)
Recuerde, si bien el dominio costará dinero, es una compra única al año y el resto de nuestra configuración del acortador de URL será gratuito utilizando Cloudflare Workers.
Consejo profesional: antes de finalizar su compra, asegúrese de que el dominio no esté asociado con ningún spam o actividad maliciosa. Puedes consultar su historial utilizando herramientas como Domain Tools o Wayback Machine.
Con su nuevo y brillante dominio en mano, está listo para pasar al siguiente paso: configurar Cloudflare para su dominio. Pero eso lo cubriremos en la siguiente sección.
Paso 2: Configure los registros DNS para su dominio
Ahora que tienes tu dominio, es hora de configurar la configuración DNS. Este paso es crucial para garantizar que sus trabajadores de Cloudflare funcionen correctamente con su dominio recién registrado.
Repasemos el proceso:
1. Agregue su dominio a Cloudflare
- Si aún no lo has hecho, crear una cuenta gratuita en Cloudflare.
- En su panel de Cloudflare, haga clic en "Agregar un sitio" e ingrese su nombre de dominio.
- Cloudflare buscará registros DNS existentes. Elimina todos los registros que encuentre (a menos que también estés usando el dominio para correo electrónico u otros servicios importantes, en cuyo caso consérvalos).
2. Actualice los servidores de nombres (ignore este paso si su dominio está registrado en Cloudflare)
- Cloudflare le proporcionará un conjunto de servidores de nombres.
- Vaya al sitio web de su registrador de dominio y reemplace los servidores de nombres existentes con los proporcionados por Cloudflare.
- Este paso puede tardar hasta 24 horas en propagarse globalmente.
3. Configurar registros DNS
- En la configuración de DNS de Cloudflare, agregaremos dos nuevos registros A.
- Agregue lo siguiente:
Tipo: A
Nombre: @
Contenido: 192.0.2.1
TTL: Auto
Estado del proxy: proxy (nube naranja - muy importante)
Tipo: A
Nombre: www
Contenido: 192.0.2.1
TTL: Auto
Estado del proxy: proxy (nube naranja - muy importante)
Esta IP 192.0.2.1 es una dirección "ficticia" especial. Está reservado para documentación y pruebas, lo que lo hace perfecto para nuestras necesidades.
4. Habilite el proxy de Cloudflare
- Asegúrese de que el estado del proxy (icono de nube naranja) esté habilitado para su registro DNS.
- Esto permite que Cloudflare represente su tráfico y es necesario para que Cloudflare Workers funcione.
5. Verificar la configuración
- Una vez que el cambio de servidor de nombres se haya propagado, Cloudflare mostrará su dominio como "Activo".
- Puede verificar esto en el panel de Cloudflare.
El punto clave aquí es que no estamos apuntando su dominio a ningún alojamiento web real. La dirección 192.0.2.1 es sólo un marcador de posición. Su Cloudflare Worker, que configuraremos a continuación, interceptará todas las solicitudes a su dominio y manejará la lógica de acortamiento de URL.
Consejo profesional: esta configuración significa que no necesita pagar ni administrar ningún alojamiento web. Cloudflare Workers se encargará de todo el trabajo pesado, lo que hace que esta solución no solo sea gratuita sino también increíblemente liviana y fácil de mantener.
Con su DNS configurado correctamente, ahora está listo para pasar a la parte interesante: configurar su Cloudflare Worker para manejar el acortamiento de URL.
Paso 3: crear un trabajador de Cloudflare
Ahora que tenemos nuestro dominio configurado en Cloudflare, es momento de crear el Worker que manejará nuestras redirecciones. Cloudflare Workers proporciona un entorno de ejecución sin servidor que nos permite ejecutar nuestro código en el borde, cerca de nuestros usuarios para un rendimiento óptimo.
1. Cree un trabajador de Cloudflare
- Accediendo a la Sección de Trabajadores:
- Inicie sesión en su panel de control de Cloudflare.
- Navegue a la sección "Trabajadores" de la barra lateral.
- Haga clic en "Crear un servicio" si este es su primer trabajador, o en "Crear trabajador" si ya tiene trabajadores existentes.
- Nombra a tu trabajador:
- Elija un nombre descriptivo para su trabajador, como "controlador de redirecciones masivas".
- Haga clic en "Crear servicio" para pasar al editor.
- Escribir el guión del trabajador:
- En el editor, reemplace el código predeterminado con el script del controlador de redireccionamiento:
exportar predeterminado {
async fetch(solicitud) {
const redirecciónMap = nuevo mapa([
["google", "https://www.google.com?subId1=google"],
["bing", "https://www.bing.com?subId1=bing"],
// Añade más redirecciones aquí según sea necesario
]);
URL constante = nueva URL (solicitud.url);
console.log("URL completa:", url.toString());
console.log("Nombre de host:", url.nombre de host);
console.log("Nombre de ruta:", url.nombre de ruta);
let ruta = url.pathname.toLowerCase().replace(/^\//, '').split('/')[0];
if (url.hostname.includes('workers.dev')) {
ruta = url.nombrederuta.toLowerCase().replace(/^\//, '').split('/')[1] || '';
}
console.log("Ruta procesada:", ruta);
ubicación constante = redirigirMap.get(ruta);
console.log("Ubicación de redireccionamiento:", ubicación);
// Cambiar a 301 para redirección permanente
si (ubicación) {
return Response.redirect(ubicación, 302);
}
// Si la solicitud no está en el mapa, devuelve un 404 o tu alternativa preferida
devolver nueva respuesta(`No encontrado: ${ruta}`, {estado: 404});
},
};
- Comprender el guión:
- Definimos una redirigirMapa que contiene nuestras rutas cortas y sus correspondientes URL completas.
["google", "https://www.google.com?subId1=google"],
yourshorturl.com/google redirecciona a -> https://www.google.com?subId1=google
["bing", "https://www.bing.com?subId1=bing"],
yourshorturl.com/bing redirige a -> https://www.bing.com?subId1=bing
- El script procesa las solicitudes entrantes, extrae la ruta y verifica si coincide con alguna de nuestras redirecciones definidas.
- Si se encuentra una coincidencia, devuelve un 302 (redireccionamiento temporal) a la URL correspondiente.
- Si no se encuentra ninguna coincidencia, devuelve una respuesta 404 No encontrado.
- Probando al trabajador:
- Utilice la función "Edición rápida" en el panel de Cloudflare para realizar cambios y probar su trabajador.
- Puede utilizar la herramienta de prueba HTTP proporcionada para simular solicitudes y ver cómo responde su trabajador.
- Despliegue del trabajador:
- Una vez que esté satisfecho con sus pruebas, haga clic en "Guardar e implementar" para activar su trabajador.
- Configuración de rutas de trabajadores:
- Después de la implementación, vaya a la pestaña "Disparadores" de su trabajador.
- Agregue una ruta que coincida con su dominio, como *recommends.link/*.
- Esto garantiza que todas las solicitudes a su dominio sean manejadas por este trabajador.
- Verificación de la configuración:
- Intente acceder a algunas de sus rutas de redireccionamiento (por ejemplo, https://recommends.link/url-shortener-guide) para garantizar que funcionen como se esperaba.
- Verifique los registros de trabajadores en su panel de Cloudflare para ver el resultado de la consola y verificar que las rutas se estén procesando correctamente.
Paso 4: más personalizaciones (opcional)
Redirecciones dinámicas con Cloudflare KV
Para hacer que nuestro sistema de redirecciones sea más flexible y fácil de administrar, podemos usar el almacenamiento KV (Key-Value) de Cloudflare para almacenar nuestras redirecciones:
Cree un espacio de nombres KV:
- En su panel de Cloudflare, vaya a Trabajadores > KV. Haga clic en "Crear espacio de nombres" y asígnele un nombre (por ejemplo, "REDIRECT_MAP").
- Vaya a la configuración de su trabajador. En "Vínculos de espacio de nombres KV", agregue un nuevo enlace. Elija su espacio de nombres KV y asígnele un nombre de variable (por ejemplo, REDIRECTS).
exportar predeterminado {
async fetch(solicitud, env) {
URL constante = nueva URL (solicitud.url);
ruta constante = url.nombrederuta.toLowerCase().replace(/^\//, '').split('/')[0];
ubicación constante = esperar env.REDIRECTS.get(ruta);
si (ubicación) {
return Response.redirect(ubicación, 301);
}
devolver nueva respuesta(`No encontrado: ${ruta}`, {estado: 404});
},
};
Ahora puede agregar, actualizar o eliminar redirecciones modificando la tienda KV sin cambiar el código de trabajador.
Redirecciones parametrizadas
Permita parámetros dinámicos en sus redirecciones:
exportar predeterminado {
async fetch(solicitud, env) {
URL constante = nueva URL (solicitud.url);
const [ruta, ...params] = url.pathname.toLowerCase().replace(/^\//, '').split('/');
let ubicación = esperar env.REDIRECTS.get(ruta);
si (ubicación) {
// Reemplazar marcadores de posición con parámetros reales
params.forEach((param, índice) => {
ubicación = ubicación.reemplazar(`{${index}}`, parámetro);
});
return Response.redirect(ubicación, 301);
}
devolver nueva respuesta(`No encontrado: ${ruta}`, {estado: 404});
},
};
Con esta configuración, podría tener una entrada KV como "producto": "https://mystore.com/item/{0}/details" y usarla como yourshortlink.com/product/12345.
Seguimiento de clics y análisis
Implemente análisis básicos registrando eventos de redireccionamiento:
exportar predeterminado {
async fetch(solicitud, env) {
URL constante = nueva URL (solicitud.url);
ruta constante = url.nombrederuta.toLowerCase().replace(/^\//, '').split('/')[0];
ubicación constante = esperar env.REDIRECTS.get(ruta);
si (ubicación) {
// Registra el evento de redirección
await env.REDIRECTS.put(`${path}_clicks`, (parseInt(await env.REDIRECTS.get(`${path}_clicks`) || '0') + 1).toString());
return Response.redirect(ubicación, 301);
}
devolver nueva respuesta(`No encontrado: ${ruta}`, {estado: 404});
},
};
Páginas de error personalizadas
En lugar de una respuesta 404 de texto sin formato, devuelva una página HTML personalizada:
const páginanotEncontrada = `
Enlace no encontrado
cuerpo {familia de fuentes: Arial, sans-serif; alineación de texto: centro; relleno superior: 50px; }
Meditative Healing™
¡Ups! Enlace no encontrado
El enlace corto que estás buscando no existe.
`;
// En tu función de búsqueda:
devolver nueva respuesta (notFoundPage, {
estado: 404,
encabezados: { 'Tipo de contenido': 'texto/html' }
});
Limitación de la velocidad
Implemente una limitación de tasa básica para evitar abusos:
exportar predeterminado {
async fetch(solicitud, env) {
const ip = request.headers.get('CF-Connecting-IP');
const rateLimitKey = `ratelimit:${ip}`;
const currentRequests = parseInt(await env.REDIRECTS.get(rateLimitKey) || '0');
if (currentRequests > 100) { // Límite de 100 solicitudes por minuto
return new Response('Límite de tasa excedido', { estado: 429 });
}
espere env.REDIRECTS.put(rateLimitKey, (currentRequests + 1).toString(), {expirationTtl: 60});
// Resto de tu lógica de redireccionamiento aquí
},
};
Pruebas A / B
Implemente pruebas A/B simples para sus redirecciones:
exportar predeterminado {
async fetch(solicitud, env) {
URL constante = nueva URL (solicitud.url);
ruta constante = url.nombrederuta.toLowerCase().replace(/^\//, '').split('/')[0];
const ubicaciónA = espera env.REDIRECTS.get(`${ruta}_A`);
ubicación constanteB = esperar env.REDIRECTS.get(`${ruta}_B`);
si (ubicaciónA && ubicaciónB) {
ubicación constante = Math.random() < 0.5? ubicaciónA: ubicaciónB;
return Response.redirect(ubicación, 301);
}
// Regresar a la redirección normal si la prueba A/B no está configurada
ubicación constante = esperar env.REDIRECTS.get(ruta);
si (ubicación) {
return Response.redirect(ubicación, 301);
}
devolver nueva respuesta(`No encontrado: ${ruta}`, {estado: 404});
},
};
Estas personalizaciones y ampliaciones añaden una funcionalidad importante a su sistema de redireccionamiento masivo, haciéndolo más flexible, potente e informativo. Cada una de estas características se puede perfeccionar y ampliar aún más en función de sus necesidades y casos de uso específicos.
Resumen: creación de un acortador de enlaces personalizado con trabajadores de Cloudflare
A lo largo de esta publicación de blog, exploramos cómo crear un acortador de URL personalizado potente y flexible utilizando Cloudflare Workers. Esta solución ofrece un enfoque gratuito y eficiente para crear enlaces cortos a escala.
TL; DR:
- Cloudflare Workers proporciona una plataforma sin servidor para implementar una lógica de redireccionamiento personalizada con distribución global y baja latencia.
- La configuración adecuada de DNS y de las rutas de trabajo son cruciales para conectar su dominio personalizado al trabajador.
- Un trabajador simple basado en JavaScript puede manejar escenarios de redireccionamiento complejos de manera eficiente.
- El almacenamiento Key-Value (KV) de Cloudflare se puede aprovechar para crear mapas de redireccionamiento dinámicos y fácilmente administrables.
- Dentro del ecosistema de Worker se pueden implementar funciones avanzadas como redireccionamientos parametrizados, seguimiento de clics, páginas de error personalizadas, limitación de velocidad y pruebas A/B.
- Este sistema ofrece importantes ventajas respecto al tradicional. métodos de redirección, incluido un rendimiento mejorado, una gestión más sencilla y una mayor flexibilidad.
La solución que hemos creado ofrece varios beneficios:
- Escalabilidad: Maneja millones de redirecciones sin degradación del rendimiento.
- Flexibilidad: agregue, modifique o elimine redireccionamientos fácilmente sin cambiar la lógica principal.
- Rendimiento: Aprovecha la red global de Cloudflare para redireccionamientos rápidos en todo el mundo.
- Personalización: permite funciones avanzadas como análisis y pruebas A/B.
- Rentabilidad: Utiliza una arquitectura sin servidor, lo que reduce potencialmente los costos de alojamiento.
- Alternativa gratuita a servicios populares como Bit.ly o Yourls para crear enlaces cortos de marca en un dominio personalizado.
Ahora que comprende el poder y la flexibilidad de este sistema de redireccionamiento basado en Cloudflare Worker, es hora de ponerlo en acción:
- Si aún no lo ha hecho, regístrese para obtener una cuenta de Cloudflare y familiarícese con la plataforma Workers.
- Implemente este sistema para enlaces cortos de su propia marca o redireccionamientos masivos.
- Experimente con las funciones avanzadas que hemos analizado para adaptar el sistema a sus necesidades específicas.
- Comparta sus experiencias o haga preguntas en la sección de comentarios a continuación. ¡Tus ideas podrían ayudar a otros miembros de la comunidad!
- Para casos de uso más avanzados o implementaciones personalizadas, considere comunicarse con un experto o servicio de consultoría de Cloudflare Workers.
Mantén la curiosidad, sigue aprendiendo y no dudes en superar los límites de lo que es posible con herramientas como Cloudflare Workers.
