Connectez votre centre d'aide à un sous-dossier personnalisé avec Cloudflare

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

Prérequis

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

• Un domaine qui vous appartient (déjà pointé vers Cloudflare)

• Une connaissance de base du tableau de bord 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 exemple, votredomaine.com).

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

6. Cliquez sur Configure sub-folder.

Étape 2 : Créer un Cloudflare Worker

Créez maintenant un nouveau Cloudflare Worker qui fera office de proxy inverse.

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

2. Sous BUILD → Compute & AI, naviguez vers Workers & Pages dans 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 le menu déroulant Zone, sélectionnez votre domaine (par exemple, votredomaine.com).

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

6. Laissez le Failure mode sur Fail closed (block) par 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 le menu déroulant Zone, sélectionnez votre domaine (par exemple, votredomaine.com).

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

5. Laissez le Failure mode sur Fail closed (block) par 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 exemple, /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 dans votre navigateur et accédez à https://votredomaine.com/help.

2. Vous devriez voir votre centre d'aide Ferndesk s'afficher avec votre image de marque.

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

Dépannage