Déployer un blog Nuxt sur Cloudflare Pages

Cloudflare Pages est l'une des meilleures plateformes pour déployer une application Nuxt. Performances mondiales, intégration Git native, Workers pour le SSR — voici le guide complet.

Prérequis

• Un compte Cloudflare (gratuit)
• Un dépôt GitHub/GitLab
• Une application Nuxt avec compatibilityDate configuré

Configuration Nuxt pour Cloudflare

Dans nuxt.config.ts :

export default defineNuxtConfig({
  nitro: {
    preset: 'cloudflare-pages'
  }
})

Nuxt utilise Nitro pour l'adapter à différentes cibles. Le preset cloudflare-pages génère un build compatible Workers.

Structure du build

.output/
├── public/       # Assets statiques
└── server/       # Worker Cloudflare
    └── index.mjs

Variables d'environnement

Dans le dashboard Cloudflare Pages > Settings > Environment variables :

NUXT_PUBLIC_SITE_URL=https://monblog.com
NUXT_SESSION_SECRET=xxx

Les variables préfixées NUXT_PUBLIC_ sont exposées côté client.

Déploiement continu

Connectez votre dépôt GitHub à Cloudflare Pages. À chaque push sur main, un build est déclenché automatiquement.

Build command : pnpm run buildOutput directory : .output/publicRoot directory : / (ou le sous-dossier de votre monorepo)

Performance

Avec Cloudflare's edge network (300+ PoP), votre blog sera servi depuis le datacenter le plus proche de l'utilisateur. Les Time To First Byte (TTFB) descendent généralement sous les 50ms.

Combiné avec @nuxt/content en mode SQLite embarqué, vous obtenez un blog entièrement serverless sans base de données externe.