6 min de lecture

CDN et performance web - 02 - Configurer Cloudflare devant ton site

Mettre Cloudflare devant ton site en 15 minutes. DNS, proxy, SSL, page rules et premiers reglages de performance.

CDN Cloudflare DNS configuration sécurité
CDN et performance web 3 / 8
  1. 01 CDN et performance web - 00 - C'est quoi un CDN et pourquoi t'en as besoin
  2. 02 CDN et performance web - 01 - Comment fonctionne un CDN : cache, edge et origin
  3. 03 CDN et performance web - 02 - Configurer Cloudflare devant ton site
  4. 04 CDN et performance web - 03 - CDN devant un bucket : servir des images et fichiers statiques
  5. 05 CDN et performance web - 04 - La sécurité offerte par un CDN : DDoS, WAF et bot protection
  6. 06 CDN et performance web - 05 - Optimiser les performances : cache rules, workers et compression
  7. 07 CDN et performance web - 06 - Comparatif : Cloudflare vs CloudFront vs Fastly vs les autres
  8. 08 CDN et performance web - 07 - Glossaire
← Precedent Suivant →

02 - Configurer Cloudflare devant ton site

Ce que tu vas apprendre

  • Ajouter un site sur Cloudflare et migrer les DNS
  • La différence entre proxy mode et DNS only
  • Les modes SSL et pourquoi il n'y en a qu'un de correct
  • Les premiers reglages de performance a activer

Prerequisites

Creer un compte et ajouter ton site

Ca prend 15 minutes, montre en main. Va sur cloudflare.com, créé un compte (gratuit), et clique "Add a Site". Tu entres ton domaine, tu selectionnes le plan Free, et Cloudflare scanne tes enregistrements DNS existants.

Cloudflare importe automatiquement la plupart de tes enregistrements DNS. Verifie quand meme la liste. Il manque parfois des enregistrements MX (mail) ou des sous-domaines moins courants. Si tu utilises un service mail, assure-toi que les enregistrements MX, SPF, DKIM et DMARC sont bien la.

Ensuite, Cloudflare te donne deux nameservers (genre ada.ns.cloudflare.com et bob.ns.cloudflare.com). Tu vas chez ton registrar (OVH, Gandi, Namecheap...) et tu remplaces les nameservers actuels par ceux de Cloudflare. La propagation prend entre 5 minutes et 24 heures selon les registrars. Chez OVH, c'est généralement fait en moins d'une heure.

Proxy mode vs DNS only

Dans le dashboard DNS de Cloudflare, chaque enregistrement A ou CNAME a un petit nuage a cote. Orange = proxy active, gris = DNS only.

Proxy active (nuage orange) : le trafic passe par Cloudflare. Tu beneficies du CDN, du cache, de la protection DDoS, du WAF. L'IP de ton serveur est masquee. C'est ce que tu veux pour ton site web.

DNS only (nuage gris) : Cloudflare fait juste la résolution DNS, comme n'importe quel autre fournisseur DNS. Pas de cache, pas de protection, ton IP est visible. Utile pour les services qui ne supportent pas le proxy (serveurs mail, certains protocoles non-HTTP).

Regle simple : nuage orange pour tout ce qui est HTTP/HTTPS (ton site, tes API, tes sous-domaines web). Nuage gris pour le mail et les protocoles non-web.

Les modes SSL : un seul est acceptable

C'est la le piège dans lequel tombent beaucoup de gens. Cloudflare propose quatre modes SSL :

Off : pas de chiffrement. Non.

Flexible : HTTPS entre l'utilisateur et Cloudflare, mais HTTP entre Cloudflare et ton origin. Ca veut dire que le trafic entre Cloudflare et ton serveur circule en clair. Si quelqu'un intercepte ce trafic (compromission du data center, attaque réseau), il voit tout. Je déconseillé ce mode, meme si c'est le plus facile a configurer. C'est une fausse sécurité.

