Despliega tu proyecto de Astro en Cloudflare Pages

Puedes desplegar tu proyecto de Astro en Cloudflare Pages, una plataforma para desarrolladores frontend para colaborar y desplegar sitios web estáticos (JAMstack) y con renderizado en el servidor (SSR).

Esta guía incluye instrucciones para desplegar en Cloudflare Pages a través del dashboard de Pages o usando Wrangler, la CLI de Cloudflare.

Para comenzar, necesitarás:

  • Una cuenta de Cloudflare. Si no tienes una, puedes crear una cuenta gratuita de Cloudflare durante el proceso.
  • Tu código alojado en un repositorio de GitHub o GitLab.

Cómo desplegar un proyecto con Git

Section titled Cómo desplegar un proyecto con Git
  1. Crea un nuevo proyecto en Cloudflare Pages.

  2. Sube tu código a un repositorio de git remoto (GitHub, GitLab).

  3. Inicia sesión en el dashboard de Cloudflare y selecciona tu cuenta en Inicio > Páginas.

  4. Selecciona Crear un proyecto y la opción de Conéctese a un Git.

  5. Selecciona el proyecto de git que quieres desplegar y haz clic en Comenzar la instalación

  6. Usa los siguientes ajustes de compilación:

    • Valor preestablecido del marco: Astro
    • Comando de compilación: npm run build
    • Crear directorio de salida: dist
    • Variables de entorno (avanzado): Por defecto, Cloudflare Pages usa Node.js 12.18.0, pero Astro requiere una versión mayor. Añade una variable de entorno con Nombre de variable de NODE_VERSION y un Valor de v16.13.0 o mayor para decirle a Cloudflare que use una versión de Node compatible. Alternativamente, añade un archivo .nvmrc a tu proyecto para especificar una versión de Node.
  7. Haz clic en el botón Guardar e implementar.

Cómo desplegar un proyecto usando Wrangler

Section titled Cómo desplegar un proyecto usando Wrangler
  1. Instala Wrangler CLI.
  2. Accede en Wrangler con tu cuenta de Cloudflare usando wrangler login.
  3. Ejecuta tu comando de compilación.
  4. Despliega usando npx wrangler pages publish dist.
# Instala Wrangler CLI
npm install -g wrangler
# Accede a tu cuenta de Cloudflare desde la CLI
wrangler login
# Ejecuta el comando de compilación
npm run build
# Crea un nuevo despliegue
npx wrangler pages publish dist

Una vez que tus archivos sean subidos, Wrangler te dará una preview URL para inspeccionar tu sitio. Cuando accedas al dashboard de Cloudflare Pages, verás tu nuevo proyecto.

Habilitando Preview localmente con Wrangler

Section titled Habilitando Preview localmente con Wrangler

Para que preview funcione, debes instalar wrangler

pnpm install wrangler --save-dev

Entonces será posible actualizar el script preview en tu package.json por "preview": "wrangler pages dev ./dist"

Cómo desplegar un sitio con SSR

Section titled Cómo desplegar un sitio con SSR

Puedes desplegar tu proyecto de Astro con SSR en Cloudflare Pages usando el adaptador @astrojs/cloudflare (EN).

Añade el adaptador de Cloudflare que activa SSR en tu proyecto de Astro con el siguiente comando astro add que se muestra debajo. Este instalará el adaptador y hará los cambios apropiados a tu archivo astro.config.mjs en un solo paso.

npx astro add cloudflare

Si prefieres instalar el adaptador manualmente, sigue los siguientes pasos:

  1. Añadir el adaptador @astrojs/cloudflare a las dependencias de tu proyecto usando tu gestor de paquetes preferido. Si estás usando npm o no estás seguro, ejecuta esto en la terminal:
npm install @astrojs/cloudflare
  1. Añadir lo siguiente a tu archivo astro.config.mjs:
astro.config.mjs
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare()
});

Actualmente existen dos modos soportados cuando utilizas Pages Functions con el adaptador @astrojs/cloudflare.

  1. Modo Advanced: Este modo es usado cuando deseas ejecutar tu función en modo advanced el cual toma el archivo _worker.js en dist, o un modo directorio donde las páginas compilarán el worker fuera de un directorio de funciones en la raíz de tu proyecto.

Si no hay modo establecido, por defecto será "advanced"

  1. Modo directory: Este modo es usado cuando deseas ejecutar tu función en modo directory, lo que significa que el adaptador compilará la parte del cliente de tu app del mismo modo, pero moverá el script de worker dentro de un directorio functions en la raíz de tu proyecto. El adaptador solo colocará un [[path]].js en ese directorio, permitiéndote añadir plugins adicionales y middleware que se puede verificar en el control de versiones.
astro.config.mjs
export default defineConfig({
  adapter: cloudflare({ mode: "directory" }),
});

Pages Functions te permiten ejecutar código en el servidor para habilitar funcionalidades dinámicas sin ejecutar un servidor dedicado.

Para comenzar, crea un directorio /functions en la raíz de tu proyecto. Al escribir tus archivos de funciones en este directorio generará de forma automática un Worker con funcionalidad personalizada en las rutas previamente designadas. Para aprender más sobre las funciones, consulta la documentación de Pages Functions.

📚 Aprende más sobre SSR en Astro.

Si encuentras errores, vuelve a verificar que la versión de node que estás usando localmente (node -v) coincida con la versión que estás especificando en la variable de entorno.

Cloudflare requiere node v16.13, la cual es una versión más reciente que el mínimo por defecto de Astro, así que verifica que estés usando al menos v16.13.

More Deployment Guides

Filtrar por tipo de despliegue