Pon 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 yourdomain.com/help) utilizando Cloudflare Workers como un proxy inverso.

Requisitos previos

• Un espacio de trabajo de Ferndesk con acceso de administrador

• Un dominio de tu propiedad (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 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 un proxy inverso.

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

2. Bajo BUILD → Compute & AI, navega a Workers & Pages desde 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. Ponle a tu Worker un nombre descriptivo como ferndesk-reverse-proxy y 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 Failure mode establecido 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 Failure mode establecido 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 gestionar 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. Sustituye todo el código de worker.js por el script de 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);
   }
   Sustituye HELP_HOST por el dominio real de Ferndesk proporcionado al configurar tu subcarpeta personalizada. Sustituye PROXY_PREFIX si utilizas 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

Comprueba que ahora se puede acceder a tu centro de ayuda en la ruta de tu subcarpeta personalizada.

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

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 asegurarte de que la navegación funciona correctamente.

Solución de problemas