> ## Documentation Index
> Fetch the complete documentation index at: https://adminroletesting-mintlify-fff028b1.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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/all-behaviors.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=809c7a2156467deb3f750d6705109083" 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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/create-distribution.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=e9f5d4cca58d0508bb57e664c1e15d7e" 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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/origin-name.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=050e951018c01d573678cc1c542bb7bf" 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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/enable-security-protections.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=49e5280ffe21ea7245b70944c6a3a842" 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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/origins.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=9e3cdcd66bb71d843668fb31123a938b" 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 el proveedor de alojamiento de 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 Webflow aloja tu página de inicio, 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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/default-origin.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=17dd60b20f1f27b7bb10aa1e9c9d43f6" 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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/final-origins.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=1d42f2cdebdf7401fdfd82b94905cee8" 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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/behaviors.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=1d031a27bb12dbc6dd45381f7dbf6e89" 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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/well-known-policy.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=d5bad14d1700cad88fd1f65c421a8e5e" 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 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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/behavior-1.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=2bfb098517c92b5e86d139f75996e958" 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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/default-behavior-1.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=711de84dfb4d82c7a405a8336e8c2f04" 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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/default-behavior-2.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=079023e551b5e948339da8cbaaa1f610" 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 hayas configurado los comportamientos correctamente
</div>

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

<Frame>
  <img src="https://mintcdn.com/adminroletesting-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/all-behaviors.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=809c7a2156467deb3f750d6705109083" 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 configuraste tu distribución correctamente yendo a la pestaña "General" y visitando la URL de **Distribution domain name**.

<Frame>
  <img src="https://mintcdn.com/adminroletesting-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/preview-distribution.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=4f7a9e014ca2c01e3715d34e9a9662e3" 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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/route53-create-record.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=ce254bc0a80e13ff091409e9ea86e435" 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-mintlify-fff028b1/FU1W5YiKelGLYoG-/images/cloudfront/create-record-alias.png?fit=max&auto=format&n=FU1W5YiKelGLYoG-&q=85&s=3ad9577e2d48a66846b5b27c0104b759" 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>
