ITSkillsCenter
Développement Web

Configurer Cloudflare CDN devant Hetzner Object Storage : tutoriel 2026

12 min de lecture

📍 Article principal : Hetzner Object Storage 2026

Introduction

Une boutique en ligne de Dakar servait ses photos produits depuis Hetzner Object Storage Falkenstein. Latence depuis Dakar : 110 ms en moyenne, jusqu’à 200 ms en heure de pointe. Pour un catalogue avec 30 photos par page de catégorie, cela représentait 3 à 6 secondes de chargement complet — au-delà du seuil acceptable. La mise en place de Cloudflare en frontal a transformé l’expérience : la première visite télécharge depuis Hetzner et peuple le cache Cloudflare, les visiteurs suivants reçoivent les images depuis le PoP de Lagos en 35-45 ms. Le temps de chargement des pages catalogue est passé de 5 secondes à moins d’une seconde. Ce tutoriel décrit la configuration complète : DNS, SSL strict, règles de cache, transformations d’image à la volée, et monitoring des hits/miss pour valider l’efficacité réelle.

Prérequis

  • Bucket Hetzner Object Storage avec contenu public ou via signed URLs
  • Compte Cloudflare gratuit avec au moins un domaine géré
  • Sous-domaine disponible (par exemple medias.example.sn)
  • Niveau : intermédiaire — Temps : 45 minutes

Étape 1 — Configurer le DNS Cloudflare

Dans le tableau de bord Cloudflare du domaine, on crée un enregistrement CNAME pointant le sous-domaine choisi vers l’URL Hetzner. L’enregistrement doit être proxifié (nuage orange activé) pour que Cloudflare intercepte les requêtes et applique son cache et ses transformations. Si le nuage reste gris, on perd l’avantage du CDN — c’est l’erreur la plus commune dans cette configuration.

Type:    CNAME
Nom:     medias
Cible:   nom-du-bucket.fsn1.your-objectstorage.com
Proxy:   Oui (orange)

Après création, la propagation DNS prend de quelques minutes à une heure. On peut tester immédiatement avec dig medias.example.sn qui doit retourner les IPs de Cloudflare (104.21.x ou 172.67.x). Si on voit l’IP réelle d’Hetzner, le proxy n’est pas activé et il faut vérifier le nuage orange dans le dashboard.

Étape 2 — Configurer SSL Full strict

Dans les paramètres SSL/TLS du domaine Cloudflare, choisir le mode « Full (strict) ». Ce mode chiffre la communication entre le visiteur et Cloudflare via le certificat Cloudflare, et entre Cloudflare et Hetzner via le certificat Hetzner. C’est le seul mode acceptable pour la production — le mode « Flexible » laisse la communication Cloudflare-Hetzner en HTTP non chiffré, ce qui annule largement le bénéfice sécurité.

Hetzner Object Storage fournit nativement HTTPS sur l’URL your-objectstorage.com, donc le mode Full strict fonctionne sans configuration additionnelle côté Hetzner. La validation s’effectue automatiquement dès propagation DNS. Pour tester : ouvrir https://medias.example.sn/un-fichier.jpg dans le navigateur et vérifier que le cadenas est vert et que le certificat est délivré par Cloudflare.

Étape 3 — Règles de cache agressives

Par défaut, Cloudflare cache uniquement certaines extensions (.jpg, .png, .css, .js) et avec une durée modeste. Pour optimiser une plateforme de médias, on configure une page rule ou une règle de cache spécifique au sous-domaine medias qui cache TOUT en agressivement. Cette configuration suit deux principes : cache navigateur côté client pour éviter les requêtes répétées, cache edge côté Cloudflare pour servir tous les visiteurs depuis le PoP local.

