> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-add-hello-world-quickstart-48843.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# AWS Route 53 et CloudFront

> Héberger la documentation sur un sous-chemin personnalisé avec les services AWS

Pour héberger votre documentation à un sous-chemin personnalisé comme `yoursite.com/docs` avec AWS Route 53 et CloudFront, vous devez configurer votre fournisseur DNS pour qu’il pointe vers votre distribution CloudFront.

<div id="repository-structure">
  ## Structure du dépôt
</div>

Organisez les fichiers de votre documentation dans votre dépôt pour respecter la structure de sous-chemin choisie. Par exemple, si vous souhaitez que votre documentation soit disponible à l’adresse `yoursite.com/docs`, créez un répertoire `docs/` contenant tous vos fichiers de documentation.

<div id="high-level-overview">
  ## Vue d’ensemble
</div>

Dirigez le trafic vers ces chemins avec une stratégie de cache **CachingDisabled** :

* `/.well-known/acme-challenge/*` - Requis pour la vérification de certificat Let's Encrypt
* `/.well-known/vercel/*` - Requis pour la vérification de domaine
* `/docs/*` - Requis pour le routage par sous-chemin
* `/docs/` - Requis pour le routage par sous-chemin

Dirigez le trafic vers ce chemin avec une stratégie de cache **CachingEnabled** :

* `/mintlify-assets/_next/static/*`
* `Default (*)` - Page d’accueil de votre site

Tous les comportements doivent utiliser une **origin request policy** `AllViewerExceptHostHeader`.

