🚀 Guía Astro + Cloudflare

Paso 1: Preparación del Terreno

No abras el editor todavía. Vamos a limpiar el entorno.

Abre una terminal CMD como administrador.

CMD

cd "C:\Users\User\Documents\Entrenamiento entrevistas\cloudflare\docs\aprendizaje"

Check de Node

node -v

Debe devolver v22.x.x. Si no:

nvm use 22

Paso 2: Creación del Proyecto

CMD

npm create astro@latest mi-primer-astro

Respuestas:

• Include sample files
• Install dependencies → Sí
• TypeScript → Yes
• Git → Sí

Paso 3: Configuración en VS Code

Archivo .npmrc

Plaintext

engine-strict=true

package.json

JSON

{
  "engines": {
    "node": ">=22.12.0"
  }
}

Instalar adaptador

Bash

npx astro add cloudflare

Paso 4: Configuración Astro

JavaScript

import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';

export default defineConfig({
  output: 'server',
  adapter: cloudflare({
    platformProxy: { enabled: true }
  }),
  vite: {
    ssr: {
      external: ['node:fs', 'node:path', 'fsevents']
    },
    build: {
      minify: true
    }
  }
});

Paso 5: Prueba Local

Build

npm run build

Wrangler

npx wrangler pages dev ./dist

Abre: http://localhost:8788

Paso 6: Deploy

Configura en Cloudflare:

• Framework: Astro
• Build command: npm run build
• Output: dist

Variable de entorno:

NODE_VERSION=22