Despliega tu sitio de Astro en Cloudflare

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

Cloudflare Pages es una plataforma de JAMstack para que los desarrolladores de frontend colaboren y desplieguen sitios web estáticos (JAMstack) y SSR.

Requisitos previos

Para empezar, necesitarás:

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

Cloudflare Workers

Cómo desplegar con Wrangler

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

Esto instalará el adaptador y realizará los cambios apropiados en tu archivo astro.config.mjs en un solo paso.
- npm
- pnpm
- Yarn
Ventana de la terminal
npx astro add cloudflare
Ventana de la terminal
pnpm astro add cloudflare
Ventana de la 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 creará esto por ti; si no estás utilizando el adaptador, deberás crearlo tú mismo.
- Estático
- Bajo demanda
wrangler.jsonc
{ "name": "my-astro-app", "compatibility_date": "YYYY-MM-DD", // Update to the day you deploy "assets": { "directory": "./dist", } }
wrangler.jsonc
{ "main": "dist/_worker.js/index.js", "name": "my-astro-app", "compatibility_date": "YYYY-MM-DD", // Update to the day you deploy "compatibility_flags": [ "nodejs_compat", "global_fetch_strictly_public" ], "assets": { "binding": "ASSETS", "directory": "./dist" }, "observability": { "enabled": true } }
Previsualiza tu proyecto localmente con Wrangler.
Ventana de la terminal
```
npx astro build && npx wrangler dev
```
Despliega utilizando npx wrangler deploy.
Ventana de la terminal
```
npx astro build && npx wrangler deploy
```

Una vez subidos tus activos, Wrangler te proporcionará una URL de vista previa para inspeccionar tu sitio.

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

Cómo desplegar con CI/CD

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

Si estás utilizando Workers Builds:

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

Resolución de problemas

Comportamiento de errores 404

Para los proyectos de Workers, deberás configurar not_found_handling si deseas servir una página 404 personalizada. Puedes leer más sobre esto en la sección sobre comportamiento de enrutamiento (Routing behavior) 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 como resultado de la configuración Auto Minify de Cloudflare. Si ves Hydration completed but contains mismatches en la consola, asegúrate de desactivar Auto Minify en los ajustes de Cloudflare.

APIs de entorno de ejecución de Node.js

Si estás compilando un proyecto que utiliza renderizado bajo demanda con el adaptador de Cloudflare y el servidor no se compila 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 entorno de ejecución de Cloudflare.
Si estás importando directamente una API del entorno de ejecución de Node.js, consulta la documentación de Astro sobre la compatibilidad de Node.js de Cloudflare para obtener más información sobre cómo solucionar esto.
Si estás importando un paquete que importa una API del entorno de ejecución de Node.js, consulta con el autor del paquete si es compatible con la sintaxis de importación node:*. Si no es así, es posible que debas buscar un paquete alternativo.

Más guías de implementación

Contribuir Comunidad Patrocinar