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

# AWS Route 53 y CloudFront

> Aloja la documentación en una subruta personalizada con servicios de AWS

Para alojar tu documentación en una subruta personalizada como `yoursite.com/docs` con AWS Route 53 y CloudFront, debes configurar tu proveedor de DNS para que apunte a tu distribución de CloudFront.

<div id="repository-structure">
  ## Estructura del repositorio
</div>

Los archivos de documentación deben organizarse en tu repositorio para ajustarse a la estructura de subruta que elijas. Por ejemplo, si quieres que tu documentación esté en `yoursite.com/docs`, crea un directorio `docs/` con todos tus archivos de documentación.

<div id="high-level-overview">
  ## Descripción general
</div>

Encamina el tráfico a estas rutas con una política de caché **CachingDisabled**:

* `/.well-known/acme-challenge/*` - Requerido para la verificación de certificados de Let's Encrypt
* `/.well-known/vercel/*` - Requerido para la verificación de dominio
* `/docs/*` - Requerido para el enrutamiento por subruta
* `/docs/` - Requerido para el enrutamiento por subruta

Encamina el tráfico a esta ruta con una política de caché **CachingEnabled**:

* `/mintlify-assets/_next/static/*`
* `Default (*)` - La página de inicio de tu sitio web

Todos los comportamientos deben tener una **política de solicitud de origen** de `AllViewerExceptHostHeader`.

<img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/all-behaviors.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=ae3d91ce2f228ce77366ab80f532a8f4" alt="CloudFront &#x22;Behaviors&#x22; page with 4 behaviors: /docs/*, /docs, Default, and /.well-known/*." width="1603" height="365" data-path="images/cloudfront/all-behaviors.png" />

<div id="create-cloudfront-distribution">
  ## Crear una distribución de CloudFront
</div>

