Verbinden Sie Ihr Help Center über Cloudflare mit einem benutzerdefinierten Unterordner

Folgen Sie dieser Anleitung, um Ihr Ferndesk Help Center in einem benutzerdefinierten Unterordner (wie ihredomain.com/help) zu hosten, indem Sie Cloudflare Workers als Reverse Proxy verwenden.

Voraussetzungen

• Ein Ferndesk Workspace mit Admin-Zugriff

• Eine Domain in Ihrem Besitz (bereits auf Cloudflare verwiesen)

• Grundlegende Vertrautheit mit dem Cloudflare-Dashboard

Schritt 1: Einrichten des benutzerdefinierten Unterordners in Ferndesk

Konfigurieren Sie zunächst Ihr Ferndesk Help Center so, dass es einen Pfad für einen benutzerdefinierten Unterordner verwendet.

1. Melden Sie sich in Ihrem Ferndesk Workspace an, klappen Sie Help Center in der linken Seitenleiste aus und klicken Sie dann auf Customize.

2. Klicken Sie auf Custom domain

   

3. Wählen Sie die Option Custom sub-folder

   

4. Geben Sie Ihre Domain in das Feld Domain ein (z. B. ihredomain.com).

5. Geben Sie den gewünschten Unterordner-Pfad in das Feld Subdirectory ein (z. B. /help oder /docs).

6. Klicken Sie auf Configure sub-folder.

Schritt 2: Erstellen eines Cloudflare Workers

Erstellen Sie nun einen neuen Cloudflare Worker, der als Reverse Proxy fungiert.

1. Melden Sie sich in Ihrem Cloudflare-Dashboard an.

2. Navigieren Sie unter BUILD → Compute & AI in der linken Seitenleiste zu Workers & Pages.

   

3. Klicken Sie oben rechts auf Create application.

   

4. Klicken Sie unter Start with Hello World! auf Get started.

   

5. Geben Sie Ihrem Worker einen aussagekräftigen Namen wie ferndesk-reverse-proxy und klicken Sie dann auf Deploy.

   

Schritt 3: Konfigurieren der Worker-Routen

Richten Sie die Routing-Regel ein, die den Datenverkehr von Ihrem benutzerdefinierten Unterordner an den Cloudflare Worker leitet.

1. Navigieren Sie in den Worker-Einstellungen zur Registerkarte Settings.

   

2. Scrollen Sie zu Domains & Routes und klicken Sie auf Add.

   

3. Ein modales Fenster öffnet sich. Wählen Sie die Option Route.

   

4. Wählen Sie im Dropdown-Menü Zone Ihre Domain aus (z. B. ihredomain.com).

5. Geben Sie im Feld Route das Muster für Ihren Unterordner-Pfad ein. Verwenden Sie ihredomain.com/help, um alle Anfragen an den Pfad /help und dessen Unterpfade zu erfassen.

6. Lassen Sie den Failure mode aus Sicherheitsgründen auf Fail closed (block) eingestellt.

7. Klicken Sie auf Add route.

   

Schritt 3b: Hinzufügen der _ferndesk-Route

1. Scrollen Sie zu Domains & Routes und klicken Sie auf Add.

   

2. Ein modales Fenster öffnet sich. Wählen Sie die Option Route.

   

3. Wählen Sie im Dropdown-Menü Zone Ihre Domain aus (z. B. ihredomain.com).

4. Geben Sie im Feld Route das Muster für Ihren Unterordner-Pfad ein. Verwenden Sie ihredomain.com/_ferndesk, um alle Anfragen an den Pfad /_ferndesk und dessen Unterpfade zu erfassen.

5. Lassen Sie den Failure mode aus Sicherheitsgründen auf Fail closed (block) eingestellt.

6. Klicken Sie auf Add route.

   

Schritt 4: Bearbeiten des Worker-Codes

Aktualisieren Sie nun den Worker-Code, um die Reverse-Proxy-Logik zu implementieren. Der Worker fängt Anfragen an Ihren Unterordner ab und leitet sie an Fern weiter.

1. Klicken Sie auf Edit code (oder rufen Sie den Code-Editor über das Worker-Dashboard auf).

   

2. Ersetzen Sie den gesamten Code in worker.js durch das unten stehende Reverse-Proxy-Skript.

   // 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);
   }
   Ersetzen Sie HELP_HOST durch die tatsächliche Ferndesk-Domain, die Ihnen bei der Konfiguration Ihres Unterordners mitgeteilt wurde. Ersetzen Sie PROXY_PREFIX, falls Sie einen anderen Pfad verwenden (z. B. /docs statt /help).

3. Klicken Sie auf Deploy, um Ihre Änderungen zu veröffentlichen.

   

Schritt 5: Einrichtung überprüfen

Testen Sie, ob Ihr Help Center nun unter dem Pfad Ihres benutzerdefinierten Unterordners erreichbar ist.

1. Öffnen Sie einen neuen Browser-Tab und navigieren Sie zu https://ihredomain.com/help.

2. Sie sollten sehen, dass Ihr Ferndesk Help Center mit Ihrem Branding geladen wird.

3. Testen Sie einige Seiten, indem Sie auf Links klicken, um sicherzustellen, dass die Navigation korrekt funktioniert.

Fehlerbehebung