> ## Documentation Index
> Fetch the complete documentation index at: https://omer-914cc1c6.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 usando 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 dentro de tu repositorio para que coincidan con 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>

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

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

Redirige 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/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/all-behaviors.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=e28ca7f1a2e94eeb8eed62f6ae5c1d53" 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" />

<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/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/create-distribution.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=b5b53c3c979475c73f2e0de9ec67e745" 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, introduce `[SUBDOMAIN].mintlify.dev`, donde `[SUBDOMAIN]` es el subdomain único de tu proyecto.

<Frame>
  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/origin-name.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=d42ce75a7d38718d48e03d60a07b7d43" alt="Página de CloudFront &#x22;Create distribution&#x22; mostrando &#x22;acme.mintlify.dev&#x22; como el origin domain." 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/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/enable-security-protections.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=ab3cb2f88e7105cf5dc046054559690d" 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/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/origins.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=930736017fe33d5aeaa65d17ff209dcf" 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 tu URL de staging que refleje el dominio principal. Esto varía mucho según dónde 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, usa el domain `.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/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/default-origin.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=4b496468140f03fd98b743180e716f7e" alt="Página de CloudFront &#x22;Create origin&#x22; con un campo de entrada &#x22;Origin domain&#x22; resaltado." width="3024" height="1332" data-path="images/cloudfront/default-origin.png" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/final-origins.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=0ffc5d54eb6f3a0a936b6e8e46870326" 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 grandes rasgos, queremos implementar la siguiente lógica:

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

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

<Frame>
  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/behaviors.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=d561cd9f02eceb65818f32b992cb5f9d" 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 dominio de Vercel con un **Patrón de ruta** de `/.well-known/*` y configura **Origin and origin groups** a la URL de tu documentación.

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

<Frame>
  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/well-known-policy.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=88d29c97195304dc17352a3586e29595" 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 acotarlo a un mínimo de 2 comportamientos para Vercel:

  * `/.well-known/vercel/*` - Obligatorio para la verificación de dominio de Vercel
  * `/.well-known/acme-challenge/*` - Obligatorio 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** para la subruta que elijas, por ejemplo `/docs`, con **Origin and origin groups** 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/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/behavior-1.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=01f57f8be88850eb1f2919b319d8851e" 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 orígenes** apuntando 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**.

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

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

* Configura "Cache policy" en **CachingOptimized**
* Configura "Origin request policy" en **AllViewerExceptHostHeader**
* Configura "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/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/default-behavior-1.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=d1028ea337a4f8fbda88086ed80edabb" alt="Una distribución de CloudFront con el comportamiento &#x22;Default (*)&#x22; seleccionado y el botón Edit enfatizado." 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/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/default-behavior-2.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=d363a70a1e99f274a3aca8f47fb2f909" 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 **Guardar cambios**.

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

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

<Frame>
  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/all-behaviors.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=e28ca7f1a2e94eeb8eed62f6ae5c1d53" alt="Página de CloudFront “Behaviors” 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/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/preview-distribution.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=ac51d2fb595da7c4321df07b75ea91c2" 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 de inicio principal, pero si agregas 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 llevaremos la funcionalidad de la distribución de CloudFront a tu domain principal.

<Note>
  Para esta sección, también puedes consultar la guía oficial de AWS sobre [Configurar
  Amazon Route 53 para enrutar el 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. Ve a la "Hosted zone" de tu domain principal.
3. Selecciona **Create record**.

<Frame>
  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/route53-create-record.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=42fa1ebe5bde68138c9a5a5e6ef536e5" alt="Página de &#x22;Records&#x22; de Route 53 con el botón &#x22;Create record&#x22; resaltado." width="1540" height="1238" data-path="images/cloudfront/route53-create-record.png" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/omer-914cc1c6/AiL60EGGBeap42Y0/images/cloudfront/create-record-alias.png?fit=max&auto=format&n=AiL60EGGBeap42Y0&q=85&s=7aeda5e74a5feca3e34da2b72cde532f" alt="Página &#x22;Create record&#x22; de Route 53 con el interruptor &#x22;Alias&#x22; y el menú &#x22;Route traffic to&#x22; 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á disponible en la subruta que elegiste para tu domain principal.

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