← Retour à l'accueil
Développement Web • • 6 min de lecture

Optimiser son blog Astro avec le CDN Cloudflare

Découvrez comment configurer Cloudflare gratuitement pour accélérer votre blog Astro à l'international et protéger votre VPS contre les attaques.

Découvrez comment configurer Cloudflare gratuitement pour accélérer votre blog Astro à l'international et protéger votre VPS contre les attaques.

Pourquoi Cloudflare change tout pour un blog statique

Quand j’ai déployé mon blog Astro sur mon VPS Coolify, j’étais content de moi. Le site tournait, les pages se chargeaient. J’avais pourtant un problème. Chaque requête venait taper directement sur mon serveur en France. Un visiteur au Japon ou au Canada subissait une latence importante.

C’est là que Cloudflare entre en jeu. Ce CDN (Content Delivery Network) est un réseau mondial de serveurs qui met en cache votre site statique et le sert depuis le point de présence le plus proche du visiteur. Vos fichiers HTML, CSS et JS générés par Astro sont copiés sur des centaines de datacenters dans le monde, sans rien payer.

Pour un blog Astro entièrement statique (output: 'static'), c’est la configuration idéale. Astro génère des fichiers légers et Cloudflare les distribue au plus près des utilisateurs.

Étape 1 : Ajouter son domaine à Cloudflare

Commencez par importer votre domaine dans Cloudflare. Rendez-vous sur dash.cloudflare.com, créez un compte gratuit, puis cliquez sur “Add a site” et renseignez votre nom de domaine.

Cloudflare va scanner vos enregistrements DNS existants et les importer automatiquement. Vérifiez que l’enregistrement A pointant vers l’IP de votre VPS Coolify est bien présent. Ajoutez-le manuellement si besoin :

Type : A
Nom  : @  (ou votre sous-domaine)
IPv4 : XXX.XXX.XXX.XXX  (l'IP de votre VPS)
Proxy : Activé (nuage orange)

Le nuage orange est essentiel. Il indique que le trafic transite par Cloudflare, activant ainsi le cache et la protection DDoS.

Étape 2 : Changer les serveurs DNS chez votre registrar

Cloudflare vous fournira deux serveurs DNS personnalisés, ressemblant à ceci :

ada.ns.cloudflare.com
brad.ns.cloudflare.com

Il faut maintenant remplacer les DNS de votre registrar par ces deux adresses.

Chez OVH :

  1. Connectez-vous sur ovh.com puis allez dans Web Cloud, Noms de domaine.
  2. Sélectionnez votre domaine et ouvrez l’onglet Serveurs DNS.
  3. Cliquez sur “Modifier les serveurs DNS” et remplacez les serveurs OVH par ceux de Cloudflare.

Chez Hostinger :

  1. Allez dans la section Domains et sélectionnez votre domaine.
  2. Dans la section DNS / Nameservers, changez les serveurs pour ceux de Cloudflare.
⚠️ Attention
La propagation DNS peut prendre jusqu'à 48 heures. Pendant ce temps, votre site risque d'être momentanément inaccessible ou de se comporter de manière imprévisible. Attendez que la propagation soit terminée avant de configurer le SSL.

Une fois l’opération validée, votre domaine affichera le statut “Active” dans le dashboard Cloudflare.

Étape 3 : Configurer le SSL en mode Full (Strict)

C’est le réglage le plus important pour la sécurité, et souvent le plus mal configuré. Dans votre dashboard Cloudflare :

  1. Cliquez sur votre domaine, puis allez dans SSL/TLS et Overview.
  2. Sélectionnez l’option “Full (strict)”.

Ce mode garantit que Cloudflare vérifie l’authenticité du certificat SSL de votre serveur d’origine. Cela empêche les interceptions de trafic entre Cloudflare et votre VPS.

Votre VPS doit posséder un certificat SSL valide pour que cette option fonctionne. Si vous utilisez Coolify, il gère automatiquement les certificats Let’s Encrypt pour vos services. Vérifiez simplement que le HTTPS est bien actif sur votre domaine côté Coolify avant d’activer le mode Strict.

🛡️ Astuce Sécurité
N'utilisez jamais le mode "Flexible" en production. Il chiffre uniquement la connexion entre le visiteur et Cloudflare, laissant la communication entre Cloudflare et votre VPS en HTTP clair. Le mode Full (strict) est la seule option vraiment sécurisée.

Activer la redirection HTTPS automatique

Toujours dans la section SSL/TLS, allez dans Edge Certificates et activez ces deux options :

  • Always Use HTTPS : redirige automatiquement le trafic HTTP vers HTTPS.
  • Automatic HTTPS Rewrites : corrige les ressources mixtes, par exemple les images chargées en HTTP sur une page HTTPS.

Étape 4 : Optimiser les performances avec le cache

Cloudflare met en cache votre blog statique par défaut pour les extensions courantes (.html, .css, .js, .png). Vous pouvez forcer une conservation plus longue en créant une règle personnalisée :

  1. Allez dans Caching, Cache Rules, puis Create rule.
  2. Condition : Hostname equals votre-domaine.com.
  3. Cache eligibility : Eligible for cache.
  4. Edge TTL : 1 mois.

Votre blog statique ne changeant pas constamment, cette règle réduit fortement la charge sur votre VPS tout en améliorant les temps de réponse.

Minification automatique

Dans la section Speed, Optimization, puis Content Optimization, activez :

  • Auto Minify : cochez JavaScript, CSS et HTML.
  • Brotli : active la compression pour les ressources textuelles.

Astro génère un code propre, mais la minification de Cloudflare retire les derniers octets superflus.

⚠️ Pensez à purger le cache après un déploiement
Après avoir publié un nouvel article ou corrigé un bug, Cloudflare continuera de servir l'ancienne version depuis son cache. Si vos modifications ne s'affichent pas, allez dans Caching, Configuration, Purge Cache et cliquez sur Purge Everything. Pour une approche plus ciblée, utilisez Custom Purge avec l'URL de la page modifiée.

Étape 5 : Protéger son VPS avec le proxy Cloudflare

Masquer l’adresse IP de votre VPS est un atout majeur de Cloudflare. Quand le nuage orange est activé, les visiteurs et les bots ne voient que les adresses de Cloudflare. Votre serveur reste invisible.

Les attaques DDoS destinées à saturer votre serveur sont ainsi absorbées par l’infrastructure de Cloudflare avant de pouvoir atteindre votre VPS Coolify.

🛡️ Astuce Sécurité
Pour garder votre IP secrète, ne créez pas d'enregistrement DNS avec le nuage gris pour votre domaine principal. Un enregistrement MX ou un sous-domaine non protégé suffit à révéler votre IP.

Activer le WAF et les règles de sécurité

Dans Security, Settings, configurez le niveau de sécurité sur Medium pour commencer. Vous pouvez aussi activer le Bot Fight Mode pour bloquer le trafic des bots qui scannent le web à la recherche de failles.

L’onglet Security, Events affiche en temps réel les IP bloquées et les types d’attaques détectées.

Un blog Astro rapide et protégé

Votre blog dispose maintenant d’une infrastructure solide. Le CDN sert vos pages depuis le datacenter le plus proche, accélérant le chargement partout dans le monde. Côté sécurité, le SSL Full garantit un chiffrement complet, tandis que l’IP de votre VPS reste introuvable pour bloquer les attaques.

C’est la configuration que j’aurais aimé trouver en commençant avec Coolify. Si une étape vous bloque, dites-le moi en commentaire.

📚 Pour aller plus loin