L’hébergement Cloudflare Pages permet aux équipes frontend de déployer du code rapide, sécurisé et sans administration de serveur. En utilisant Cloudflare Pages , les développeurs bénéficient d’une plateforme performante native de l’edge pour déployer des applications web statiques, des applications monopages (SPA) et des frameworks avec rendu côté serveur (SSR). Grâce à une connexion directe à votre dépôt Git, Cloudflare automatise les pipelines de build, génère des déploiements de prévisualisation et héberge les ressources à l’échelle mondiale. Ce guide explique comment connecter Git, configurer les paramètres de build, configurer des domaines personnalisés et mettre en place des redirections.

Points clés à retenir :

  • Déployer des applications frontend natives de l’edge ; Cloudflare Pages distribue vos fichiers dans le monde entier sur le réseau de Cloudflare, garantissant des temps de chargement ultra-rapides.
  • Automatiser l’intégration Git ; associez votre dépôt pour déclencher des builds automatiques et générer des URL de prévisualisation pour chaque commit.
  • Configurer les paramètres de build des frameworks ; définissez les répertoires et les commandes de sortie pour React, Vue, Next.js, Hugo ou Astro.
  • Appliquer des règles de redirection et d’en-tête en utilisant de simples fichiers texte _redirects et _headers dans votre dossier public.
  • Associer des domaines personnalisés avec des certificats SSL gratuits et renouvelés automatiquement, gérés par Cloudflare.

Qu’est-ce que Cloudflare Pages ?

Cloudflare Pages est une plateforme d’hébergement serverless pour les développeurs frontend, similaire à Netlify ou Vercel, construite directement sur l’infrastructure mondiale de Cloudflare.

Plutôt que d’héberger des fichiers sur un seul serveur cloud, Cloudflare Pages distribue vos fichiers HTML, CSS, JavaScript et vos images dans des points de présence (Edge) du monde entier. Lorsqu’un utilisateur demande votre site, les ressources sont servies depuis l’emplacement le plus proche, réduisant ainsi la latence réseau. Pour les projets nécessitant une logique côté serveur, Pages s’intègre à Cloudflare Workers pour exécuter des fonctions backend. Pour comparer Pages avec d’autres services edge compute, lisez notre guide Cloudflare Pages vs. Workers .

Prérequis

Avant de commencer, assurez-vous de disposer des éléments suivants :

  • Un dépôt Git sur GitHub ou GitLab contenant votre projet (ou les fichiers compilés prêts pour un téléversement direct).
  • Un framework qui génère des ressources statiques — React (Vite), Vue, Astro, SvelteKit, Hugo ou du HTML brut. Les frameworks avec rendu côté serveur fonctionnent également grâce aux Pages Functions.
  • Un build local fonctionnel. Exécutez votre commande de build (par exemple npm run build) et confirmez que le dossier de sortie est généré sans erreur avant de connecter quoi que ce soit.
  • Un compte Cloudflare gratuit. Aucune carte de crédit n’est requise pour l’offre gratuite.
  • Node.js installé localement (recommandé) afin de pouvoir reproduire les builds et utiliser l’outil en ligne de commande Wrangler.

Un test rapide vous évitera des heures de débogage : si votre site ne se compile pas correctement sur votre propre machine, il ne se compilera pas non plus sur les serveurs de build de Cloudflare. Résolvez d’abord les erreurs locales.

Étape 1 : Connexion de votre dépôt Git

Pour commencer, connectez-vous à votre tableau de bord Cloudflare, accédez à Compute > Pages, puis cliquez sur Créer un projet.

Sélectionnez Se connecter à Git pour lier votre compte GitHub ou GitLab. Choisissez le dépôt contenant votre application web statique. Cette intégration est précieuse car elle établit un pipeline d’intégration continue (CI) : chaque fois que vous poussez du code vers votre branche de production, Cloudflare compile et déploie automatiquement les mises à jour. Pour les autres commits, Cloudflare génère des « URL de prévisualisation » uniques afin que vous puissiez tester les modifications avant de les fusionner.

Étape 2 : Configuration des paramètres de build

Cloudflare Pages prend en charge les générateurs de sites statiques et les frameworks frontend les plus populaires. Pendant l’assistant de configuration, configurez les paramètres suivants selon votre stack :

  • Commande de build : Le script de build défini dans votre package.json (comme npm run build ou hugo --minify).
  • Répertoire de sortie du build : Le dossier contenant les fichiers statiques compilés (comme dist, build ou public).
  • Variables d’environnement : Si votre script de build requiert des clés API ou des variables de configuration, définissez-les ici.

Cloudflare détecte automatiquement de nombreux frameworks, mais confirmer la configuration prédéfinie évite l’échec du premier build. Les combinaisons courantes sont les suivantes :

FrameworkCommande de buildRépertoire de sortie
React (Vite)npm run builddist
React (Create React App)npm run buildbuild
Next.js (export statique)npx next buildout
Astronpm run builddist
Vue (Vite)npm run builddist
SvelteKitnpm run build.svelte-kit/cloudflare
Hugohugo --minifypublic

