mintlify__docs/fr/deploy/cloudflare.mdx

---
title: "Déployer sur un sous-chemin avec Cloudflare Workers"
sidebarTitle: "Cloudflare"
description: "Déployez votre documentation Mintlify sur un sous-chemin de votre domaine via Cloudflare Workers, avec configuration pas à pas et paramètres DNS."
keywords: ["Cloudflare Workers", "routage par sous-chemin", "configuration de reverse proxy", "configuration de Workers"]
boost: 3
---

import Propagating from "/snippets/fr/custom-subpath-propagating.mdx";
import SubpathSetupSteps from "/snippets/fr/subpath-setup-steps.mdx";

Pour héberger votre documentation à un sous-chemin tel que `yoursite.com/docs` via Cloudflare, vous devez créer et configurer un Cloudflare Worker.

<Info>
  Avant de commencer, vous avez besoin d’un compte Cloudflare et d’un nom de domaine (géré avec ou sans Cloudflare).
</Info>

<div id="set-your-base-path">
  ## Définir votre chemin de base
</div>

<SubpathSetupSteps />

Le Dashboard affiche un script de Cloudflare Worker avec votre sous-domaine, votre domaine et votre chemin de base déjà renseignés. Utilisez ce script à l’étape [Configurer le routage](#configure-routing) plutôt que de remplacer manuellement les valeurs de substitution dans le script d’exemple.

<div id="set-up-a-worker">
  ## Configurer un Worker
</div>

Créez un Cloudflare Worker en suivant le [guide de démarrage de Cloudflare Workers](https://developers.cloudflare.com/workers/get-started/dashboard/), si ce n’est pas déjà fait.

<Tip>
  Si votre fournisseur DNS est Cloudflare, désactivez le proxy pour l’enregistrement CNAME afin d’éviter d’éventuels problèmes de configuration.
</Tip>

<div id="proxies-with-vercel-deployments">
  ### Proxies avec des déploiements Vercel
</div>

Si vous utilisez Cloudflare comme proxy avec des déploiements Vercel, vous devez veiller à une configuration correcte pour éviter les conflits avec la vérification du domain de Vercel et l’émission des certificats SSL.

Une mauvaise configuration du proxy peut empêcher Vercel d’émettre des certificats SSL Let's Encrypt et entraîner des échecs de vérification du domain.

<div id="required-path-allowlist">
  #### Liste blanche de chemins requise
</div>

Votre Cloudflare Worker doit autoriser le trafic vers ces chemins spécifiques sans le bloquer ni le rediriger :

- `/.well-known/acme-challenge/*` - Requis pour la vérification de certificat Let's Encrypt
- `/.well-known/vercel/*` - Requis pour la vérification de domain Vercel

Bien que Cloudflare gère automatiquement de nombreuses règles de vérification, la création de règles personnalisées supplémentaires peut, par inadvertance, bloquer ce trafic essentiel.

<div id="header-forwarding-requirements">
  #### Exigences de transfert des en-têtes
</div>

Assurez-vous que votre Worker définit l’en-tête `Host` sur votre cible `<subdomain>.mintlify.site`, comme illustré dans le script d’exemple, plutôt que de transmettre l’en-tête `Host` de la requête d’origine. Des en-têtes `Host` incorrects entraînent l’échec des requêtes de vérification.

<div id="configure-routing">
  ### Configurer le routage
</div>

Dans votre Dashboard Cloudflare, sélectionnez **Edit Code** et ajoutez le script depuis votre page [Configuration du domaine personnalisé](https://app.mintlify.com/settings/deployment/custom-domain), dans laquelle vos valeurs sont déjà renseignées, ou copiez le script d’exemple suivant. Consultez la [documentation Cloudflare](https://developers.cloudflare.com/workers-ai/get-started/dashboard/#development) pour plus d&#39;informations sur la modification d&#39;un Worker.

<Tip>
  Remplacez `[SUBDOMAIN]` par votre sous-domaine unique, `[YOUR_DOMAIN]` par l&#39;URL de base de votre site, et `/docs` par le sous-chemin souhaité, s&#39;il est différent.
</Tip>

```javascript
addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  try {
    const urlObject = new URL(request.url);
    
    // Si la requête concerne un chemin de vérification Vercel, la laisser passer
    if (urlObject.pathname.startsWith('/.well-known/')) {
      return await fetch(request);
    }
    
    // Si la requête concerne le sous-chemin docs
    if (/^\/docs/.test(urlObject.pathname)) {
      // Alors rediriger via proxy vers Mintlify
      const DOCS_URL = "[SUBDOMAIN].mintlify.site";
      const CUSTOM_URL = "[YOUR_DOMAIN]";

      let url = new URL(request.url);
      url.hostname = DOCS_URL;

      let proxyRequest = new Request(url, request);

      proxyRequest.headers.set("Host", DOCS_URL);
      proxyRequest.headers.set("X-Forwarded-Host", CUSTOM_URL);
      proxyRequest.headers.set("X-Forwarded-Proto", "https");
      // Si déploiement sur Vercel, conserver l'IP du client
      proxyRequest.headers.set("CF-Connecting-IP", request.headers.get("CF-Connecting-IP"));

      return await fetch(proxyRequest);
    }
  } catch (error) {
    // Si aucune action trouvée, exécuter la requête normale
    return await fetch(request);
  }
}
```

Cliquez sur **Deploy** et attendez que les modifications se propagent.

<Propagating />


<div id="test-your-worker">
  ### Testez votre Worker
</div>

Après le déploiement de votre code, testez votre Worker pour vérifier qu’il redirige vers votre documentation Mintlify.

1. Testez en utilisant l’URL d’aperçu du Worker : `your-worker.your-subdomain.workers.dev/docs`
2. Vérifiez que le Worker redirige vers votre documentation Mintlify et votre site web.

<div id="add-custom-domain">
  ### Ajouter un domaine personnalisé
</div>

1. Dans votre [Dashboard Cloudflare](https://dash.cloudflare.com/), accédez à votre Worker.
2. Allez dans **Settings > Domains & Routes > Add > Custom Domain**.
3. Ajoutez votre domaine. 

<Tip>
  Ajoutez votre domaine avec et sans le préfixe `www.`.
</Tip>

Consultez [Add a custom domain](https://developers.cloudflare.com/workers/configuration/routing/custom-domains/#add-a-custom-domain) dans la documentation Cloudflare pour en savoir plus. 

<div id="resolve-dns-conflicts">
  ### Résoudre les conflits DNS
</div>

Si votre domaine pointe déjà vers un autre service, vous devez supprimer l’enregistrement DNS existant. Votre Cloudflare Worker doit être configuré pour gérer l’ensemble du trafic de votre domaine.

1. Supprimez l’enregistrement DNS existant pour votre domaine. Consultez la section [Delete DNS records](https://developers.cloudflare.com/dns/manage-dns-records/how-to/create-dns-records/#delete-dns-records) de la documentation Cloudflare pour plus d’informations.
2. Retournez à votre Worker et ajoutez votre domaine personnalisé.

<div id="webflow-custom-routing">
  ## Routage personnalisé avec Webflow
</div>

Si vous utilisez Webflow pour héberger votre site principal et que vous souhaitez servir la documentation Mintlify à `/docs` sur le même domaine, vous devrez configurer un routage personnalisé via Cloudflare Workers pour faire transiter (proxy) tout le trafic non lié à la documentation vers votre site principal.

<Warning>
  Configurez votre site principal sur une page d’atterrissage avant de déployer ce Worker, sinon les visiteurs de votre site principal pourraient voir des erreurs.
</Warning>

1. Dans Webflow, configurez une page d’atterrissage pour votre site principal, par exemple `landing.yoursite.com`. C’est la page que les visiteurs voient lorsqu’ils visitent votre site.
2. Déployez votre site principal sur la page d’atterrissage. Cela garantit que votre site principal reste accessible pendant que vous configurez le Worker.
3. Pour éviter les conflits, mettez à jour toutes les URL absolues de votre site principal pour qu’elles soient relatives.
4. Dans Cloudflare, sélectionnez **Edit Code** et ajoutez le script suivant dans le code de votre Worker.

<Tip> Remplacez `[SUBDOMAIN]` par votre sous-domaine unique, `[YOUR_DOMAIN]` par l’URL de base de votre site web, `[LANDING_DOMAIN]` par l’URL de votre page d’atterrissage, et `/docs` par le sous-chemin souhaité si différent. </Tip>

```javascript
  addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
  });
  async function handleRequest(request) {
  try {
    const urlObject = new URL(request.url);
    
    // Si la requête concerne un chemin de vérification Vercel, la laisser passer
    if (urlObject.pathname.startsWith('/.well-known/')) {
      return await fetch(request);
    }
    
    // Si la requête concerne le sous-chemin docs
    if (/^\/docs/.test(urlObject.pathname)) {
      // Proxy vers Mintlify
      const DOCS_URL = "[SUBDOMAIN].mintlify.site";
      const CUSTOM_URL = "[YOUR_DOMAIN]";
      let url = new URL(request.url);
      url.hostname = DOCS_URL;
      let proxyRequest = new Request(url, request);
      proxyRequest.headers.set("Host", DOCS_URL);
      proxyRequest.headers.set("X-Forwarded-Host", CUSTOM_URL);
      proxyRequest.headers.set("X-Forwarded-Proto", "https");
      // En cas de déploiement sur Vercel, préserver l'IP du client
      proxyRequest.headers.set("CF-Connecting-IP", request.headers.get("CF-Connecting-IP"));
      return await fetch(proxyRequest);
    }
    // Rediriger tout le reste vers le site principal
    const MAIN_SITE_URL = "[LANDING_DOMAIN]";
    if (MAIN_SITE_URL && MAIN_SITE_URL !== "[LANDING_DOMAIN]") {
      let mainSiteUrl = new URL(request.url);
      mainSiteUrl.hostname = MAIN_SITE_URL;
      return await fetch(mainSiteUrl, {
        method: request.method,
        headers: request.headers,
        body: request.body
      });
    }
  } catch (error) {
    // Si aucune action n'est trouvée, servir la requête normale
    return await fetch(request);
  }
  }
```

5. Sélectionnez **Deploy** et attendez que les modifications se propagent.

<Propagating />