Full : HTTPS partout, mais Cloudflare accepte n'importe quel certificat sur l'origin, meme auto-signe ou expire. Mieux que Flexible, mais pas ideal.

Full (Strict) : HTTPS partout, et Cloudflare vérifié que le certificat de ton origin est valide (signe par une CA reconnue ou par Cloudflare Origin CA). C'est le seul mode que tu devrais utiliser.

Si ton origin tourne avec Caddy (comme paltemps.fr), tu as deja un certificat Let's Encrypt valide. Caddy le généré et le renouvelle automatiquement (j'en parle dans la serie déploiement). Active Full (Strict) et c'est regle.

Si tu ne peux pas avoir un vrai certificat sur ton origin, Cloudflare propose les Origin CA certificates. Tu générés un certificat dans le dashboard Cloudflare et tu l'installes sur ton serveur. Il est valide 15 ans, mais uniquement pour les connexions venant de Cloudflare.

Les reglages de performance a activer tout de suite

Dans la section "Speed" du dashboard, quelques paramètres gratuits a activer :

Auto Minify : Cloudflare minifie automatiquement le CSS, le JavaScript et le HTML. Ca enleve les espaces, les commentaires, les retours a la ligne. Le gain est modeste si tes assets sont deja minifies par ton build tool (Vite, webpack), mais ca ne coûte rien de l'activer.

Brotli : compression Brotli sur toutes les réponses texte. Brotli compresse 15-20% mieux que gzip. Tous les navigateurs modernes le supportent. Aucune raison de ne pas l'activer.

Early Hints (103) : Cloudflare envoie des headers 103 Early Hints au navigateur avant meme que la réponse HTML arrive. Le navigateur peut commencer a telecharger les CSS et JS critiques pendant qu'il attend le HTML. Sur les sites avec beaucoup de resources, ca réduit le LCP de 100-300 ms.

HTTP/2 et HTTP/3 : actives par défaut sur Cloudflare. HTTP/2 fait du multiplexing (plusieurs requêtes sur une seule connexion TCP). HTTP/3 utilise QUIC (base sur UDP) et réduit encore la latence, surtout sur les connexions instables (mobile, Wi-Fi).

Les Page Rules (et leur remplacement)

Les Page Rules permettent de définir des comportements spécifiques par URL pattern. Tu as droit a 3 Page Rules sur le plan gratuit.

Un exemple classique : forcer le cache sur un sous-domaine statique.

URL: media.tonsite.fr/*
Cache Level: Cache Everything
Edge Cache TTL: 1 month

Cloudflare est en train de migrer des Page Rules vers les "Rules" (Cache Rules, Configuration Rules, etc.). Les nouvelles rules sont plus flexibles et tu en as 10 gratuites au lieu de 3. Si tu configures un nouveau site aujourd'hui, utilise les nouvelles Cache Rules directement. Les Page Rules fonctionnent encore mais Cloudflare les déprécié progressivement.

Le plan gratuit est absurde de generosite

Je le dis franchement : ce que Cloudflare offre gratuitement est disproportionne. CDN mondial, DNS anycast avec des temps de résolution parmi les plus rapides du monde (1.1.1.1), protection DDoS illimitee, WAF basique, SSL automatique, Web Analytics sans tracking, 10 Cache Rules, et pas de limite de bande passante.

Le plan Pro a $20/mois ajoute l'optimisation d'images, un WAF plus complet et le support par email. Pour un site personnel ou un petit projet, le plan gratuit suffit largement. J'utilise le plan gratuit pour paltemps.fr depuis le début et je n'ai jamais eu besoin de plus.

Prochain article : CDN devant un bucket : servir des images et fichiers statiques.

Navigation : Precedent : 01 - Fonctionnement d'un CDN | Suivant : 03 - CDN devant un bucket

Sources

Retrouve d'autres articles techniques sur paltemps.fr.

Publie le · Mis a jour le

Articles liés

Réservez un audit gratuit de 30 minutes. Je vous montre concrètement ce qu'on peut automatiser.

Découvrir Pal'Temps