Configuración de Cloudflare Pages y Workers
Resumen
Esta receta proporciona una guía para configurar y utilizar Cloudflare Pages y Workers para desplegar aplicaciones web estáticas y ejecutar código serverless en el edge. Cloudflare Pages ofrece una plataforma de hosting para sitios estáticos, mientras que Workers permite ejecutar funciones serverless para manejar solicitudes y procesos de backend.
Descripción
Cloudflare Pages es una solución de hosting optimizada para sitios estáticos, proporcionando despliegue continuo desde repositorios Git. Cloudflare Workers es una plataforma serverless que permite ejecutar código en el edge, proporcionando baja latencia y alta disponibilidad. Juntos, permiten construir aplicaciones web modernas y eficientes.
Prerrequisitos
Cuenta de Cloudflare
Repositorio Git configurado (por ejemplo, en GitHub, GitLab o Bitbucket)
Conocimientos básicos de desarrollo web y serverless
Casos de Uso
Desplegar aplicaciones web estáticas rápidamente utilizando Cloudflare Pages.
Implementar funciones serverless para manejar lógica backend y procesos en el edge con Cloudflare Workers.
Integrar despliegues continuos y automatizados desde repositorios Git.
Instrucciones Paso a Paso
1. Configurar Cloudflare Pages
Inicia sesión en tu cuenta de Cloudflare.
Navega a "Pages" en el panel de Cloudflare.
Haz clic en "Create a project".
Conectar Repositorio
Selecciona el proveedor de Git (GitHub, GitLab, Bitbucket) y autoriza a Cloudflare a acceder a tus repositorios.
Selecciona el repositorio donde está tu proyecto estático.
Configurar Proyecto
Proporciona un nombre para tu proyecto.
Configura la rama de producción (por defecto,
mainomaster).Define los comandos de construcción si es necesario:
Build Command: El comando para construir tu proyecto (por ejemplo,
npm run build).Build Output Directory: El directorio donde se genera el contenido estático (por ejemplo,
dist).
Haz clic en "Save and Deploy".
Verificar Despliegue
Una vez completado el despliegue, Cloudflare Pages proporcionará una URL para acceder a tu sitio web.
Verifica que el sitio esté funcionando correctamente.
2. Configurar Cloudflare Workers
Navega a "Workers" en el panel de Cloudflare.
Haz clic en "Create a Worker".
Crear un Nuevo Worker
Proporciona un nombre para tu Worker.
En el editor de código, escribe tu función serverless en JavaScript o utiliza uno de los ejemplos proporcionados.
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
return new Response('Hello, world!')
}Haz clic en "Save and Deploy".
Enlazar el Worker a un Rango de URL
Navega a "Workers" > "Routes".
Configura un rango de URL donde el Worker debería ejecutarse (por ejemplo,
https://example.com/*).
Configurar Variables de Entorno (Opcional)
Navega a "Workers" > "Variables".
Añade las variables de entorno necesarias para tu Worker.
Validación
Verificar Despliegue de Cloudflare Pages:
Accede a la URL proporcionada por Cloudflare Pages y verifica que tu sitio web estático se despliega correctamente.
Verificar Funcionamiento de Cloudflare Workers:
Accede a una URL que dispare el Worker y verifica que la función serverless responde como se espera.
Solución de Problemas
Despliegue Fallido en Cloudflare Pages:
Verifica que los comandos de construcción y la configuración del directorio de salida sean correctos.
Revisa los logs de construcción proporcionados por Cloudflare.
Worker No Responde:
Asegúrate de que la ruta configurada en "Routes" coincide con la URL que estás probando.
Revisa los logs y el código del Worker en el editor de Cloudflare.
Preguntas Frecuentes
¿Puedo usar Cloudflare Pages con cualquier framework?
Sí, Cloudflare Pages es compatible con cualquier framework que genere contenido estático, como React, Vue, Angular, Hugo, Jekyll, etc.
¿Cómo puedo proteger mi sitio desplegado en Cloudflare Pages?
Puedes configurar reglas de seguridad adicionales en el panel de Cloudflare, utilizando el firewall y las reglas de acceso.
¿Qué lenguajes soporta Cloudflare Workers?
Actualmente, Cloudflare Workers soporta JavaScript, pero también puedes escribir en TypeScript y compilar a JavaScript.
Recursos Adicionales
Conclusión
Siguiendo esta receta, has configurado y desplegado correctamente Cloudflare Pages para hospedar tu sitio web estático y Cloudflare Workers para ejecutar funciones serverless en el edge. Esta configuración te permite construir aplicaciones web modernas, escalables y seguras, aprovechando la infraestructura global de Cloudflare.
Last updated