Débogage local sans douleur : atteindre HTTPS et un nom d'hôte personnalisé avec Cloudflare Tunnel

Dans notre développement quotidien, nous utilisons souvent http://localhost pour accéder et déboguer nos applications, ce qui est suffisant dans la plupart des cas. Cependant, dans des situations comme les suivantes, nous pourrions avoir besoin d'utiliser HTTPS et un nom d'hôte personnalisé pour déboguer nos applications :

• Lorsque votre application utilise une API qui nécessite HTTPS (comme l'API Web Crypto ou d'autres bibliothèques tierces qui nécessitent HTTPS)
• Lorsque vous souhaitez intégrer un service tiers qui vous demande de fournir une interface API accessible globalement basée sur HTTPS, et que vous devez déboguer cette interface

Il existe de nombreuses solutions à ces problèmes sur le marché, mais la plupart d'entre elles sont complexes et sujettes à des erreurs. Ici, je voudrais présenter comment utiliser Cloudflare Tunnel pour rapidement utiliser HTTPS et un nom d'hôte personnalisé pour le développement local.

Qu'est-ce que Cloudflare Tunnel#

Cloudflare Tunnel est un service fourni par Cloudflare qui vous permet de connecter en toute sécurité votre infrastructure au réseau Cloudflare. Il crée essentiellement une connexion sécurisée et efficace entre vos serveurs et le réseau mondial de Cloudflare, garantissant que votre trafic web est protégé et optimisé.

En utilisant Cloudflare Tunnel, vous pouvez facilement connecter votre machine de développement locale au réseau mondial de Cloudflare. Après cela, vous pouvez héberger votre domaine sur Cloudflare et transmettre les requêtes pour le domaine à votre machine locale via le Cloudflare Tunnel.

Prérequis#

Avant de commencer, assurez-vous que vous :

• Possédez déjà un nom de domaine et avez désactivé DNSSEC chez votre bureau d'enregistrement (là où vous avez acheté votre nom de domaine).
• Avez déjà créé un compte Cloudflare.

Remarque : Dans ce tutoriel, à des fins de démonstration, nous supposons que nous utilisons demo.com comme notre domaine.

Ajouter un site web à Cloudflare#

Premièrement, vous devez vous connecter au tableau de bord Cloudflare à l'aide de votre compte Cloudflare et sélectionner l'option "Website" dans le menu de gauche. Ensuite, cliquez sur le bouton "Get started" sur la page (s'il y a déjà un enregistrement, cliquez sur "Add website"). Suivez les instructions pour compléter l'ajout du site Web en utilisant le domaine que vous possédez. Après avoir ajouté le site Web avec succès, vous verrez le contenu suivant :

Comme montré dans l'image, le site Web ajouté n'a pas encore été activé. Vous devez suivre le guide de la page pour vous connecter à votre bureau d'enregistrement de domaine et mettre à jour les serveurs de noms du domaine pour activer votre site Web.

En prenant le domaine sur Godaddy comme exemple :

Accédez à la page Paramètres du domaine, accédez à l’option “Nameservers” sous l’onglet DNS, et changez les serveurs de noms aux valeurs affichées dans le guide :

Après avoir changé, attendez un court moment, et le site web correspondant sur Cloudflare sera activé :

Après avoir configuré ces contenus, votre domaine sera hébergé sur Cloudflare, et Cloudflare activera automatiquement HTTPS pour le domaine.

Créer un tunnel#

Retournez à la page d'accueil du tableau de bord Cloudflare, cliquez sur "Zero Trust" dans le menu de gauche, et sélectionnez "Tunnels" sous le répertoire 'Access'. Ensuite, cliquez sur "Add a tunnel" sur la page, et entrez un nom de tunnel quelconque (par exemple, my-dev-tunnel). Selon les instructions de la page, connectez votre machine de développement locale au tunnel Cloudflare.

En prenant MacOS comme exemple, ouvrez un terminal et exécutez la commande affichée sur la page :

Si votre machine a déjà installé "cloudflared" auparavant, vous n'avez pas besoin d'exécuter brew install cloudflare/cloudflare/cloudflared.

Après cela, exécutez cloudflared tunnel list dans votre terminal, et vous verrez que votre machine est déjà connectée au tunnel :

Router le trafic vers le tunnel créé#

Après avoir créé le tunnel, nous allons configurer les règles de routage pour le tunnel.

Supposons que notre application locale tourne sur le port http://localhost:3000, et nous voulons rediriger toutes les requêtes pour https://dev.demo.com vers le port où l'application locale tourne.

Tout d'abord, nous retournons à notre page de tunnel, trouvons le tunnel que nous venons de créer, cliquons sur le bouton à trois points sur la droite, et sélectionnons "Config".

Remplissez la configuration pertinente selon nos exigences :

Cette configuration route l'adresse dev.demo.com à http://localhost:3000 sur notre machine. Ensuite, cliquez sur "Save hostname".

Après une courte attente, accédez à https://dev.demo.com, et vous verrez l'application tourner sur notre machine locale :

Résumé#

Grâce à ce tutoriel, vous devriez maintenant être en mesure de mettre en œuvre aisément HTTPS et un nom d'hôte personnalisé dans votre environnement de développement local sans avoir à vous soucier des configurations complexes et des erreurs. J'espère que vous pourrez bénéficier de ce tutoriel !