1. Ve a [CloudFront](https://aws.amazon.com/cloudfront) en la consola de AWS.
2. Selecciona **Create distribution**.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/create-distribution.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=70502206d609d3ed05f453460283dc96" alt="Página de CloudFront Distributions con el botón &#x22;Create distribution&#x22; resaltado." width="3024" height="922" data-path="images/cloudfront/create-distribution.png" />
</Frame>

3. En Origin domain, ingresa `[SUBDOMAIN].mintlify.dev`, donde `[SUBDOMAIN]` es el subdominio único de tu proyecto.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/origin-name.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=aafc3f1d757530a846909609e86caa1c" alt="Página de CloudFront &#x22;Create distribution&#x22; que muestra &#x22;acme.mintlify.dev&#x22; como el dominio de origen." width="1495" height="1036" data-path="images/cloudfront/origin-name.png" />
</Frame>

4. En "Web Application Firewall (WAF)", habilita las protecciones de seguridad.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/enable-security-protections.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=93ff6b140c63f4d66ac8b2c24927c1b8" alt="Opciones de Web Application Firewall (WAF) con &#x22;Enable security protections&#x22; seleccionado." width="1482" height="877" data-path="images/cloudfront/enable-security-protections.png" />
</Frame>

5. Deja el resto de la configuración con los valores predeterminados.
6. Selecciona **Create distribution**.

<div id="add-default-origin">
  ## Agregar origen predeterminado
</div>

1. Después de crear la distribución, ve a la pestaña "Origins".

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/origins.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=062584454a6bea505cacb79b0bf0125f" alt="Una distribución de CloudFront con la pestaña &#x22;Origins&#x22; resaltada." width="3024" height="1466" data-path="images/cloudfront/origins.png" />
</Frame>

2. Busca la URL de staging que refleje el dominio principal. Esto varía mucho según cómo esté alojada tu landing page. Por ejemplo, la URL de staging de Mintlify es [mintlify-landing-page.vercel.app](https://mintlify-landing-page.vercel.app).

<Info>
  Si tu landing page está alojada en Webflow, usa la URL de staging de Webflow. Se verá como `.webflow.io`.

  Si usas Vercel, utiliza el dominio `.vercel.app` disponible para cada proyecto.
</Info>

3. Crea un nuevo Origin y agrega tu URL de staging como el "Origin domain".

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/default-origin.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=4765dfdf6c7ebbc79837f19535c53014" alt="Página de CloudFront &#x22;Create origin&#x22; con el campo de entrada &#x22;Origin domain&#x22; resaltado." width="3024" height="1332" data-path="images/cloudfront/default-origin.png" />
</Frame>

A este punto, deberías tener dos Origins: uno con `[SUBDOMAIN].mintlify.app` y otro con tu URL de staging.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/final-origins.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=dd00ae2b8169ae020f8997e079f4e4b8" alt="Página de CloudFront &#x22;Origins&#x22; con dos orígenes: uno para mintlify y otro para mintlify-landing-page." width="1230" height="690" data-path="images/cloudfront/final-origins.png" />
</Frame>

<div id="set-behaviors">
  ## Configurar comportamientos
</div>

Los comportamientos en CloudFront permiten controlar la lógica de subrutas. A alto nivel, queremos crear la siguiente lógica:

* **Si un usuario llega a tu subruta personalizada**, ir a `[SUBDOMAIN].mintlify.dev`.
* **Si un usuario llega a cualquier otra página**, ir a la página de inicio actual.

1. Navega a la pestaña "Behaviors" de tu distribución de CloudFront.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/behaviors.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=d11abe485a8aee58bf85def851a473ce" alt="Pestaña &#x22;Behaviors&#x22; de CloudFront resaltada." width="3024" height="1384" data-path="images/cloudfront/behaviors.png" />
</Frame>

2. Selecciona el botón **Create behavior** y crea los siguientes comportamientos.

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

Crea comportamientos para las rutas de verificación de dominios de Vercel con un **Patrón de ruta** `/.well-known/*` y configura **Origin and origin groups** a la URL de tu documentación.

Para "Cache policy", selecciona **CachingDisabled** para que estas solicitudes de verificación pasen sin caché.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/well-known-policy.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=b050b478338871f1239dec0e4401eab0" alt="Página de CloudFront &#x22;Create behavior&#x22; con un &#x22;Path pattern&#x22; de &#x22;/.well-known/*&#x22; y &#x22;Origin and origin groups&#x22; apuntando a la URL de staging." width="1413" height="1098" data-path="images/cloudfront/well-known-policy.png" />
</Frame>

<Info>
  Si `.well-known/*` es demasiado genérico, puedes reducirlo a un mínimo de 2 comportamientos para Vercel:

  * `/.well-known/vercel/*` - Requerido para la verificación de dominios de Vercel
  * `/.well-known/acme-challenge/*` - Requerido para la verificación de certificados de Let's Encrypt
</Info>

<div id="your-custom-subpath">
  ### Tu subruta personalizada
</div>

Crea un comportamiento con un **Patrón de ruta** de la subruta que elijas, por ejemplo `/docs`, con **Origen y grupos de origen** apuntando a la URL `.mintlify.dev` (en nuestro caso `acme.mintlify.dev`).

* Configura "Cache policy" en **CachingOptimized**.
* Configura "Origin request policy" en **AllViewerExceptHostHeader**.
* Configura "Viewer Protocol Policy" en **Redirect HTTP to HTTPS**.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/behavior-1.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=55a18d8d843564662f2e73234b02a6cc" alt="Página de CloudFront &#x22;Create behavior&#x22; con un &#x22;Path pattern&#x22; de &#x22;/docs/*&#x22; y &#x22;Origin and origin groups&#x22; apuntando a la URL acme.mintlify.dev." width="1520" height="1117" data-path="images/cloudfront/behavior-1.png" />
</Frame>

<div id="your-custom-subpath-with-wildcard">
  ### Tu subruta personalizada con comodín
</div>

Crea un comportamiento con un **patrón de ruta** de la subruta que elijas seguida de `/*`, por ejemplo `/docs/*`, y **origen y grupos de origen** que apunten a la misma URL `.mintlify.dev`.

Estos ajustes deben coincidir exactamente con el comportamiento de tu subruta base, con la excepción del **patrón de ruta**.

* Configura "Cache policy" como **CachingOptimized**.
* Configura "Origin request policy" como **AllViewerExceptHostHeader**.
* Configura "Viewer protocol policy" como **Redirect HTTP to HTTPS**.

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

* Establece la "Cache policy" en **CachingOptimized**
* Establece la "Origin request policy" en **AllViewerExceptHostHeader**
* Establece la "Viewer protocol policy" en **Redirect HTTP to HTTPS**

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

Por último, vamos a editar el comportamiento `Default (*)`.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/default-behavior-1.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=20176df8a307ca63ee902bff0ef82967" alt="Una distribución de CloudFront con el comportamiento &#x22;Default (*)&#x22; seleccionado y el botón Edit destacado." width="3024" height="1406" data-path="images/cloudfront/default-behavior-1.png" />
</Frame>

1. Cambia **Origin and origin groups** del comportamiento predeterminado a la URL de staging (en nuestro caso, `mintlify-landing-page.vercel.app`).

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/default-behavior-2.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=15e707414b4860e8dff0d478f75d0225" alt="Página de CloudFront &#x22;Edit behavior&#x22; con el campo de entrada &#x22;Origin and origin groups&#x22; resaltado." width="3024" height="1298" data-path="images/cloudfront/default-behavior-2.png" />
</Frame>

2. Selecciona **Save changes**.

<div id="check-behaviors-are-set-up-correctly">
  ### Verifica que los comportamientos estén configurados correctamente
</div>

Si sigues los pasos anteriores, tus comportamientos deberían verse así:

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/all-behaviors.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=ae3d91ce2f228ce77366ab80f532a8f4" alt="Página de CloudFront &#x22;Behaviors&#x22; con 4 comportamientos: /docs/*, /docs, Default y /.well-known/*." width="1603" height="365" data-path="images/cloudfront/all-behaviors.png" />
</Frame>

<div id="preview-distribution">
  ## Vista previa de la distribución
</div>

Ahora puedes comprobar si tu distribución está configurada correctamente yendo a la pestaña "General" y visitando la URL de **Distribution domain name**.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/preview-distribution.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=c753d6a5c240a3ea471a24582fb16530" alt="Pestaña &#x22;General&#x22; de CloudFront con la URL de &#x22;Distribution domain name&#x22; resaltada." width="3024" height="1394" data-path="images/cloudfront/preview-distribution.png" />
</Frame>

Todas las páginas deberían redirigir a tu página principal, pero si añades la subruta que elegiste, por ejemplo `/docs`, a la URL, deberías ver que te lleva a tu instancia de documentación de Mintlify.

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

Ahora vamos a llevar la funcionalidad de la distribución de CloudFront a tu dominio principal.

<Note>
  Para esta sección, también puedes consultar la guía oficial de AWS sobre [Configurar
  Amazon Route 53 para enrutar tráfico a una
  distribución de CloudFront](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/routing-to-cloudfront-distribution.html#routing-to-cloudfront-distribution-config)
</Note>

1. Ve a [Route53](https://aws.amazon.com/route53) en la consola de AWS.
2. Entra en la “Hosted zone” de tu dominio principal.
3. Selecciona **Create record**.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/route53-create-record.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=0d0b66331853d5e22caceca33c93b2c3" alt="Página “Records” de Route 53 con el botón “Create record” resaltado." width="1540" height="1238" data-path="images/cloudfront/route53-create-record.png" />
</Frame>

4. Activa `Alias` y luego, en **Route traffic to**, selecciona la opción `Alias to CloudFront distribution`.

<Frame>
  <img src="https://mintcdn.com/mintlify-mintlify-add-i-to-quickstart-8818/NmeyYGixT2K2I33e/images/cloudfront/create-record-alias.png?fit=max&auto=format&n=NmeyYGixT2K2I33e&q=85&s=1b26595fb4208eaf54cd5a7cb40a0576" alt="Página “Create record” de Route 53 con el interruptor “Alias” y el menú “Route traffic to” resaltados." width="3024" height="1494" data-path="images/cloudfront/create-record-alias.png" />
</Frame>

5. Selecciona **Create records**.

<Note>
  Es posible que debas eliminar el registro A existente si ya hay uno.
</Note>

Tu documentación ahora está activa en la subruta elegida de tu dominio principal.

<Note>
  Después de configurar tu DNS, los subdominios personalizados suelen estar disponibles en pocos minutos. La propagación del DNS a veces puede tardar entre 1 y 4 horas y, en casos poco frecuentes, hasta 48 horas. Si tu subdominio no está disponible de inmediato, espera antes de intentar solucionarlo.
</Note>