Fixez votre version de Node. Une cause fréquente d’échec (« fonctionne en local, échoue sur Cloudflare ») est un décalage entre la version de Node par défaut du serveur de build et celle attendue par votre projet. Déclarez-la explicitement, soit comme variable d’environnement dans le tableau de bord :

1NODE_VERSION = 20

Soit en ajoutant un fichier .node-version à la racine de votre dépôt :

120

Étape 3 : Configuration des redirections et des en-têtes

Pour les applications monopages (comme React Router) ou les migrations d’anciennes URL, vous devez configurer des règles de routage et de redirection. Pages gère cela grâce à de simples fichiers texte placés dans votre répertoire de sortie.

Redirections (_redirects)

Créez un fichier nommé _redirects dans votre dossier public. Pour qu’une SPA React gère proprement le routage côté client, ajoutez la règle de repli suivante :

1/*  /index.html  200

Cela force toutes les requêtes à pointer vers index.html, permettant au routeur JavaScript de gérer le chemin.

L’ordre des règles est important. Cloudflare évalue les règles de haut en bas et s’arrête à la première correspondance. Les redirections spécifiques doivent donc se situer au-dessus de la règle générale de repli :

1# Permanent redirect for a moved page
2/old-pricing   /pricing            301
3
4# Redirect an entire section, preserving the sub-path
5/blog/*        /articles/:splat    301
6
7# SPA fallback (must come last)
8/*             /index.html         200

La variable :splat conserve la partie correspondante du chemin vers la destination. L’offre gratuite permet d’ajouter jusqu’à 2 000 règles de redirection statiques par projet. Au-delà, déplacez la logique dans une Pages Function ou utilisez les Redirections en masse (Bulk Redirects).

En-têtes personnalisés (_headers)

Créez un fichier nommé _headers pour appliquer des règles de sécurité, des politiques de référent (Referrer-Policies) ou des contrôles de cache personnalisés :

1/*
2  X-Frame-Options: DENY
3  X-Content-Type-Options: nosniff
4  Referrer-Policy: strict-origin-when-cross-origin

Ce fichier est également l’endroit idéal pour ajuster le cache. Les fichiers CSS/JS avec empreinte (hash) et immuables peuvent être mis en cache pendant un an, tandis que le HTML reste frais pour que les utilisateurs reçoivent toujours la dernière version :

1/assets/*
2  Cache-Control: public, max-age=31536000, immutable

Pour voir comment ces règles se comparent au routage backend traditionnel, lisez notre article sur la création d’une API serverless avec Cloudflare Workers .

Étape 4 : Association d’un domaine personnalisé

Une fois déployé, Cloudflare fournit un sous-domaine par défaut (par exemple votre-projet.pages.dev).

Pour associer votre domaine personnalisé, accédez à l’onglet Custom Domains de votre projet Pages, puis saisissez votre domaine (par exemple votreentreprise.fr). Si votre DNS est géré par Cloudflare, la plateforme configure automatiquement les enregistrements CNAME et génère instantanément un certificat SSL gratuit qui se renouvelle automatiquement. Si vous avez besoin d’aide pour gérer le mappage de domaines, les DNS ou la sécurité des serveurs, consultez la page de l’audit de sécurité des sites web .

Étape 5 : Déploiement avec la CLI Wrangler (Téléversement direct)

L’intégration Git convient à la plupart des équipes, mais vous pouvez également déployer directement depuis votre machine ou un pipeline existant à l’aide de Wrangler, l’outil en ligne de commande de Cloudflare. C’est très utile lorsque votre build s’exécute déjà dans GitHub Actions ou GitLab CI et que vous souhaitez uniquement envoyer le résultat final compilé.

Installez Wrangler et authentifiez-vous :

1npm install -g wrangler
2wrangler login

Compilez votre projet localement, puis envoyez le répertoire de sortie vers un projet nommé :

1npm run build
2wrangler pages deploy ./dist --project-name=my-web-app

Le premier lancement crée le projet s’il n’existe pas déjà. Dans un environnement CI, remplacez la commande interactive wrangler login par un jeton d’API (API Token) fourni via une variable d’environnement, afin d’éviter toute étape dans le navigateur :

1# .github/workflows/deploy.yml (excerpt)
2- name: Deploy to Cloudflare Pages
3  run: npx wrangler pages deploy ./dist --project-name=my-web-app
4  env:
5    CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
6    CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

Le téléversement direct évite l’étape de compilation de Cloudflare, ce qui élimine les problèmes liés à l’environnement de build et vous donne le contrôle total de votre chaîne d’outils.

Problèmes fréquents et dépannage

Quelques erreurs courantes expliquent la majorité des échecs de premier déploiement :

  • Erreurs 404 lors du rafraîchissement d’une route SPA. Une route côté client telle que /dashboard renvoie une erreur car aucun fichier physique ne correspond sur le stockage. La solution réside dans l’utilisation de la règle /* /index.html 200 dans le fichier _redirects, et dans la vérification que ce fichier est bien copié dans le répertoire de sortie du build.
  • Les fichiers _redirects ou _headers sont ignorés. Ces fichiers doivent se trouver dans le répertoire de sortie publié, et pas seulement dans le dépôt. Avec Vite, Astro ou SvelteKit, placez-les dans le dossier public/ (ou static/) pour que le processus de build les copie sans y toucher.
  • Le build réussit en local mais échoue sur Cloudflare. C’est presque toujours dû à une différence de version de Node ou à une variable d’environnement manquante. Fixez la version de Node et redéclarez les variables lues par le build.
  • Trop de fichiers ou déploiement trop volumineux. Un déploiement unique est limité à 20 000 fichiers, avec une taille maximale de 25 Mo par fichier. Les fichiers multimédias volumineux doivent être hébergés sur R2 ou sur un service d’images externe, et non dans le bundle statique.
  • Ressources obsolètes après une mise à jour. Les fichiers avec empreinte unique comme app.4f2c.js peuvent être mis en cache de manière agressive, mais pas le fichier index.html. Gardez un cache court pour le HTML.

Tests et considérations de production

Cloudflare crée un déploiement de prévisualisation pour chaque branche hors production et chaque pull request, chacun sur sa propre URL (par exemple abc123.my-web-app.pages.dev). Comme les prévisualisations s’exécutent sur le même réseau edge que votre site en production, elles constituent un endroit fiable pour examiner les modifications avant de les fusionner.

Pour les véritables mises en production, quelques réglages font toute la différence entre un simple hébergeur et un workflow fiable :

  • Restaurations (rollbacks). Chaque déploiement est conservé ; une version défectueuse peut donc être annulée en promouvant à nouveau un build précédent en production depuis le tableau de bord, en quelques secondes et sans recompilation.
  • Séparation des environnements. Définissez des variables différentes pour la production et la prévisualisation afin que les builds de prévisualisation pointent vers des API de préproduction plutôt que vers des données réelles.
  • Analytics et Core Web Vitals. Activez Cloudflare Web Analytics – respectueux de la vie privée et sans cookies – pour suivre les valeurs réelles de LCP, de CLS et le trafic des utilisateurs sans charger de script tiers.
  • Contrôle d’accès aux prévisualisations. Les URL de prévisualisation sont publiques par défaut. Si une branche expose un travail non publié, placez-la derrière Cloudflare Access afin que seule votre équipe puisse y accéder.

Mettre ces éléments en place dès le début permet de garder des déploiements prévisibles à mesure que le projet grandit et que davantage de personnes y contribuent.

Points clés à retenir

  • Cloudflare Pages héberge des applications web statiques sur le réseau mondial edge de Cloudflare, optimisant la vitesse de chargement.
  • Automatisez les déploiements en reliant GitHub ou GitLab pour compiler le code à chaque commit.
  • Définissez des commandes de build et des répertoires de sortie adaptés à votre framework (Astro, Next.js, Hugo, React).
  • Configurez les redirections et les en-têtes de sécurité à l’aide de simples fichiers texte _redirects et _headers dans votre dossier de sortie.
  • Associez des domaines personnalisés avec des certificats SSL gratuits et renouvelés automatiquement gérés directement par Cloudflare.

Optimisez votre infrastructure web

Le déploiement de frontends rapides et sécurisés nécessite de choisir la bonne architecture d’hébergement et les bonnes règles de mise en cache. Mecanik est spécialisé dans les services de développement de sites web et propose des services professionnels d’audit SEO technique . Nous concevons des plateformes React, Next.js et Astro sur mesure optimisées pour les Core Web Vitals et déployées sur Cloudflare. Contactez-nous dès aujourd’hui pour discuter de votre prochain projet.

Foire aux questions (FAQ)

Qu’est-ce que l’hébergement Cloudflare Pages ? C’est une plateforme d’hébergement frontend serverless qui compile et distribue des applications web statiques, des SPA React et des sites générés de manière statique (comme Astro ou Hugo) à l’échelle mondiale sur le CDN de Cloudflare.

Est-ce que Cloudflare Pages prend en charge le rendu côté serveur (SSR) ? Oui. Pages prend en charge les frameworks SSR (comme Next.js, Astro, SvelteKit) en convertissant automatiquement la logique du serveur en Cloudflare Workers serverless lors de la phase de compilation.

Comment configurer les redirections sur Cloudflare Pages ? Créez un simple fichier texte nommé _redirects dans le répertoire de sortie du build et écrivez vos règles de redirection en définissant le chemin source, le chemin de destination et le code de statut HTTP.

Est-ce que Cloudflare Pages est gratuit ? Oui. Cloudflare Pages propose une offre gratuite très généreuse comprenant des déploiements illimités, une bande passante illimitée et la gestion de domaines personnalisés, ce qui en fait une solution extrêmement économique.

Comment configurer un domaine personnalisé sur Pages ? Accédez à l’onglet Custom Domains dans le tableau de bord de votre projet Pages, saisissez votre nom de domaine, et Cloudflare se chargera de configurer les enregistrements DNS et de générer un certificat SSL gratuit.