Déployez votre site Astro sur Cloudflare

Vous pouvez déployer des applications full-stack, y compris des ressources statiques front-end et des API back-end, ainsi que des sites SSR, sur Cloudflare Workers et Cloudflare Pages.

Ce guide comprend :

Comment déployer sur Cloudflare Workers
Comment déployer sur Cloudflare Pages

En savoir plus sur l’utilisation de l’environnement d’exécution Cloudflare dans votre projet Astro.

Pré-requis

Pour commencer, vous aurez besoin :

Un compte Cloudflare. Si vous n’en avez pas encore, vous pouvez créer un compte Cloudflare gratuit au cours de la procédure.

Cloudflare Workers

Comment déployer à l’aide de Wrangler

Installez la CLI de Wrangler.
Fenêtre du terminal
```
npm install wrangler@latest --save-dev
```
Si votre site utilise le rendu à la demande, installez l’adaptateur @astrojs/cloudflare.

Cela installera l’adaptateur et apportera les modifications appropriées à votre fichier astro.config.mjs en une seule étape.
Fenêtre du terminal
```
npx astro add cloudflare
```
En savoir plus sur le rendu à la demande (également connu sous le nom de SSR) dans Astro.
Créez un fichier de configuration Wrangler.
- Static
- SSR
wrangler.jsonc
{ "$schema": "node_modules/wrangler/config-schema.json", "name": "my-astro-app", // Mettre à jour à la date d'aujourd'hui "compatibility_date": "2025-03-25", "assets": { "directory": "./dist" } }
wrangler.jsonc
{ "$schema": "node_modules/wrangler/config-schema.json", "name": "my-astro-app", "main": "./dist/_worker.js/index.js", // Mettre à jour à la date d'aujourd'hui "compatibility_date": "2025-03-25", "compatibility_flags": ["nodejs_compat"], "assets": { "binding": "ASSETS", "directory": "./dist" }, "observability": { "enabled": true } }
Prévisualisez votre projet localement avec Wrangler.
Fenêtre du terminal
```
npx astro build && npx wrangler dev
```
Déployez en utilisant npx wrangler deploy.
Fenêtre du terminal
```
npx astro build && npx wrangler deploy
```

Une fois vos ressources téléchargées, Wrangler vous donnera une URL de prévisualisation pour inspecter votre site.

En savoir plus sur l’utilisation des API d’exécution de Cloudflare telles que les liaisons.

Comment déployer avec CI/CD

Vous pouvez également utiliser un système CI/CD tel que Workers Builds (BETA) pour créer et déployer automatiquement votre site après un « push ».

Si vous utilisez Workers Builds :

Suivez les étapes 1 à 3 de la section Wrangler ci-dessus.
Connectez-vous au tableau de bord Cloudflare et accédez à Workers & Pages. Sélectionnez Create.
Sous Import a repository, sélectionnez un compte Git puis le dépôt contenant votre projet Astro.
Configurez votre projet avec :
- Build command : npx astro build
- Deploy command : npx wrangler deploy
Cliquez sur Save and Deploy. Vous pouvez maintenant prévisualiser votre Worker dans son sous-domaine workers.dev fourni.

Cloudflare Pages

Comment déployer à l’aide de Wrangler

Installez la CLI de Wrangler.
Fenêtre du terminal
```
npm install wrangler@latest --save-dev
```
Si votre site utilise le rendu à la demande, installez l’adaptateur @astrojs/cloudflare.

Cela installera l’adaptateur et apportera les modifications appropriées à votre fichier astro.config.mjs en une seule étape.
Fenêtre du terminal
```
npx astro add cloudflare
```
En savoir plus sur le rendu à la demande dans Astro.
Prévisualisez votre projet localement avec Wrangler.
Fenêtre du terminal
```
npx astro build && npx wrangler pages dev ./dist
```
Déployez en utilisant npx wrangler deploy.
Fenêtre du terminal
```
npx astro build && npx wrangler pages deploy ./dist
```

Une fois vos ressources téléchargées, Wrangler vous fournira une URL d’aperçu pour inspecter votre site.

Comment déployer un site avec Git

Envoyez votre code vers votre dépôt Git (par exemple GitHub, GitLab).
Connectez-vous au tableau de bord Cloudflare et accédez à Workers & Pages. Sélectionnez Create, puis l’onglet Pages. Connectez votre dépôt Git.
Configurez votre projet avec :
- Framework preset: Astro
- Build command: npm run build
- Build output directory: dist
Cliquez sur le bouton Save and deploy.

Dépannage

Hydratation côté client

L’hydratation côté client peut échouer à cause du paramètre Auto Minify de Cloudflare. Si vous voyez Hydration completed but contains mismatches dans la console, assurez-vous de désactiver Auto Minify dans les paramètres de Cloudflare.

API d’exécution Node.js

Si vous construisez un projet qui utilise le rendu à la demande avec l’adaptateur Cloudflare SSR et que le serveur ne parvient pas à s’afficher avec un message d’erreur tel que “Si vous construisez un projet qui utilise le rendu à la demande avec l’adaptateur Cloudflare SSR et que le serveur ne parvient pas à s’afficher avec un message d’erreur tel que [Error] Could not resolve "XXXX. The package "XXXX" wasn't found on the file system but is built into node. :

Cela signifie qu’un paquetage ou une importation que vous utilisez dans l’environnement côté serveur n’est pas compatible avec les Cloudflare Workers runtime APIs.
Si vous importez directement une API d’exécution Node.js, veuillez consulter la documentation Astro sur la compatibilité Node.js de Cloudflare pour savoir comment résoudre ce problème.
Si vous importez un paquet qui importe une API d’exécution Node.js, vérifiez avec l’auteur du paquet s’il supporte la syntaxe d’importation node:*. Si ce n’est pas le cas, vous devrez peut-être trouver un autre paquetage ou utiliser un autre adaptateur.