Publicación de Cloudflare Pages

Esta guía detalla el proceso para desplegar un proyecto web construido con Astro en Cloudflare Pages, asegurando el cumplimiento de normativas de seguridad, resolviendo problemas de rutas de compilación y evitando bloqueos de DNS por parte de ISPs (como Movistar en España).

---

1. Preparación del Proyecto Astro

Al utilizar el adaptador @astrojs/cloudflare, Astro modifica su comportamiento de compilación predeterminado.

1.1. Verificar package.json

Asegúrate de que tus dependencias incluyan el adaptador de Cloudflare y los scripts básicos:

"scripts": {
  "dev": "astro dev",
  "build": "astro build",
  "preview": "astro preview"
},
"dependencies": {
  "@astrojs/cloudflare": "^14.2.0",
  "astro": "^7.2.0"
}

1.2. Cabeceras de Seguridad (Opcional pero recomendado)

Para mitigar ataques (XSS, Clickjacking), crea un archivo llamado _headers en la carpeta public/ de tu proyecto con el siguiente contenido:

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin

Cloudflare inyectará automáticamente estas cabeceras en los assets estáticos.

---

2. Configuración en Cloudflare Pages

2.1. Conexión del Repositorio

1. Accede a Cloudflare Dashboard.
2. En el menú lateral, selecciona Workers y Pages.
3. Haz clic en Crear aplicación y debajo de todas las opciones, clica en “¿Busca implementar Pages? Comenzar”.
4. Conecta tu cuenta de GitHub/GitLab y selecciona el repositorio de la web.

2.2. Ajustes de Compilación (¡Crítico!)

Rellena los campos de compilación exactamente con estos valores para evitar errores 404 o renderizados incorrectos:

• Valor prestablecido del marco: Astro
• Comando de compilación: npm run build
• Crear directorio de salida: dist/client (⚠️ Importante: Al usar el adaptador de Cloudflare, Astro divide la compilación. Los estáticos van a client, no a la raíz de dist).

2.3. Variables de Entorno

Si tu proyecto requiere una versión específica de Node (ej. >=22.12.0), debes indicárselo a la máquina de Cloudflare:

1. Despliega Variables de entorno (avanzado).
2. Añade la variable NODE_VERSION con el valor 22.12.0.
3. Haz clic en Guardar e implementar.

---

3. Configuración del Dominio y Bypass de ISP (Movistar)

Algunos proveedores de internet (ISP) en España bloquean por defecto los subdominios *.pages.dev. Para evitar que esto afecte a tu dominio principal al usar un CNAME, usaremos CNAME Flattening (IP Proxy).

3.1. Añadir el Dominio a Pages

1. En tu proyecto de Pages, ve a la pestaña Dominios personalizados.
2. Añade tu dominio (ej. www.tudominio.com).
3. Cloudflare intentará crear un registro CNAME automáticamente.

3.2. Configurar la IP “Dummy” (Bypass)

1. Ve al menú lateral principal de Cloudflare y entra en DNS > Registros.
2. Elimina el registro CNAME que apunta a tu-proyecto.pages.dev.
3. Crea un Nuevo Registro:
   • Tipo: A
   • Nombre: www
   • Objetivo: 192.0.2.1 (IP genérica de enrutamiento).
   • Estado del proxy: Activado (Nube naranja ☁️).
4. ¿Por qué funciona esto? Al tener la nube naranja activada, Cloudflare intercepta el tráfico. Reconoce que el dominio está vinculado a tu proyecto Pages internamente y sirve la web correctamente, ocultando la ruta problemática al ISP.

---

4. Redirección de Dominio Raíz a WWW (Reglas de Página)

Para asegurar que todo el tráfico vaya a la versión segura con “www” y centralizar el SEO (Redirección 301):

1. Ve a DNS > Registros (Records) en el panel de tu dominio.
   • Si ya tienes un registro para tu dominio raíz (kuretes.com o @), asegúrate de que tiene el estado de proxy activado (nube naranja ☁️).
   • Si no lo tienes, puedes crear un registro falso (Cloudflare lo permite para hacer redirecciones):
     • Tipo: AAAA
     • Nombre: @
     • IPv6: 100:: (es una IP de descarte estándar para redirecciones).
     • Estado del proxy: Activado (nube naranja ☁️).
2. En el menú principal de tu zona DNS, ve a Reglas > Page Rules.
3. Haz clic en Crear Page Rule.
4. URL solicitada: tudominio.com/*
5. Configuración:
   • Acción: URL de redireccionamiento (Forwarding URL)
   • Código de estado: 301 (Permanente)
   • URL de destino: https://www.tudominio.com/$1
6. Haz clic en Guardar e implementar.