import ReadMore from '/components/ReadMore.astro'; import { Steps } from '@astrojs/starlight/components'; import StaticSsrTabs from '/components/tabs/StaticSsrTabs.astro';

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

Ce guide comprend :

:::note

Cloudflare recommande d'utiliser Cloudflare Workers pour les nouveaux projets. Pour les projets Pages existants, consultez le guide de migration de Cloudflare et la matrice de compatibilité.

:::

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

```bash npm install wrangler@latest --save-dev ```

2. 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. ```bash npx astro add cloudflare ``` Ensuite, créez un fichier `.assetsignore` dans votre dossier `public/` et ajoutez-y les lignes suivantes : ```txt title="public/.assetsignore" _worker.js _routes.json ``` <ReadMore>En savoir plus sur [le rendu à la demande dans Astro](/fr/guides/on-demand-rendering/).</ReadMore>

3. Créez un fichier de configuration Wrangler.

<StaticSsrTabs> <Fragment slot="static"> ```jsonc // 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", "not_found_handling": "404-page" // Si vous avez une page `src/pages/404.astro` personnalisée } } ``` </Fragment> <Fragment slot="ssr"> ```jsonc // 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 } } ``` </Fragment> </StaticSsrTabs>

4. Prévisualisez votre projet localement avec Wrangler.

```bash npx astro build && npx wrangler dev ```

5. Déployez en utilisant npx wrangler deploy.

```bash 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 de l'environnement d'exécution 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 :

  1. Connectez-vous au tableau de bord Cloudflare et accédez à Workers & Pages. Sélectionnez Create.

  2. Sous Import a repository, sélectionnez un compte Git puis le dépôt contenant votre projet Astro.

  3. Configurez votre projet avec :

    • Build command : npx astro build
    • Deploy command : npx wrangler deploy

  4. 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

```bash npm install wrangler@latest --save-dev ```

2. 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. ```bash npx astro add cloudflare ``` <ReadMore>En savoir plus sur [le rendu à la demande dans Astro](/fr/guides/on-demand-rendering/).</ReadMore>

3. Prévisualisez votre projet localement avec Wrangler.

```bash npx astro build && npx wrangler pages dev ./dist ```

4. Déployez en utilisant npx wrangler deploy.

```bash 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

  1. Connectez-vous au tableau de bord de Cloudflare et accédez à Compute (Workers) > Workers & Pages. Sélectionnez Create, puis l'onglet Pages. Connectez votre dépôt Git.

  2. Configurez votre projet avec :

    • Framework preset: Astro
    • Build command: npm run build
    • Build output directory: dist

  3. 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 de l'environnement d'exécution Node.js

Si vous créez un projet qui utilise le rendu à la demande avec l'adaptateur Cloudflare et que le serveur ne parvient pas à construire 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 paquet ou une importation que vous utilisez dans l'environnement côté serveur n'est pas compatible avec les API de l'environnement d'exécution Cloudflare.

  • Si vous importez directement une API de l'environnement 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 de l'environnement d'exécution Node.js, vérifiez avec l'auteur du paquet s'il prend en charge la syntaxe d'importation node:*. Si ce n'est pas le cas, vous devrez peut-être trouver un autre paquet.

Cours Astro