> ## Documentation Index
> Fetch the complete documentation index at: https://adminroletesting-justin-client-exports.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# AWS Route 53 y CloudFront

> Despliega tu documentación de Mintlify en una subruta en AWS usando Route 53 para el enrutamiento DNS y CloudFront como CDN con funciones Lambda@Edge.

Para alojar tu documentación en una subruta 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="overview">
  ## Descripción general
</div>

Dirige 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 dominio
* `/docs/*` - Obligatorio para el enrutamiento por subruta
* `/docs/` - Obligatorio para el enrutamiento por subruta

Dirige 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 (Behaviors) deben tener una **origin request policy** de `AllViewerExceptHostHeader`.

<img src="https://mintcdn.com/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/all-behaviors.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=f00570b4766487fbe7524c4825d0ab85" alt="Página de CloudFront &#x22;Behaviors&#x22; con 4 behaviors: /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. Navega a [CloudFront](https://aws.amazon.com/cloudfront) en la consola de AWS.
2. Selecciona **Create distribution**.

<Frame>
  <img src="https://mintcdn.com/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/create-distribution.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=cb47f86b1f1944abc072653ad4cac5fb" alt="Página de CloudFront Distributions con el botón «Create distribution» resaltado." width="3024" height="922" data-path="images/cloudfront/create-distribution.png" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/origin-name.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=5cda0a7d617ab972bd66a356724d2c2e" alt="Página «Create distribution» de CloudFront mostrando «acme.mintlify.site» como 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/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/enable-security-protections.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=1de769a03b9092dad0f8c74d18fd25ae" alt="Opciones de Web Application Firewall (WAF) con «Enable security protections» 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/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/origins.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=de7183e31f0305357b91553eb4952b97" 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 según cómo esté alojada tu página de inicio. Por ejemplo, la URL de staging de Mintlify es [mintlify-landing-page.vercel.app](https://mintlify-landing-page.vercel.app).

<Info>
  Si tu página de inicio 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/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/default-origin.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=64fb4213853e768d3a7a972c7f385d27" 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.site` y otro con tu URL de staging.

<Frame>
  <img src="https://mintcdn.com/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/final-origins.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=3edec15e40ce7f6d4a8bcdc8ae51b52b" 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**, redirigir a `[SUBDOMAIN].mintlify.site`.
* **Si un usuario llega a cualquier otra página**, redirigir 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/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/behaviors.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=7bb3c5cc9f072acba5340006e173a831" 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 domain de Vercel con un **Patrón de ruta** de `/.well-known/*` y establece **Origin and origin groups** en la URL de tu documentación.

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

<Frame>
  <img src="https://mintcdn.com/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/well-known-policy.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=757a55ab0834edd1a403f47ea6fd37d3" 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, puede acotarse a un mínimo de 2 comportamientos para Vercel:

  * `/.well-known/vercel/*` - Obligatorio para la verificación de domain de Vercel
  * `/.well-known/acme-challenge/*` - Obligatorio para la verificación del certificado de Let's Encrypt
</Info>

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

Crea un comportamiento con un **Path pattern** de la subruta que elijas, por ejemplo `/docs`, con **Origin and origin groups** apuntando a la URL `.mintlify.site` (en nuestro caso `acme.mintlify.site`).

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

<Frame>
  <img src="https://mintcdn.com/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/behavior-1.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=63a86ae3a4631f96b416887b460a52db" alt="Página &#x22;Create behavior&#x22; de CloudFront con un &#x22;Path pattern&#x22; de &#x22;/docs/*&#x22; y &#x22;Origin and origin groups&#x22; apuntando a la URL acme.mintlify.site." width="1520" height="1117" data-path="images/cloudfront/behavior-1.png" />
</Frame>

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

Crea un comportamiento con un **Path pattern** que sea la subruta que elijas seguida de `/*`, por ejemplo `/docs/*`, y con **Origin and origin groups** apuntando a la misma URL `.mintlify.site`.

Esta configuración debe coincidir exactamente con el comportamiento de tu subruta base, con la excepción de **Path pattern**.

* 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>

* Establece la "política de caché" en **CachingOptimized**
* Establece la "política de solicitud de origen" en **AllViewerExceptHostHeader**
* Establece la "política de protocolo del visor" en **Redirect HTTP to HTTPS**

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

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

<Frame>
  <img src="https://mintcdn.com/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/default-behavior-1.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=b5f8aafe18cc5365f334b0e95a624a1e" alt="Una distribución de CloudFront con el comportamiento &#x22;Default (*)&#x22; seleccionado y el botón Edit resaltado." 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/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/default-behavior-2.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=1cb37564abde4285ff818194b6dd34ed" 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">
  ### 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/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/all-behaviors.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=f00570b4766487fbe7524c4825d0ab85" 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á correctamente configurada yendo a la pestaña "General" y visitando la URL de **Distribution domain name**.

<Frame>
  <img src="https://mintcdn.com/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/preview-distribution.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=6ca0fceb37e9a5f804c34e43f8787211" 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-route-53">
  ## Conectar con Route 53
</div>

Ahora vamos a llevar las capacidades 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 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 dominio principal.
3. Selecciona **Create record**.

<Frame>
  <img src="https://mintcdn.com/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/route53-create-record.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=1e6eb7d2c121f410d3e42c1d509f03ec" 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**, selecciona la opción `Alias to CloudFront distribution`.

<Frame>
  <img src="https://mintcdn.com/adminroletesting-justin-client-exports/NEOZ7P71btyQDTB6/images/cloudfront/create-record-alias.png?fit=max&auto=format&n=NEOZ7P71btyQDTB6&q=85&s=fcc0d3ce49300c9ff08c490ac43e2801" 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 tengas que eliminar el registro A existente si ya hay uno.
</Note>

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

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