Comment configurer Cloudflare CDN en 2026

Introduction

Un CDN (Content Delivery Network) est un réseau de serveurs distribués mondialement qui met en cache votre contenu près des utilisateurs finaux, réduisant la latence et améliorant les performances. En 2026, avec la croissance du trafic web mobile et international, un CDN comme Cloudflare est indispensable pour toute application web.

Cloudflare offre un CDN gratuit, une protection DDoS et un déploiement facile via CLI. Ce tutoriel beginner vous guide pour déployer un site statique sur Cloudflare Pages, qui active automatiquement un CDN edge global sur 300+ data centers.

Pourquoi c'est crucial ? Sans CDN, un site hébergé à Paris mettra 500ms pour un utilisateur à Sydney. Avec Cloudflare, cela tombe à 50ms via cache. Vous apprendrez à créer un projet, configurer, déployer et tester. Résultat : site ultra-rapide, scalable, prêt pour production. (128 mots)

Prérequis

Compte gratuit sur Cloudflare
Node.js 18+ installé
Git installé
Un domaine (optionnel, sous-domaine gratuit via Cloudflare)
Éditeur de code (VS Code recommandé)

Installer Wrangler CLI

terminal

npm install -g wrangler
wrangler --version

Wrangler est la CLI officielle de Cloudflare pour déployer Pages et Workers. Cette commande l'installe globalement et vérifie la version (doit être 3.x+). Évitez les versions anciennes pour compatibilité 2026.

Initialiser le projet

Créez un dossier pour votre site statique. Nous allons déployer un exemple simple avec HTML, CSS et JS pour démontrer le cache CDN.

Configuration wrangler.toml

wrangler.toml

[pages]
# Nom du projet Pages
name = "mon-cdn-site"

# Dossier de build/output (votre site statique ici)
pages_build_output_dir = "./public"

# Compatibilité avec les anciennes versions
compatibility_date = "2026-01-01"

# Variables d'environnement (optionnel)
[vars]
API_URL = "https://api.example.com"

Ce fichier TOML configure votre projet Cloudflare Pages. pages_build_output_dir pointe vers le dossier public contenant index.html. La compatibility_date assure les features 2026. Placez-le à la racine du projet.

Site HTML principal

public/index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon Site CDN</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <h1>Bienvenue sur mon site CDN Cloudflare !</h1>
  <p id="content">Chargement...</p>
  <button onclick="loadData()">Charger données via API</button>
  <img src="/image.jpg" alt="Image CDN" id="image">
  <script src="/script.js"></script>
</body>
</html>

Page d'accueil complète avec liens vers CSS/JS. Le bouton déclenche un fetch pour tester le proxy CDN. Créez aussi public/style.css, public/script.js et une image public/image.jpg (téléchargez-en une libre).

Fichier CSS

public/style.css

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

h1 {
  text-align: center;
}

button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  background: #ff6b6b;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

Styles modernes pour le site. Tout est servi via CDN : CSS mis en cache automatiquement. Les gradients et responsive assurent un rendu pro sur mobile.

Script JavaScript

public/script.js

async function loadData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    document.getElementById('content').textContent = data.title;
    console.log('Données chargées via CDN proxy');
  } catch (error) {
    document.getElementById('content').textContent = 'Erreur de chargement';
    console.error(error);
  }
}

// Précharger image pour tester cache
window.onload = () => {
  document.getElementById('image').src = '/image.jpg?t=' + Date.now();
  loadData();
};

JS async pour fetch une API externe (proxiée par CDN). Teste le cache edge. window.onload précharge l'image. Fonctionnel, gère erreurs.

Déployer sur Pages

terminal

cd mon-projet-cdn
npx wrangler pages project create mon-cdn-site --production
npx wrangler pages deploy public --project-name mon-cdn-site

Crée et déploie le projet sur Cloudflare Pages. Le CDN est activé instantanément. URL fournie : https://mon-cdn-site.pages.dev. Utilisez --production pour prod.

Configurer le DNS

Dans le dashboard Cloudflare :

Ajoutez votre domaine.
Changez les nameservers vers ceux de Cloudflare.
Créez un CNAME : www → mon-cdn-site.pages.dev (Proxy activé pour CDN).

Propagation : 5-30min. Testez avec dig www.votredomaine.com.

Bonnes pratiques

Activez Polish : compression auto images/WebP dans dashboard > Speed > Optimization.
Cache Rules : Page Rules pour /api/ no-cache, /static/ cache everything.
HTTPS only : Obligatoire pour sécurité CDN.
Analytics : Activez Web Analytics gratuit pour metrics TTFB <50ms.
CI/CD : Intégrez GitHub Actions avec wrangler pour auto-deploy.

Erreurs courantes à éviter

Oublier pages_build_output_dir : déploiement échoue (404).
DNS sans proxy orange : pas de CDN, juste DNS.
Images trop lourdes sans Polish : latence haute.
Fetch sans mode: 'cors' : CORS errors sur API externes.

Pour aller plus loin

Maîtrisez Workers pour edge computing : Doc Cloudflare Workers. Optimisez avec APO pour WordPress. Découvrez nos formations Learni sur le Cloud pour DevOps avancé et CDN enterprise.