Placez votre documentation dans un sous-dossier avec Cloudflare

Suivez ce guide pour héberger votre centre d'aide Ferndesk dans un sous-dossier personnalisé (comme yourdomain.com/help) en utilisant Cloudflare Workers comme proxy inverse.

Prérequis

• Un espace de travail Ferndesk avec un accès administrateur

• Un domaine que vous possédez (déjà pointé vers Cloudflare)

• Une familiarité de base avec le tableau de bord de Cloudflare

Étape 1 : Configurer le sous-dossier personnalisé dans Ferndesk

Tout d'abord, configurez votre centre d'aide Ferndesk pour utiliser un chemin de sous-dossier personnalisé.

1. Connectez-vous à votre espace de travail Ferndesk, développez Help Center dans la barre latérale gauche, puis cliquez sur Customize.

2. Cliquez sur Custom domain

   

3. Sélectionnez l'option Custom sub-folder

   

4. Saisissez votre domaine dans le champ Domain (par ex., yourdomain.com).

5. Saisissez le chemin du sous-dossier souhaité dans le champ Subdirectory (par ex., /help ou /docs).

6. Cliquez sur Configure sub-folder.

Étape 2 : Créer un Cloudflare Worker

Créez maintenant un nouveau Cloudflare Worker qui agira comme un proxy inverse.

1. Connectez-vous à votre tableau de bord Cloudflare.

2. Sous BUILD → Compute & AI, accédez à Workers & Pages depuis la barre latérale gauche.

   

3. Cliquez sur Create application dans le coin supérieur droit.

   

4. Sous Start with Hello World!, cliquez sur Get started.

   

5. Donnez à votre Worker un nom descriptif comme ferndesk-reverse-proxy, puis cliquez sur Deploy.

   

Étape 3 : Configurer les routes du Worker

Configurez la règle de routage qui dirige le trafic de votre sous-dossier personnalisé vers le Cloudflare Worker.

1. Dans les paramètres du Worker, accédez à l'onglet Settings.

   

2. Faites défiler jusqu'à Domains & Routes et cliquez sur Add.

   

3. Une fenêtre modale s'ouvrira. Sélectionnez l'option Route.

   

4. Dans la liste déroulante Zone, sélectionnez votre domaine (par ex., yourdomain.com).

5. Dans le champ Route, saisissez le motif du chemin de votre sous-dossier. Utilisez yourdomain.com/help pour capturer toutes les requêtes vers le chemin /help et ses sous-chemins.

6. Laissez le Failure mode réglé sur Fail closed (block) pour des raisons de sécurité.

7. Cliquez sur Add route.

   

Étape 3b : Ajouter la route _ferndesk

1. Faites défiler jusqu'à Domains & Routes et cliquez sur Add.

   

2. Une fenêtre modale s'ouvrira. Sélectionnez l'option Route.

   

3. Dans la liste déroulante Zone, sélectionnez votre domaine (par ex., yourdomain.com).

4. Dans le champ Route, saisissez le motif du chemin de votre sous-dossier. Utilisez yourdomain.com/_ferndesk pour capturer toutes les requêtes vers le chemin /_ferndesk et ses sous-chemins.

5. Laissez le Failure mode réglé sur Fail closed (block) pour des raisons de sécurité.

6. Cliquez sur Add route.

   

Étape 4 : Modifier le code du Worker

Mettez maintenant à jour le code du Worker pour gérer la logique du proxy inverse. Le Worker interceptera les requêtes vers votre sous-dossier et les transmettra à Ferndesk.

1. Cliquez sur Edit code (ou accédez à l'éditeur de code depuis le tableau de bord du Worker).

   

2. Remplacez l'intégralité du code worker.js par le script de proxy inverse ci-dessous.

   // 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);
   }
   Remplacez HELP_HOST par le domaine Ferndesk réel fourni lors de la configuration de votre sous-dossier personnalisé. Remplacez PROXY_PREFIX si vous utilisez un chemin de sous-dossier différent (par ex., /docs au lieu de /help).

3. Cliquez sur Deploy pour publier vos modifications.

   

Étape 5 : Vérifier la configuration

Vérifiez que votre centre d'aide est désormais accessible via le chemin de votre sous-dossier personnalisé.

1. Ouvrez un nouvel onglet de navigateur et accédez à https://yourdomain.com/help.

2. Vous devriez voir votre centre d'aide Ferndesk chargé avec votre image de marque.

3. Testez quelques pages en cliquant sur des liens pour vous assurer que la navigation fonctionne correctement.

Dépannage