Coloca tu documentación en una subcarpeta con Cloudflare

Sigue esta guía para alojar tu centro de ayuda de Ferndesk en una subcarpeta personalizada (como tudominio.com/ayuda) utilizando Cloudflare Workers como un proxy inverso.

Requisitos previos

• Un espacio de trabajo de Ferndesk con acceso de administrador

• Un dominio de tu propiedad (que ya apunte a Cloudflare)

• Familiaridad básica con el panel de control de Cloudflare

Paso 1: Configura la subcarpeta personalizada en Ferndesk

Primero, configura tu centro de ayuda de Ferndesk para usar una ruta de subcarpeta personalizada.

1. Inicia sesión en tu espacio de trabajo de Ferndesk, expande Help Center en la barra lateral izquierda y luego haz clic en Customize.

2. Haz clic en Custom domain

   

3. Selecciona la opción Custom sub-folder

   

4. Introduce tu dominio en el campo Domain (por ejemplo, tudominio.com).

5. Introduce la ruta de la subcarpeta deseada en el campo Subdirectory (por ejemplo, /ayuda o /docs).

6. Haz clic en Configure sub-folder.

Paso 2: Crea un Cloudflare Worker

Ahora crea un nuevo Cloudflare Worker que actuará como un proxy inverso.

1. Inicia sesión en tu panel de control de Cloudflare.

2. En BUILD → Compute & AI, navega a Workers & Pages en la barra lateral izquierda.

   

3. Haz clic en Create application en la esquina superior derecha.

   

4. En Start with Hello World!, haz clic en Get started.

   

5. Dale a tu Worker un nombre descriptivo como ferndesk-reverse-proxy y haz clic en Deploy.

   

Paso 3: Configura las rutas del Worker

Configura la regla de enrutamiento que dirige el tráfico de tu subcarpeta personalizada al Cloudflare Worker.

1. En la configuración del Worker, navega a la pestaña Settings.

   

2. Desplázate hasta Domains & Routes y haz clic en Add.

   

3. Se abrirá una ventana modal. Selecciona la opción Route.

   

4. En el menú desplegable Zone, selecciona tu dominio (por ejemplo, tudominio.com).

5. En el campo Route, introduce el patrón para la ruta de tu subcarpeta. Usa tudominio.com/ayuda para capturar todas las solicitudes a la ruta /ayuda y sus subrutas.

6. Deja Failure mode configurado como Fail closed (block) por seguridad.

7. Haz clic en Add route.

   

Paso 3b: Añadir la ruta _ferndesk

1. Desplázate hasta Domains & Routes y haz clic en Add.

   

2. Se abrirá una ventana modal. Selecciona la opción Route.

   

3. En el menú desplegable Zone, selecciona tu dominio (por ejemplo, tudominio.com).

4. En el campo Route, introduce el patrón para la ruta de tu subcarpeta. Usa tudominio.com/_ferndesk para capturar todas las solicitudes a la ruta /_ferndesk y sus subrutas.

5. Deja Failure mode configurado como Fail closed (block) por seguridad.

6. Haz clic en Add route.

   

Paso 4: Edita el código del Worker

Ahora actualiza el código del Worker para manejar la lógica del proxy inverso. El Worker interceptará las solicitudes a tu subcarpeta y las reenviará a Ferndesk.

1. Haz clic en Edit code (o accede al editor de código desde el panel del Worker).

   

2. Reemplaza todo el código de worker.js con el script del proxy inverso que aparece a continuación.

   // ONLY edit these
   
   const HELP_HOST = 'your-slug.hc.ferndesk.com'; // your Ferndesk help center host copied from your dashboard
   const PROXY_PREFIX = '/help'; // the path you want your help center to live on
   
   addEventListener('fetch', (event) => {
   	event.respondWith(handleRequest(event.request));
   });
   
   async function handleRequest(request) {
   	const originalUrl = new URL(request.url);
   
   
   	if (originalUrl.pathname.endsWith('/') && originalUrl.pathname !== '/') {
   		originalUrl.pathname = originalUrl.pathname.slice(0, -1);
   		return Response.redirect(originalUrl.toString(), 301);
   	}
   
   
   	if (
   		originalUrl.pathname !== PROXY_PREFIX &&
   		!originalUrl.pathname.startsWith(`${PROXY_PREFIX}/`) &&
   		!originalUrl.pathname.startsWith('/_ferndesk/')
   	) {
   		return fetch(request);
   	}
   
   	// Build the upstream request with the prefix removed
   	const upstreamUrl = new URL(originalUrl.toString());
   	upstreamUrl.hostname = HELP_HOST;
   
   	if (upstreamUrl.pathname === PROXY_PREFIX) {
   		upstreamUrl.pathname = '/';
   	} else if (upstreamUrl.pathname.startsWith(`${PROXY_PREFIX}/`)) {
   		upstreamUrl.pathname = upstreamUrl.pathname.slice(PROXY_PREFIX.length) || '/';
   	}
   
   	const proxyRequest = new Request(upstreamUrl.toString(), request);
   
   	// CRITICAL: Needed to resolve requests correctly
   	proxyRequest.headers.set('X-Ferndesk-Base-Path', PROXY_PREFIX);
   	proxyRequest.headers.set('X-Forwarded-Host', originalUrl.host);
   	proxyRequest.headers.set('X-Ferndesk-Original-Host', originalUrl.host);
   
   
   	return fetch(proxyRequest);
   }
   Reemplaza HELP_HOST con el dominio real de Ferndesk proporcionado al configurar tu subcarpeta personalizada. Reemplaza PROXY_PREFIX si estás usando una ruta de subcarpeta diferente (por ejemplo, /docs en lugar de /ayuda).

3. Haz clic en Deploy para publicar tus cambios.

   

Paso 5: Verifica la configuración

Comprueba que tu centro de ayuda ahora sea accesible en la ruta de tu subcarpeta personalizada.

1. Abre una nueva pestaña en el navegador y dirígete a https://tudominio.com/ayuda.

2. Deberías ver tu centro de ayuda de Ferndesk cargado con tu imagen de marca.

3. Prueba algunas páginas haciendo clic en los enlaces para asegurar que la navegación funciona correctamente.

Solución de problemas

Próximos pasos

• Más información sobre la estructura de URL del centro de ayuda y las rutas según la sección

• Conecta un dominio personalizado (subdominio) en su lugar