Despliega tu sitio Astro en Cloudflare

Puedes desplegar aplicaciones full-stack, incluyendo recursos estáticos en el front-end y APIs en el back-end, así como sitios renderizados bajo demanda, en Cloudflare Workers.

Lee más sobre el uso del tiempo de ejecución de Cloudflare (EN) en tu proyecto de Astro.

Requisitos previos

Para empezar, necesitarás:

Una cuenta de Cloudflare. Si aún no tienes una, puedes crear una cuenta gratuita de Cloudflare durante el proceso.

Cloudflare Workers

Cómo desplegar con Wrangler

Instala la CLI de Wrangler.
Ventana de terminal
```
npm install wrangler@latest --save-dev
```
Si tu sitio utiliza renderizado bajo demanda, instala el adaptador @astrojs/cloudflare (EN).

Esto instalará el adaptador y realizará los cambios correspondientes en tu archivo astro.config.mjs en un solo paso.
- npm
- pnpm
- Yarn
Ventana de terminal
npx astro add cloudflare
Ventana de terminal
pnpm astro add cloudflare
Ventana de terminal
yarn astro add cloudflare
Lee más sobre el renderizado bajo demanda en Astro.
Crea un archivo de configuración de Wrangler.

Ejecutar astro add cloudflare lo creará por ti; si no estás usando el adaptador, tendrás que crearlo tú mismo.
- Estático
- SSR
wrangler.jsonc
{ "name": "my-astro-app", "compatibility_date": "YYYY-MM-DD", // Actualiza al día en que realices el despliegue "assets": { "directory": "./dist", } }
wrangler.jsonc
{ "main": "@astrojs/cloudflare/entrypoints/server", "name": "my-astro-app", "compatibility_date": "YYYY-MM-DD", // Actualiza al día en que realices el despliegue "compatibility_flags": [ "nodejs_compat", "global_fetch_strictly_public" ], "assets": { "binding": "ASSETS", "directory": "./dist" }, "observability": { "enabled": true } }
Previsualiza tu proyecto localmente con Wrangler.
Ventana de terminal
```
npx astro build && npx wrangler dev
```
Despliega usando npx wrangler deploy.
Ventana de terminal
```
npx astro build && npx wrangler deploy
```

Una vez que tus recursos se hayan subido, Wrangler te proporcionará una URL de vista previa para inspeccionar tu sitio.

Lee más sobre el uso de las APIs del tiempo de ejecución de Cloudflare (EN) como los bindings.

Cómo desplegar con CI/CD

También puedes usar un sistema de CI/CD como Workers Builds para compilar y desplegar automáticamente tu sitio al hacer push.

Si usas Workers Builds:

Sigue los pasos 1 al 3 de la sección de Wrangler anterior.
Inicia sesión en el panel de control de Cloudflare y navega hasta Compute > Workers & Pages. Selecciona Create application.
En la sección Import a repository, selecciona una cuenta de Git y luego el repositorio que contiene tu proyecto de Astro.
Configura tu proyecto con:
- Comando de compilación: npx astro build
- Comando de despliegue: npx wrangler deploy
Haz clic en Save and Deploy. Ahora puedes previsualizar tu Worker en el subdominio workers.dev proporcionado.

Solución de problemas

Comportamiento 404

Para los proyectos de Workers, necesitarás configurar not_found_handling si deseas servir una página 404 personalizada. Puedes leer más sobre esto en la sección de comportamiento de enrutamiento de la documentación de Cloudflare.

{
  "assets": {
    "directory": "./dist",
    "not_found_handling": "404-page"
  }
}

Hidratación del lado del cliente

La hidratación del lado del cliente puede fallar debido a la configuración Auto Minify de Cloudflare. Si ves el mensaje Hydration completed but contains mismatches en la consola, asegúrate de desactivar Auto Minify en la configuración de Cloudflare.

APIs del tiempo de ejecución de Node.js

Si estás construyendo un proyecto que utiliza renderizado bajo demanda con el adaptador de Cloudflare (EN) y el servidor falla al compilar con un mensaje de error como [Error] Could not resolve "XXXX. The package "XXXX" wasn't found on the file system but is built into node.:

Esto significa que un paquete o importación que estás utilizando en el entorno del lado del servidor no es compatible con las APIs del tiempo de ejecución de Cloudflare.
Si estás importando directamente una API del tiempo de ejecución de Node.js, consulta la documentación de Astro sobre la compatibilidad con Node.js (EN) en Cloudflare para ver los siguientes pasos sobre cómo resolver esto.
Si estás importando un paquete que a su vez importa una API del tiempo de ejecución de Node.js, comunícate con el autor del paquete para ver si admite la sintaxis de importación node:*. Si no lo hace, es posible que debas buscar un paquete alternativo.

Más guías de implementación

Contribuir Comunidad Patrocinador