Aller au contenu

Déployer 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 rendus à la demande, sur Cloudflare Workers et Cloudflare Pages.

Ce guide comprend :

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

Prérequis

Section intitulée « 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

Section intitulée « Cloudflare Workers »

Comment déployer à l’aide de Wrangler

Section intitulée « Comment déployer à l’aide de Wrangler »

  1. Installez la CLI de Wrangler.

    Fenêtre du terminal
    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.

    Fenêtre du terminal
    npx astro add cloudflare

    Ensuite, créez un fichier .assetsignore dans votre dossier public/ et ajoutez-y les lignes suivantes :

    public/.assetsignore
    _worker.js
    _routes.json
    En savoir plus sur le rendu à la demande dans Astro.

  3. Créez un fichier de configuration Wrangler.

    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
      }
    }

  4. Prévisualisez votre projet localement avec Wrangler.

    Fenêtre du terminal
    npx astro build && npx wrangler dev

  5. 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 de l’environnement d’exécution Cloudflare telles que les liaisons.

Comment déployer avec CI/CD

Section intitulée « 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. Suivez les étapes 1 à 3 de la section Wrangler ci-dessus.

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

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

  4. Configurez votre projet avec :

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

  5. Cliquez sur Save and Deploy. Vous pouvez maintenant prévisualiser votre Worker dans son sous-domaine workers.dev fourni.

Cloudflare Pages

Section intitulée « Cloudflare Pages »

Comment déployer à l’aide de Wrangler

Section intitulée « Comment déployer à l’aide de Wrangler »

  1. Installez la CLI de Wrangler.

    Fenêtre du terminal
    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.

    Fenêtre du terminal
    npx astro add cloudflare
    En savoir plus sur le rendu à la demande dans Astro.

  3. Prévisualisez votre projet localement avec Wrangler.

    Fenêtre du terminal
    npx astro build && npx wrangler pages dev ./dist

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

Section intitulée « Comment déployer un site avec Git »

  1. Envoyez votre code vers votre dépôt Git (par exemple GitHub, GitLab).

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

  3. Configurez votre projet avec :

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

  4. Cliquez sur le bouton Save and deploy.

Dépannage

Section intitulée « Dépannage »

Hydratation côté client

Section intitulée « 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

Section intitulée « 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.

Plus de guides de déploiement

Contribuer Communauté Parrainer