Comment partager votre site WordPress ou Drupal local avec Cloudflare Tunnel (Gratuit)
Lorsque vous développez localement avec DDEV, vous pourriez avoir besoin de partager votre travail avec des clients, de tester des webhooks provenant de services externes ou de collaborer avec des membres d'équipe distants. Cloudflare Tunnel offre un moyen sécurisé et simple d'exposer vos sites de développement locaux à Internet sans ouvrir de ports de pare-feu ni gérer de configurations réseau complexes.
Qu'est-ce que Cloudflare Tunnel ?
Cloudflare Tunnel (anciennement Argo Tunnel) fait partie de la solution réseau Zero Trust de Cloudflare. Il crée une connexion sécurisée, sortante uniquement, entre votre machine locale et le réseau périphérique de Cloudflare, qui achemine ensuite le trafic public vers vos services locaux. Cela signifie :
- Aucun port entrant ouvert - Votre pare-feu reste sécurisé
- Aucune adresse IP publique requise - Fonctionne derrière les NAT et les pare-feu d'entreprise
- Gratuit pour le développement - Les tunnels rapides de Cloudflare sont gratuits
- HTTPS par défaut - Chiffrement SSL/TLS automatique
- Configuration simple - Une seule commande pour commencer
Qu'est-ce que DDEV ?
DDEV est un environnement de développement local basé sur Docker qui facilite la configuration de projets PHP (Drupal, WordPress, Laravel, etc.) avec une configuration minimale. Il fournit :
- Des conteneurs préconfigurés pour le web, la base de données et d'autres services
- Prise en charge de plusieurs versions de PHP
- Certificats SSL intégrés pour le HTTPS local
- Outils en ligne de commande pour les tâches de développement courantes
Utiliser DDEV avec Cloudflare Tunnel vous permet d'exécuter votre site localement et de le partager publiquement si nécessaire.
Prérequis
Avant de commencer, assurez-vous d'avoir :
- Une machine Mac, Linux ou Windows avec Docker installé
- DDEV installé et configuré (guide d'installation officiel ou consultez mon guide sur la configuration de DDEV pour WordPress et Drupal)
- Un projet DDEV fonctionnel (nous utiliserons des exemples de sites comme
myproject.ddev.siteetclient-site.ddev.site) - Une familiarité de base avec la ligne de commande
- Aucun compte Cloudflare requis pour les tunnels rapides (la méthode couverte dans ce guide)
Note : Si vous souhaitez des URL persistantes avec des domaines personnalisés (couvert plus loin), vous aurez besoin d'un compte Cloudflare gratuit.
Étape 1 : Installer Cloudflared
Le démon cloudflared est le client qui crée la connexion tunnel. L'installation varie selon la plateforme :
macOS (Homebrew)
brew install cloudflaredLinux (Debian/Ubuntu)
wget -q https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb
sudo dpkg -i cloudflared-linux-amd64.debLinux (RHEL/CentOS)
wget -q https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-x86_64.rpm
sudo rpm -i cloudflared-linux-x86_64.rpmWindows
Téléchargez le programme d'installation depuis la page de téléchargement de Cloudflare ou utilisez Chocolatey :
choco install cloudflaredVérifiez l'installation :
cloudflared --versionÉtape 2 : Démarrer votre site DDEV
Assurez-vous que votre projet DDEV est en cours d'exécution. Naviguez vers le répertoire de votre projet et démarrez DDEV :
cd /chemin/vers/votre/projet
ddev startVotre site sera accessible localement à une adresse telle que https://votreprojet.ddev.site. Vérifiez qu'il fonctionne en l'ouvrant dans votre navigateur.
Étape 3 : Créer un tunnel Cloudflare vers votre site DDEV
C'est là que ça devient intéressant. Exécutez une seule commande et cloudflared crée un tunnel avec une URL publique automatiquement. Aucune configuration de compte, aucune authentification, aucune configuration n'est nécessaire. La syntaxe de base est :
cloudflared tunnel --url <url-locale> --http-host-header <nom-hote>Exemple 1 : Site de mon projet
cloudflared tunnel --url https://myproject.ddev.site/ --http-host-header myproject.ddev.siteExemple 2 : Site client
cloudflared tunnel --url https://client-site.ddev.site/ --http-host-header client-site.ddev.siteAprès avoir exécuté cette commande, vous verrez une sortie similaire à :
2025-10-14T10:30:15Z INF Merci d'essayer Cloudflare Tunnel. Le faire sans compte Cloudflare est un moyen rapide d'expérimenter et d'essayer. Cependant, sachez que ces tunnels sans compte n'ont aucune garantie de temps de disponibilité. Si vous avez l'intention d'utiliser des tunnels en production, vous devriez utiliser un tunnel nommé pré-créé en suivant : https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/
2025-10-14T10:30:15Z INF Demande d'un nouveau tunnel rapide sur trycloudflare.com...
2025-10-14T10:30:16Z INF +--------------------------------------------------------------------------------------------+
2025-10-14T10:30:16Z INF | Votre tunnel rapide a été créé ! Visitez-le à l'adresse (cela peut prendre du temps pour être accessible) : |
2025-10-14T10:30:16Z INF | https://sous-domaine-genere-aleatoirement.trycloudflare.com |
2025-10-14T10:30:16Z INF +--------------------------------------------------------------------------------------------+Copiez l'URL générée (par exemple, https://sous-domaine-genere-aleatoirement.trycloudflare.com) et partagez-la avec toute personne ayant besoin d'accéder à votre site local !
Comprendre les paramètres de la commande
Décortiquons ce que fait chaque paramètre :
--url: L'URL locale où votre site DDEV est en cours d'exécution. Utilisez HTTPS si votre site DDEV utilise le SSL (ce qui est le cas par défaut).--http-host-header: C'est crucial pour DDEV. Il indique à cloudflared de transférer le nom d'hôte correct dans l'en-tête Host HTTP. DDEV achemine les requêtes en fonction de cet en-tête, donc sans lui, vous obtiendrez un "404 Non trouvé" ou verrez le mauvais site.
Pourquoi --http-host-header est-il nécessaire ?
Le routeur de DDEV utilise l'hébergement virtuel, ce qui signifie que plusieurs sites peuvent s'exécuter sur la même adresse IP et le même port. Le routeur détermine quel site servir en fonction de l'en-tête Host dans la requête HTTP.
Lorsque le trafic passe par Cloudflare Tunnel, l'en-tête Host serait normalement le domaine généré par Cloudflare (comme sous-domaine-genere-aleatoirement.trycloudflare.com). En spécifiant --http-host-header myproject.ddev.site, nous annulons cela et nous assurons que DDEV voit le nom d'hôte correct.
Utiliser des tunnels nommés pour des URL persistantes
La méthode du tunnel rapide ci-dessus est parfaite pour le partage ad hoc, mais l'URL change chaque fois que vous exécutez la commande et il n'y a aucune garantie de temps de disponibilité. Si vous avez besoin d'une URL persistante avec votre propre domaine personnalisé (comme monprojet.example.com), vous pouvez créer un tunnel nommé. Ceci nécessite un compte Cloudflare gratuit.
1. Authentification auprès de Cloudflare
cloudflared tunnel loginCeci ouvre un navigateur pour vous authentifier auprès de votre compte Cloudflare.
2. Créer un tunnel nommé
cloudflared tunnel create mon-tunnel-ddevCeci génère un ID de tunnel et un fichier d'informations d'identification.
3. Créer un fichier de configuration
Créez ~/.cloudflared/config.yml :
tunnel: <ID-DU-TUNNEL>
credentials-file: /Users/votre_nom_utilisateur/.cloudflared/<ID-DU-TUNNEL>.json
ingress:
- hostname: mysite.example.com
service: https://myproject.ddev.site
originRequest:
httpHostHeader: myproject.ddev.site
noTLSVerify: true
- service: http_status:404Note : noTLSVerify: true est nécessaire car DDEV utilise des certificats auto-signés.
4. Acheminer votre domaine
cloudflared tunnel route dns mon-tunnel-ddev mysite.example.com5. Exécuter le tunnel
cloudflared tunnel run mon-tunnel-ddevVotre site est maintenant accessible à l'adresse https://mysite.example.com avec une URL persistante !
Cas d'utilisation courants
1. Démonstrations clients
Partagez des sites en cours de développement avec les clients sans les déployer sur des serveurs de staging :
cloudflared tunnel --url https://client-demo.ddev.site/ --http-host-header client-demo.ddev.siteEnvoyez l'URL générée à votre client pour un retour d'information instantané.
2. Test de Webhooks
Testez les webhooks de services comme Stripe, GitHub ou Twilio qui nécessitent une URL publique :
cloudflared tunnel --url https://webhooks.ddev.site/ --http-host-header webhooks.ddev.siteConfigurez le webhook dans le service externe pour pointer vers votre URL Cloudflare.
3. Test sur appareils mobiles
Testez vos conceptions responsives sur de vrais appareils mobiles sans être sur le même réseau :
cloudflared tunnel --url https://mobile-test.ddev.site/ --http-host-header mobile-test.ddev.siteOuvrez l'URL Cloudflare sur votre téléphone pour tester sur des appareils réels.
4. Collaboration à distance
Partagez votre environnement de développement avec des coéquipiers distants :
cloudflared tunnel --url https://team-collab.ddev.site/ --http-host-header team-collab.ddev.siteVotre équipe peut accéder au site comme si elle l'exécutait localement.
Dépannage
Obtention d'un 404 ou du mauvais site
Assurez-vous d'utiliser le paramètre --http-host-header avec le nom d'hôte DDEV correct :
cloudflared tunnel --url https://mysite.ddev.site/ --http-host-header mysite.ddev.siteErreurs de certificat SSL
Si vous utilisez un tunnel nommé avec un fichier de configuration, ajoutez noTLSVerify: true à la section de requête d'origine car DDEV utilise des certificats auto-signés.
Le tunnel ne démarre pas
Vérifiez si cloudflared est déjà en cours d'exécution :
ps aux | grep cloudflaredTuez les processus existants si nécessaire :
pkill cloudflaredLe site DDEV n'est pas accessible localement
Vérifiez que votre site DDEV est en cours d'exécution :
ddev describeAssurez-vous que l'URL que vous utilisez correspond à la sortie.
Considérations de sécurité
Bien que Cloudflare Tunnel soit sécurisé par conception, gardez ces points à l'esprit :
- N'exposez pas les bases de données de production - Ne tunnelisez que les sites de développement avec des données non sensibles
- Les tunnels rapides sont temporaires - Les URL expirent et ne doivent pas être utilisées pour la production
- Utilisez l'authentification - Pour les projets sensibles, ajoutez l'authentification Cloudflare Access à vos tunnels nommés
- Surveillez l'accès au tunnel - Consultez les analyses Cloudflare pour voir qui accède à vos tunnels
- Arrêtez les tunnels lorsque vous avez terminé - Utilisez Ctrl+C pour arrêter le tunnel lorsque vous avez terminé
Alternative : la commande de partage intégrée de DDEV
DDEV dispose également d'une commande intégrée ddev share qui utilise ngrok. Cependant, Cloudflare Tunnel offre plusieurs avantages :
- Gratuit sans limites de débit (le niveau gratuit de ngrok a des limites)
- Meilleures performances grâce au réseau mondial de Cloudflare
- Intégration avec Cloudflare Zero Trust pour des fonctionnalités avancées
- Tunnels nommés persistants avec des domaines personnalisés
Ceci dit, ddev share est encore plus simple si vous avez juste besoin de quelque chose de rapide et que vous ne voulez pas installer d'outils supplémentaires.
Simplifier le processus avec ddev-share-cf
Pour rendre ce processus encore plus facile, j'ai créé l'addon DDEV ddev-share-cf. Cet addon intègre Cloudflare Tunnel directement dans DDEV, vous permettant de partager vos sites locaux avec une simple commande sans gérer manuellement cloudflared ou les fichiers de configuration.
Installation
Installez l'addon avec une seule commande :
ddev get davo20019/ddev-share-cfUtilisation
Une fois installé, exécutez simplement :
ddev share-cfL'addon gère automatiquement toute la configuration du tunnel, le rendant aussi simple que la commande de partage intégrée de DDEV mais avec tous les avantages de Cloudflare Tunnel.