|
| 1 | +--- |
| 2 | +title: "Cloudflare" |
| 3 | +description: "Aloja la documentación en una subruta personalizada con Cloudflare Workers" |
| 4 | +--- |
| 5 | + |
| 6 | +import Propagating from "/snippets/es/custom-subpath-propagating.mdx"; |
| 7 | + |
| 8 | +Para alojar tu documentación en una subruta personalizada como `yoursite.com/docs` con Cloudflare, deberás crear y configurar un Cloudflare Worker. |
| 9 | + |
| 10 | +<Info> |
| 11 | + Antes de empezar, necesitas una cuenta de Cloudflare y un nombre de dominio (puede administrarse dentro o fuera de Cloudflare). |
| 12 | +</Info> |
| 13 | + |
| 14 | + |
| 15 | +<div id="repository-structure"> |
| 16 | + ## Estructura del repositorio |
| 17 | +</div> |
| 18 | + |
| 19 | +Los archivos de documentación deben organizarse dentro del repositorio para que coincidan con la subruta elegida. Por ejemplo, si quieres que tu documentación esté en `yoursite.com/docs`, crea un directorio `docs/` con todos los archivos de documentación. |
| 20 | + |
| 21 | +<div id="set-up-a-cloudflare-worker"> |
| 22 | + ## Configurar un Cloudflare Worker |
| 23 | +</div> |
| 24 | + |
| 25 | +Crea un Cloudflare Worker siguiendo la [guía de inicio de Cloudflare Workers](https://developers.cloudflare.com/workers/get-started/dashboard/) si aún no lo has hecho. |
| 26 | + |
| 27 | +<Warning> |
| 28 | + Si tu proveedor de DNS es Cloudflare, no habilites el proxy para el registro CNAME. |
| 29 | +</Warning> |
| 30 | + |
| 31 | +<div id="proxies-with-vercel-deployments"> |
| 32 | + ### Proxies con implementaciones de Vercel |
| 33 | +</div> |
| 34 | + |
| 35 | +Si usas Cloudflare como proxy con implementaciones de Vercel, asegúrate de configurarlo correctamente para evitar conflictos con la verificación de dominio de Vercel y el aprovisionamiento de certificados SSL. |
| 36 | + |
| 37 | +Una configuración de proxy incorrecta puede impedir que Vercel emita certificados SSL de Let's Encrypt y provocar errores en la verificación de dominio. |
| 38 | + |
| 39 | +<div id="required-path-allowlist"> |
| 40 | + #### Lista de rutas permitidas obligatoria |
| 41 | +</div> |
| 42 | + |
| 43 | +Tu Cloudflare Worker debe permitir el tráfico a estas rutas específicas sin bloquear ni redirigir: |
| 44 | + |
| 45 | +- `/.well-known/acme-challenge/*` - Necesario para la verificación del certificado de Let's Encrypt |
| 46 | +- `/.well-known/vercel/*` - Necesario para la verificación de dominios en Vercel |
| 47 | + |
| 48 | +Si bien Cloudflare gestiona automáticamente muchas reglas de verificación, crear reglas personalizadas adicionales podría bloquear inadvertidamente este tráfico crítico. |
| 49 | + |
| 50 | +<div id="header-forwarding-requirements"> |
| 51 | + #### Requisitos para el reenvío de encabezados |
| 52 | +</div> |
| 53 | + |
| 54 | +Asegúrate de que el encabezado `HOST` se reenvíe correctamente en la configuración de tu Worker. Si los encabezados no se reenvían correctamente, las solicitudes de verificación fallarán. |
| 55 | + |
| 56 | +<div id="configure-routing"> |
| 57 | + ### Configurar el enrutamiento |
| 58 | +</div> |
| 59 | + |
| 60 | +En tu panel de Cloudflare, selecciona **Edit Code** y agrega el siguiente script en el código de tu Worker. Consulta la [documentación de Cloudflare](https://developers.cloudflare.com/workers-ai/get-started/dashboard/#development) para obtener más información sobre cómo editar un Worker. |
| 61 | + |
| 62 | +<Tip> |
| 63 | + Reemplaza `[SUBDOMAIN]` por tu subdominio único, `[YOUR_DOMAIN]` por la URL base de tu sitio web y `/docs` por la subruta que prefieras si fuera distinta. |
| 64 | +</Tip> |
| 65 | + |
| 66 | +```javascript |
| 67 | +addEventListener("fetch", (event) => { |
| 68 | + event.respondWith(handleRequest(event.request)); |
| 69 | +}); |
| 70 | + |
| 71 | +async function handleRequest(request) { |
| 72 | + try { |
| 73 | + const urlObject = new URL(request.url); |
| 74 | + |
| 75 | + // Si la solicitud es a una ruta de verificación de Vercel, deja que pase |
| 76 | + if (urlObject.pathname.startsWith('/.well-known/')) { |
| 77 | + return await fetch(request); |
| 78 | + } |
| 79 | + |
| 80 | + // Si la solicitud es al subdirectorio de docs |
| 81 | + if (/^\/docs/.test(urlObject.pathname)) { |
| 82 | + // Entonces, haz proxy a Mintlify |
| 83 | + const DOCS_URL = "[SUBDOMAIN].mintlify.dev"; |
| 84 | + const CUSTOM_URL = "[YOUR_DOMAIN]"; |
| 85 | + |
| 86 | + let url = new URL(request.url); |
| 87 | + url.hostname = DOCS_URL; |
| 88 | + |
| 89 | + let proxyRequest = new Request(url, request); |
| 90 | + |
| 91 | + proxyRequest.headers.set("Host", DOCS_URL); |
| 92 | + proxyRequest.headers.set("X-Forwarded-Host", CUSTOM_URL); |
| 93 | + proxyRequest.headers.set("X-Forwarded-Proto", "https"); |
| 94 | + // Si despliegas en Vercel, conserva la IP del cliente |
| 95 | + proxyRequest.headers.set("CF-Connecting-IP", request.headers.get("CF-Connecting-IP")); |
| 96 | + |
| 97 | + return await fetch(proxyRequest); |
| 98 | + } |
| 99 | + } catch (error) { |
| 100 | + // Si no se encuentra ninguna coincidencia, procesa la solicitud normal |
| 101 | + return await fetch(request); |
| 102 | + } |
| 103 | +} |
| 104 | +``` |
| 105 | + |
| 106 | +Selecciona **Deploy** y espera a que los cambios se propaguen. |
| 107 | + |
| 108 | +<Propagating /> |
| 109 | + |
| 110 | + |
| 111 | +<div id="test-your-worker"> |
| 112 | + ### Prueba tu Worker |
| 113 | +</div> |
| 114 | + |
| 115 | +Después de desplegar tu código, prueba tu Worker para asegurarte de que redirige a tu documentación de Mintlify. |
| 116 | + |
| 117 | +1. Prueba usando la URL de vista previa del Worker: `your-worker.your-subdomain.workers.dev/docs` |
| 118 | +2. Verifica que el Worker redirige a tu documentación de Mintlify y a tu sitio web. |
| 119 | + |
| 120 | +<div id="add-custom-domain"> |
| 121 | + ### Agregar dominio personalizado |
| 122 | +</div> |
| 123 | + |
| 124 | +1. En tu [panel de Cloudflare](https://dash.cloudflare.com/), ve a tu Worker. |
| 125 | +2. Ve a **Settings > Domains & Routes > Add > Custom Domain**. |
| 126 | +3. Agrega tu dominio. |
| 127 | + |
| 128 | +<Tip> |
| 129 | + Recomendamos agregar tu dominio tanto con `www.` como sin él. |
| 130 | +</Tip> |
| 131 | + |
| 132 | +Consulta [Add a custom domain](https://developers.cloudflare.com/workers/configuration/routing/custom-domains/#add-a-custom-domain) en la documentación de Cloudflare para más información. |
| 133 | + |
| 134 | +<div id="resolve-dns-conflicts"> |
| 135 | + ### Resolver conflictos de DNS |
| 136 | +</div> |
| 137 | + |
| 138 | +Si tu dominio ya apunta a otro servicio, debes eliminar el registro DNS existente. Tu Cloudflare Worker debe estar configurado para controlar todo el tráfico de tu dominio. |
| 139 | + |
| 140 | +1. Elimina el registro DNS existente de tu dominio. Consulta [Eliminar registros DNS](https://developers.cloudflare.com/dns/manage-dns-records/how-to/create-dns-records/#delete-dns-records) en la documentación de Cloudflare para obtener más información. |
| 141 | +2. Regresa a tu Worker y añade tu dominio personalizado. |
| 142 | + |
| 143 | +<div id="webflow-custom-routing"> |
| 144 | + ## Enrutamiento personalizado en Webflow |
| 145 | +</div> |
| 146 | + |
| 147 | +Si usas Webflow para alojar tu sitio principal y quieres servir la documentación de Mintlify en `/docs` en el mismo dominio, tendrás que configurar un enrutamiento personalizado mediante Cloudflare Workers para enrutar todo el tráfico que no sea de docs a tu sitio principal. |
| 148 | + |
| 149 | +<Warning> |
| 150 | + Asegúrate de que tu sitio principal esté configurado en una página de aterrizaje antes de desplegar este Worker, o quienes visiten tu sitio principal verán errores. |
| 151 | +</Warning> |
| 152 | + |
| 153 | +1. En Webflow, configura una página de aterrizaje para tu sitio principal, por ejemplo `landing.yoursite.com`. Esta será la página que verán las personas al visitar tu sitio. |
| 154 | +2. Despliega tu sitio principal en la página de aterrizaje. Esto garantiza que tu sitio principal siga siendo accesible mientras configuras el Worker. |
| 155 | +3. Para evitar conflictos, actualiza cualquier URL absoluta en tu sitio principal para que sea relativa. |
| 156 | +4. En Cloudflare, selecciona **Edit Code** y añade el siguiente script en el código de tu Worker. |
| 157 | + |
| 158 | +<Tip> Reemplaza `[SUBDOMAIN]` por tu subdominio único, `[YOUR_DOMAIN]` por la URL base de tu sitio web, `[LANDING_DOMAIN]` por la URL de tu página de aterrizaje y `/docs` por la subruta deseada si fuera distinta. </Tip> |
| 159 | + |
| 160 | +```javascript |
| 161 | + addEventListener("fetch", (event) => { |
| 162 | + event.respondWith(handleRequest(event.request)); |
| 163 | + }); |
| 164 | + async function handleRequest(request) { |
| 165 | + try { |
| 166 | + const urlObject = new URL(request.url); |
| 167 | + |
| 168 | + // Si la solicitud es a una ruta de verificación de Vercel, deja que pase |
| 169 | + if (urlObject.pathname.startsWith('/.well-known/')) { |
| 170 | + return await fetch(request); |
| 171 | + } |
| 172 | + |
| 173 | + // Si la solicitud es al subdirectorio de docs |
| 174 | + if (/^\/docs/.test(urlObject.pathname)) { |
| 175 | + // Encamina a través de un proxy a Mintlify |
| 176 | + const DOCS_URL = "[SUBDOMAIN].mintlify.dev"; |
| 177 | + const CUSTOM_URL = "[YOUR_DOMAIN]"; |
| 178 | + let url = new URL(request.url); |
| 179 | + url.hostname = DOCS_URL; |
| 180 | + let proxyRequest = new Request(url, request); |
| 181 | + proxyRequest.headers.set("Host", DOCS_URL); |
| 182 | + proxyRequest.headers.set("X-Forwarded-Host", CUSTOM_URL); |
| 183 | + proxyRequest.headers.set("X-Forwarded-Proto", "https"); |
| 184 | + // Si se despliega en Vercel, conserva la IP del cliente |
| 185 | + proxyRequest.headers.set("CF-Connecting-IP", request.headers.get("CF-Connecting-IP")); |
| 186 | + return await fetch(proxyRequest); |
| 187 | + } |
| 188 | + // Envía todo lo demás al sitio principal |
| 189 | + const MAIN_SITE_URL = "[LANDING_DOMAIN]"; |
| 190 | + if (MAIN_SITE_URL && MAIN_SITE_URL !== "[LANDING_DOMAIN]") { |
| 191 | + let mainSiteUrl = new URL(request.url); |
| 192 | + mainSiteUrl.hostname = MAIN_SITE_URL; |
| 193 | + return await fetch(mainSiteUrl, { |
| 194 | + method: request.method, |
| 195 | + headers: request.headers, |
| 196 | + body: request.body |
| 197 | + }); |
| 198 | + } |
| 199 | + } catch (error) { |
| 200 | + // Si no se encuentra ninguna coincidencia, atiende la solicitud normal |
| 201 | + return await fetch(request); |
| 202 | + } |
| 203 | + } |
| 204 | +``` |
| 205 | + |
| 206 | +5. Selecciona **Deploy** y espera a que los cambios se propaguen. |
| 207 | + |
| 208 | +<Propagating /> |
![locadex-agent[bot]](https://avatars.githubusercontent.com/in/1436158?v=4&size=40){kind=avatar}
0 commit comments