Conecta tu centro de ayuda a una subcarpeta personalizada mediante Cloudflare

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

Prerrequisitos

• Un espacio de trabajo de Ferndesk con acceso de administrador

• Un dominio propio (ya apuntado a Cloudflare)

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

Paso 1: Configurar 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, yourdomain.com).

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

6. Haz clic en Configure sub-folder.

Paso 2: Crear un Cloudflare Worker

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

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

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

   

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

   

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

   

5. Nombra tu Worker con algo descriptivo como ferndesk-reverse-proxy, luego haz clic en Deploy.

   

Paso 3: Configurar las rutas del worker

Configura la regla de enrutamiento que dirige el tráfico desde 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, yourdomain.com).

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

6. Deja el Failure mode configurado en 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, yourdomain.com).

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

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

6. Haz clic en Add route.

   

Paso 4: Editar 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 de proxy inverso 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 cuando configuraste tu subcarpeta personalizada. Reemplaza PROXY_PREFIX si estás usando una ruta de subcarpeta diferente (por ejemplo, /docs en lugar de /help).

3. Haz clic en Deploy para publicar tus cambios.

   

Paso 5: Verificar la configuración

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

1. Abre una nueva pestaña del navegador y navega a https://yourdomain.com/help.

2. Deberías ver cargado tu centro de ayuda de Ferndesk con tu identidad visual.

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

Solución de problemas