// Page rule (legacy) ou Cache Rule (moderne)
URL pattern : medias.example.sn/*
Cache level : Cache Everything
Edge Cache TTL : 1 month
Browser Cache TTL : 1 day

Pour les médias versionnés par hash dans la clé (par exemple /photos/products/abc123-tshirt.jpg), on peut pousser le browser cache TTL à un an et marquer immutable. Le navigateur ne re-télécharge jamais le fichier tant que l’URL ne change pas. Pour invalider, il suffit de générer une nouvelle URL avec un hash différent. Cette stratégie d’immutabilité par URL est la plus efficace pour les médias statiques.

Étape 4 — Transformations d’images Cloudflare

Cloudflare Image Resizing transforme les images à la volée selon les paramètres en query string. Une seule version source dans Hetzner sert toutes les tailles et formats nécessaires côté frontend. Cette fonctionnalité, disponible sur le plan Pro à 20 dollars par mois ou via le plan Image Resizing dédié, élimine la nécessité de générer manuellement les thumbnails.

// Image originale dans Hetzner
https://medias.example.sn/photos/produits/tshirt-dakar.jpg

// Versions transformées via Cloudflare
https://medias.example.sn/cdn-cgi/image/width=300,format=auto/photos/produits/tshirt-dakar.jpg
https://medias.example.sn/cdn-cgi/image/width=800,quality=85,format=webp/photos/produits/tshirt-dakar.jpg

Le format auto détecte le navigateur du visiteur et sert WebP ou AVIF si supporté, sinon JPEG. Cette adaptation automatique réduit les tailles transmises de 30 à 50 % sans changer le rendu visuel. Pour un site e-commerce qui sert des centaines de photos par session, le gain de bande passante est substantiel et l’expérience utilisateur s’améliore mécaniquement.

Étape 5 — Invalidation du cache

Quand on met à jour ou supprime un fichier dans le bucket, le cache Cloudflare reste valide jusqu’à expiration TTL. Pour invalider immédiatement, on utilise l’API Cloudflare de purge. Trois niveaux possibles : purger une URL spécifique, purger un préfixe (par exemple toutes les images d’un produit), purger tout le cache. La granularité fine est préférable pour ne pas vider le cache global.

// Purge URL spécifique
curl -X POST 'https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache' \
  -H 'Authorization: Bearer {api_token}' \
  -H 'Content-Type: application/json' \
  --data '{"files":["https://medias.example.sn/photos/produits/tshirt-dakar.jpg"]}'

Pour intégrer cette purge dans la logique applicative, on l’appelle après chaque suppression ou modification de média côté serveur. Le coût en latence est faible (quelques centaines de ms) mais garantit la cohérence visible côté utilisateurs. Pour les SaaS qui n’ont pas besoin de cohérence immédiate (médias rarement modifiés), on peut s’en dispenser et laisser le TTL expirer naturellement.

Étape 6 — Monitoring du cache hit rate

Le tableau de bord Cloudflare expose pour chaque domaine le ratio cache hit / cache miss. Cette métrique est l’indicateur clé d’efficacité du CDN : un cache hit rate inférieur à 80 % signale une configuration sous-optimale. Trois causes typiques d’un faible hit rate : URLs avec query strings variables qui empêchent le cache, headers de réponse Hetzner qui désactivent le cache, ou TTL trop court qui force des refresh fréquents.

Pour atteindre des hit rates de 95 %+, on suit deux disciplines. Premièrement, normaliser les URLs : supprimer les query strings de tracking (utm_*, gclid) avant que la requête atteigne Cloudflare via une transformation rule. Deuxièmement, configurer le bucket Hetzner pour retourner Cache-Control: public, max-age=31536000 sur les médias publics, ce qui aligne les TTL des deux couches. Avec ces optimisations, on observe couramment 97-99 % de cache hit rate sur les médias statiques d’un site e-commerce mature.

Erreurs fréquentes

Erreur Cause Solution
Latence inchangée après config Nuage DNS gris au lieu d’orange Activer le proxy dans Cloudflare DNS
Erreur 525 SSL handshake Mode SSL Flexible au lieu de Full strict Passer en Full strict
Cache hit rate < 50 % URLs avec query strings variables Normaliser via Transform Rules
Fichier mis à jour pas visible Cache Cloudflare actif sur ancienne version Purge URL via API ou versioning par hash
Image Resizing ne fonctionne pas Plan Free sans cette fonctionnalité Plan Pro à 20$/mois ou Image Resizing 5$/mois

Adaptation au contexte ouest-africain

Trois aspects spécifiques. Premièrement, le PoP Cloudflare de Lagos sert efficacement le Nigeria, le Bénin, le Togo, et une partie de la Côte d’Ivoire. Le PoP Accra sert le Ghana. Pour Sénégal, Mali, Burkina Faso, le routing va parfois vers Lagos via opérateur local, parfois vers les PoPs européens — la latence varie selon le fournisseur d’accès du visiteur. Pour optimiser, configurer Argo Smart Routing (5 dollars par mois supplémentaires) qui choisit dynamiquement le PoP le plus rapide selon la topologie réseau réelle. Deuxièmement, pour les SaaS qui ciblent une audience large francophone (Afrique du Nord et de l’Ouest), Cloudflare offre une couverture comparable à AWS CloudFront pour 0 dollars (plan Free) là où CloudFront facture significativement. Troisièmement, l’analytique Cloudflare gratuite permet de visualiser la répartition géographique du trafic réel — précieux pour valider que les utilisateurs ouest-africains bénéficient bien du PoP local et identifier les régions où la latence reste élevée.

Pour les structures qui hébergent leurs services sur Hetzner et veulent maximiser leur ROI infrastructure, la combinaison Hetzner Object Storage + Cloudflare frontal est aujourd’hui le couple le plus économique tout en offrant des performances de niveau enterprise. Le coût mensuel total pour servir des médias à des dizaines de milliers d’utilisateurs ouest-africains tient sous 30 dollars, là où une solution équivalente AWS dépasserait 200 dollars. Cette frugalité change la trajectoire économique des SaaS qui démarrent.

Tutoriels frères

Pour aller plus loin

FAQ

Le plan Free Cloudflare suffit-il pour la production ?
Oui pour la majorité des sites jusqu’à plusieurs millions de pages vues mensuelles. Les limites du plan Free concernent les fonctionnalités avancées (Image Resizing, Argo, WAF custom) plus que le volume de trafic.

Cloudflare facture-t-il l’egress vers les visiteurs ?
Non, jamais. Cloudflare vit du modèle où les origins paient (parfois) leur côté tandis que la distribution edge est gratuite. C’est la promesse historique du service.

Image Resizing fonctionne-t-il avec n’importe quelle image stockée ?
Oui, tant que le format est supporté (JPEG, PNG, GIF, WebP, SVG). La transformation s’applique à la volée sans modification du fichier source dans Hetzner.

Que se passe-t-il si Cloudflare a une panne ?
Les médias deviennent inaccessibles via le sous-domaine Cloudflare. On peut basculer le DNS sur l’URL Hetzner directe en mode dégradé, mais cela perd le bénéfice CDN. En pratique, Cloudflare a un uptime supérieur à 99,99 %, les pannes sont rares et brèves.

Argo Smart Routing et optimisations avancées

Pour les SaaS qui veulent optimiser au maximum la latence depuis l’Afrique de l’Ouest, Cloudflare Argo Smart Routing (5 dollars par mois plus quelques centimes par Go transféré) ajoute une couche d’intelligence au routing inter-PoPs. Au lieu de suivre les chemins BGP standards parfois sous-optimaux, Argo choisit dynamiquement le chemin le plus rapide en se basant sur des mesures temps-réel. L’amélioration mesurée varie de 15 à 30 % de latence en moins selon les routes. Pour des utilisateurs à Bamako ou Niamey où le routing par défaut peut faire des détours surprenants, Argo donne souvent un gain net.

L’autre optimisation avancée est Tiered Cache, gratuit sur le plan Pro. Cette fonctionnalité organise les PoPs Cloudflare en hiérarchie : un PoP local (Lagos) demande à un PoP régional (Marseille) avant d’aller chercher à l’origine Hetzner. Cela augmente le hit rate global et réduit les requêtes vers Hetzner, ce qui contribue à rester sous le fair use d’egress. Pour une plateforme servant des médias volumineux à grande échelle, cette optimisation seule peut éviter d’avoir à passer sur un plan d’hébergement supérieur.

Sécurité applicative au niveau CDN

Mettre Cloudflare en frontal apporte aussi des bénéfices sécurité au-delà du cache. Le pare-feu applicatif (WAF) gratuit bloque les patterns d’attaque classiques (SQL injection, XSS, scanners automatisés). Le rate limiting natif limite les requêtes abusives par IP. La protection bot via Cloudflare Bot Fight Mode bloque les bots non-déclarés sans gêner les utilisateurs légitimes. Pour un SaaS qui sert du contenu utilisateur, ces protections gratuites valent largement la configuration de cinq minutes nécessaire pour les activer.

Pour aller plus loin sur les bucket privés, on peut implémenter une authentification au niveau Cloudflare via Workers : un Worker intercepte chaque requête vers medias.example.sn, vérifie un cookie ou un token JWT, et autorise ou refuse l’accès au fichier sous-jacent. Cette architecture permet de servir des médias privés (documents médicaux, dossiers RH) avec la rapidité du CDN tout en imposant l’authentification. Le coût : quelques dollars par mois pour le plan Workers Paid, contre la complexité d’implémenter le même contrôle directement côté serveur applicatif.

Comparaison avec d’autres CDN

Plusieurs CDN coexistent en 2026 et le choix dépend du contexte. AWS CloudFront s’intègre nativement avec S3 mais facture l’egress (0,085 dollars par Go en moyenne) et reste plus complexe à configurer. Bunny CDN propose des tarifs très bas (0,01 dollars par Go) avec couverture mondiale et un setup simple, mais sans la richesse fonctionnelle de Cloudflare (WAF, transformations d’images). Fastly cible les très gros volumes avec une grande personnalisation mais coûte significativement plus cher. Pour la grande majorité des SaaS ouest-africains, Cloudflare reste le meilleur compromis entre fonctionnalités, performance, et coût.

Bunny CDN mérite considération comme alternative pour les workloads massifs servis principalement en Afrique. Avec un PoP à Johannesburg et plusieurs en Europe et Moyen-Orient, le routing peut être compétitif. Le tarif transparent à 0,01 dollar par Go reste prévisible et bas. Pour des projets avec plusieurs To/mois servis principalement en Afrique, comparer Bunny et Cloudflare sur les chiffres réels du projet peut révéler des opportunités d’économie supplémentaires. La règle pratique : tester en parallèle sur un sous-domaine pendant deux semaines, mesurer hit rate et latence depuis les villes cibles, choisir selon les résultats observés.

Besoin d'un site web ?

Confiez-nous la Création de Votre Site Web

Site vitrine, e-commerce ou application web — nous transformons votre vision en réalité digitale. Accompagnement personnalisé de A à Z.

À partir de 250.000 FCFA
Parlons de Votre Projet
Publicité