<img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/all-behaviors.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=e30a262b0a0dfdf76532418240c549a3" alt="Page « Behaviors » de CloudFront avec 4 comportements : /docs/*, /docs, Default, et /.well-known/*." width="1603" height="365" data-path="images/cloudfront/all-behaviors.png" />

<div id="create-cloudfront-distribution">
  ## Créer une distribution CloudFront
</div>

1. Accédez à [CloudFront](https://aws.amazon.com/cloudfront) dans la console AWS.
2. Sélectionnez **Create distribution**.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/create-distribution.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=1c5c069a77bd9a52a2c5d36015a4a646" alt="Page des distributions CloudFront avec le bouton « Create distribution » mis en évidence." width="3024" height="922" data-path="images/cloudfront/create-distribution.png" />
</Frame>

3. Pour le domaine d’origine, saisissez `[SUBDOMAIN].mintlify.dev`, où `[SUBDOMAIN]` correspond au sous-domaine unique de votre projet.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/origin-name.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=095d6f83a8e858368d8e668fb901fc98" alt="Page « Create distribution » de CloudFront affichant « acme.mintlify.dev » comme domaine d’origine." width="1495" height="1036" data-path="images/cloudfront/origin-name.png" />
</Frame>

4. Pour « Web Application Firewall (WAF) », activez les protections de sécurité.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/enable-security-protections.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=6caec69332d0eed09a66b9306e86e941" alt="Options du Web Application Firewall (WAF) avec « Enable security protections » sélectionné." width="1482" height="877" data-path="images/cloudfront/enable-security-protections.png" />
</Frame>

5. Laissez les autres paramètres par défaut.
6. Sélectionnez **Create distribution**.

<div id="add-default-origin">
  ## Ajouter une origine par défaut
</div>

1. Après avoir créé la distribution, accédez à l’onglet « Origins ».

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/origins.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=cdf398b57c5b43dbf19d1049bc1cf3a4" alt="Une distribution CloudFront avec l’onglet « Origins » mis en évidence." width="3024" height="1466" data-path="images/cloudfront/origins.png" />
</Frame>

2. Recherchez l’URL de préproduction qui reflète votre domaine principal. Cela varie fortement selon l’hébergeur de votre page d’accueil. Par exemple, l’URL de préproduction de Mintlify est [mintlify-landing-page.vercel.app](https://mintlify-landing-page.vercel.app).

<Info>
  Si votre page d’accueil est hébergée sur Webflow, utilisez l’URL de préproduction de Webflow. Elle ressemble à `.webflow.io`.

  Si vous utilisez Vercel, utilisez le domaine `.vercel.app` disponible pour chaque projet.
</Info>

3. Créez une nouvelle origine et ajoutez votre URL de préproduction dans le champ « Origin domain ».

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/default-origin.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=a48de02b7cda4d7676eab72ba7ade94c" alt="Page CloudFront « Create origin » avec le champ de saisie « Origin domain » mis en évidence." width="3024" height="1332" data-path="images/cloudfront/default-origin.png" />
</Frame>

À ce stade, vous devriez avoir deux origines : une avec `[SUBDOMAIN].mintlify.app` et une autre avec votre URL de préproduction.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/final-origins.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=86d0dab4240f0a638ee4151d5563455f" alt="Page CloudFront « Origins » avec deux origines : une pour mintlify et une autre pour mintlify-landing-page." width="1230" height="690" data-path="images/cloudfront/final-origins.png" />
</Frame>

<div id="set-behaviors">
  ## Configurer les comportements
</div>

Les comportements dans CloudFront permettent de contrôler la logique des sous-chemins. Globalement, nous voulons mettre en place la logique suivante :

* **Si un utilisateur arrive sur votre sous-chemin personnalisé**, rediriger vers `[SUBDOMAIN].mintlify.dev`.
* **Si un utilisateur arrive sur une autre page**, rediriger vers la page d’accueil actuelle.

1. Accédez à l’onglet « Behaviors » de votre distribution CloudFront.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/behaviors.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=f887085273fa413c7a404911abc1a6fb" alt="Onglet « Behaviors » de CloudFront mis en évidence." width="3024" height="1384" data-path="images/cloudfront/behaviors.png" />
</Frame>

2. Cliquez sur le bouton **Create behavior** et créez les comportements suivants.

<div id="well-known">
  ### `/.well-known/*`
</div>

Créez des comportements pour les chemins de vérification de domaine Vercel avec un **Path pattern** `/.well-known/*` et définissez **Origin and origin groups** sur l’URL de votre documentation.

Pour « Cache policy », sélectionnez **CachingDisabled** afin de garantir que ces requêtes de vérification passent sans mise en cache.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/well-known-policy.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=549a7c386ded770c255f8f8289fe6b5f" alt="Page CloudFront « Create behavior » avec un « Path pattern » de « /.well-known/* » et « Origin and origin groups » pointant vers l’URL de staging." width="1413" height="1098" data-path="images/cloudfront/well-known-policy.png" />
</Frame>

<Info>
  Si `/.well-known/*` est trop générique, vous pouvez le restreindre à au moins 2 comportements pour Vercel :

  * `/.well-known/vercel/*` — requis pour la vérification de domaine Vercel
  * `/.well-known/acme-challenge/*` — requis pour la vérification de certificat Let’s Encrypt
</Info>

<div id="your-custom-subpath">
  ### Votre sous-chemin personnalisé
</div>

Créez un comportement avec un **Path pattern** correspondant au sous-chemin de votre choix, par exemple `/docs`, avec **Origin and origin groups** pointant vers l’URL `.mintlify.dev` (dans notre cas `acme.mintlify.dev`).

* Définissez "Cache policy" sur **CachingOptimized**.
* Définissez "Origin request policy" sur **AllViewerExceptHostHeader**.
* Définissez "Viewer Protocol Policy" sur **Redirect HTTP to HTTPS**.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/behavior-1.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=fd3ebd9f13c5e37742917a83c9391667" alt="Page CloudFront &#x22;Create behavior&#x22; avec un &#x22;Path pattern&#x22; de &#x22;/docs/*&#x22; et &#x22;Origin and origin groups&#x22; pointant vers l’URL acme.mintlify.dev." width="1520" height="1117" data-path="images/cloudfront/behavior-1.png" />
</Frame>

<div id="your-custom-subpath-with-wildcard">
  ### Votre sous-chemin personnalisé avec caractère générique
</div>

Créez un comportement avec un **Path pattern** correspondant au sous-chemin de votre choix suivi de `/*`, par exemple `/docs/*`, et des **Origin and origin groups** pointant vers la même URL `.mintlify.dev`.

Ces paramètres doivent correspondre exactement au comportement de votre sous-chemin de base, à l’exception du **Path pattern**.

* Définissez « Cache policy » sur **CachingOptimized**.
* Définissez « Origin request policy » sur **AllViewerExceptHostHeader**.
* Définissez « Viewer protocol policy » sur **Redirect HTTP to HTTPS**

<div id="mintlify-assets_nextstatic">
  ### `/mintlify-assets/_next/static/*`
</div>

* Définissez la « Cache policy » sur **CachingOptimized**
* Définissez la « Origin request policy » sur **AllViewerExceptHostHeader**
* Définissez la « Viewer protocol policy » sur **Redirect HTTP to HTTPS**

<div id="default">
  ### `Default (*)`
</div>

Enfin, nous allons modifier le comportement `Default (*)`.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/default-behavior-1.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=bd401ab18e551c35f650b444498bce7a" alt="Une distribution CloudFront avec le comportement « Default (*) » sélectionné et le bouton Edit mis en évidence." width="3024" height="1406" data-path="images/cloudfront/default-behavior-1.png" />
</Frame>

1. Dans le comportement par défaut, remplacez **Origin and origin groups** par l’URL de préproduction (dans notre cas `mintlify-landing-page.vercel.app`).

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/default-behavior-2.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=de5b42ed983413c3af664888dd941f7f" alt="Page CloudFront « Edit behavior » avec le champ de saisie « Origin and origin groups » mis en évidence." width="3024" height="1298" data-path="images/cloudfront/default-behavior-2.png" />
</Frame>

2. Sélectionnez **Save changes**.

<div id="check-behaviors-are-set-up-correctly">
  ### Vérifiez que les comportements sont correctement configurés
</div>

Si vous suivez les étapes ci-dessus, vos comportements devraient ressembler à ceci :

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/all-behaviors.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=e30a262b0a0dfdf76532418240c549a3" alt="Page CloudFront « Behaviors » avec 4 comportements : /docs/*, /docs, Default et /.well-known/*." width="1603" height="365" data-path="images/cloudfront/all-behaviors.png" />
</Frame>

<div id="preview-distribution">
  ## Prévisualiser la distribution
</div>

Vous pouvez maintenant vérifier que votre distribution est correctement configurée en accédant à l’onglet « General » et en ouvrant l’URL **Distribution domain name**.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/preview-distribution.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=d53e8b23ea052af63c71427f296b9c7d" alt="Onglet CloudFront « General » avec l’URL « Distribution domain name » mise en évidence." width="3024" height="1394" data-path="images/cloudfront/preview-distribution.png" />
</Frame>

Toutes les pages devraient pointer vers votre page d’accueil principale. En revanche, si vous ajoutez le sous-chemin que vous avez choisi, par exemple `/docs`, à l’URL, vous devriez être redirigé vers votre instance de documentation Mintlify.

<div id="connect-with-route53">
  ## Connecter Route53
</div>

Nous allons maintenant associer la distribution CloudFront à votre domaine principal.

<Note>
  Pour cette section, vous pouvez également consulter le guide officiel d’AWS sur la [configuration
  d’Amazon Route 53 pour acheminer le trafic vers une distribution
  CloudFront](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/routing-to-cloudfront-distribution.html#routing-to-cloudfront-distribution-config)
</Note>

1. Accédez à [Route53](https://aws.amazon.com/route53) dans la console AWS.
2. Accédez à la « Hosted zone » de votre domaine principal.
3. Sélectionnez **Create record**.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/route53-create-record.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=7f982aa32f6c9c742d99c4d2159e5a7c" alt="Page « Records » de Route 53 avec le bouton « Create record » mis en évidence." width="1540" height="1238" data-path="images/cloudfront/route53-create-record.png" />
</Frame>

4. Activez `Alias`, puis, dans **Route traffic to**, choisissez l’option `Alias to CloudFront distribution`.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-hello-world-quickstart-48843/FYO7l_4g6ReiCSAk/images/cloudfront/create-record-alias.png?fit=max&auto=format&n=FYO7l_4g6ReiCSAk&q=85&s=1a243f0ba6cba3700589d3fa255af20b" alt="Page « Create record » de Route 53 avec l’interrupteur « Alias » et le menu « Route traffic to » mis en évidence." width="3024" height="1494" data-path="images/cloudfront/create-record-alias.png" />
</Frame>

5. Sélectionnez **Create records**.

<Note>
  Vous devrez peut-être supprimer l’enregistrement A existant s’il y en a un.
</Note>

Votre documentation est maintenant en ligne au sous-chemin choisi pour votre domaine principal.

<Note>
  Après avoir configuré votre DNS, les sous-domaines personnalisés sont généralement disponibles en quelques minutes. La propagation du DNS peut parfois prendre 1 à 4 heures, et dans de rares cas jusqu’à 48 heures. Si votre sous-domaine n’est pas immédiatement disponible, veuillez patienter avant d’entreprendre tout dépannage.
</Note>