Avec ngrok, partagez votre travail local avec le reste du monde…
Aujourd’hui, je vous propose de découvrir un super outil qui je suis sûr va vous intéresser. Son nom : ngrok.
Ngrok est une petite application gratuite qui vous permet, par exemple, de partager un site web en cours de développement sur votre machine locale avec n’importe qui dans le monde. Tout cela sans avoir à vous soucier de la configuration de votre routeur ou du pare-feu de votre entreprise !
Il y a quelque temps, notre confrère (et néanmoins ami) Korben avait rédigé un petit article concernant ngrok. C’est d’ailleurs grâce à lui que ce tutoriel voit le jour…
Que peut-on faire avec ngrok?
Si vous êtes développeur web ou administrateur système, cet outil est fait pour vous ! En effet, ngrok permet de rendre publics vos projets en cours de développement héberger sur votre machine locale.
Une fois l’application lancée, ngrok crée un tunnel sécurisé et vous fournit une adresse du type vwxyz.ngrok.com Voilà, c’est fini ! Il ne vous restera plus qu’à communiquer cette adresse à n’importe qui, pour qu’il l’ouvre depuis son navigateur. Il ne vous reste plus qu’à partager cette adresse, et votre interlocuteur pourra accéder à votre projet directement depuis son navigateur. Lorsque la requête atteint le serveur de ngrok, celui-ci redirige le sous-domaine vwxyz vers votre machine. C’est ce que l’on appelle communément dans le jargon informatique un reverse proxy (ou proxy inversé).
En plus de donner accès à votre machine via un port défini, ngrok offre également la possibilité d’analyser les requêtes web reçues et même de les rejouer. Ce n’est pas tout : vous pouvez également tester des connexions sécurisées en https ou SSL après une simple inscription sur le site de ngrok.com.
Mise en œuvre de ngrok
Dans un premier temps, il vous faut télécharger ngrok (disponible pour Windows, OS X ou Linux).
Seconde étape, décompressez le fichier précédemment téléchargé.
Troisième étape… lancez l’application.
Petit conseil : Sous Windows, je vous recommande de copier le fichier exécutable ngrok.exe dans le dossier C:\WINDOWS\System32 afin que vous puissiez le lancer de n’importe quel répertoire dans une console MS-DOS. Pour MacOSX et Linux, copiez-le dans le répertoire /usr/bin par exemple.
Utilisation rapide
Je vous propose de rentrer dans le vif du sujet avec un premier exemple concret d’utilisation…
Je suis développeur d’un site Internet et je veux faire tester mon beau site à quelqu’un de l’extérieur. J’ai peut-être installé un serveur WAMP sur mon ordinateur (style EasyPHP) et développé mon site en local. Le serveur Web est démarré sur mon ordinateur et il est paramétré sur le port 80. Tout fonctionne parfaitement sur ma machine.
Grâce à ngrok, je vais pouvoir partager mon site en local avec un collègue/client distant… sans avoir à tout transférer sur un serveur distant (Base de données, pages développées, extensions paramétrées…) ou encore à paramétrer mon routeur ou autre firewall.
Pour cela, je lance la commande suivante dans une commande MS-DOS (Windows) :
ngrok 80
Et pis c’est tout !
sous OS X ou Linux taper : ./ngrok 80
Qu’apprend-on ici?
-
- Le statut de la connexion : Tunnel Status : online
- La version du logiciel : 0.23/0.23
- Le protocole utilisé : http
- La translation d’adresse : https://774ada68.ngrok.com -> 127.0.0.1:80
- L’interface web de suivi d’activité de ngrok : http://localhost:4040
- Le nombre de connexions sur cette adresse : 0
- Le temps moyen pour une connexion : 0.00ms
Il ne vous reste plus qu’à communiquer le lien présent en face de « Forwarding ». Dans notre cas https://774ada68.ngrok.com
Pour arrêtez ngrok (ctrl + c) et le tunnel est rompu.
Débogage
Sachez également qu’une interface de suivi d’activité est également disponible… depuis votre navigateur http://localhost:4040
ngrok capture l’ensemble des trames HTTP et fournit une interface permettant de suivre l’activité en temps réel. Toutes les données XML ou JSON sont automatiquement mises en forme afin de faciliter le débogage. Enfin, vous pourrez rejouer certaines requêtes HTTP en cliquant sur le bouton Replay en haut à droite
Pour aller plus loin avec ngrok
Il est également possible d’aller plus loin en spécifiant certains paramètres au lancement de ngrok.
Comme énoncé un peu avant, je vous recommande de vous inscrire sur le site afin de pouvoir utiliser au maximum les options de ngrok. Pour cela, rendez-vous sur le site et cliquez sur le bouton « Sign Up ».
Après confirmation de vos coordonnées et la validation de création de votre compte, le site vous proposera de faire un don pour aider le développeur à payer les frais inhérents à son projet (développements, serveurs…) Ce n’est pas obligatoire pour que ngrok soit 100% fonctionnel. Dans ce cas, cliquez sur le bouton « Sorry, I can’t afford it » pour passer outre le paiement. Quand vous aurez testé et approuvé ce logiciel, rien ne vous empêche de revenir pour faire un petit don pour soutenir ce développeur.
Une fois ces étapes terminées, cliquez sur le lien Dashboard afin d’accéder à votre environnement personnel.
Ici, vous avez une information capitale concernant l’utilisation de votre ngrok, c’est votre token d’authentification. Cette clé vous permet d’avoir accès aux fonctionnalités complètes de ngrok sur n’importe quelle machine que vous utiliserez. De cette façon, même en changeant d’ordinateur, vos paramètres personnalisés seront utilisables.
Une fois cette commande exécutée sur une machine (un compte utilisateur, en fait), vous n’aurez plus à la réexécuter sur cette machine et ce compte.
Cette commande permet d’initier la 1ère connexion entre votre machine et ngrok. La partie recouverte en rouge est le token ID.
Mais ce n’est pas tout… Voici ce que l’on peut encore faire :
Ajouter une demande d’authentification pour accéder à votre tunnel (nom d’utilisateur + mot de passe) :
ngrok -httpauth="MonNom:MotdePasse" 80
Avoir un sous-domaine personnalisé (cachem.ngrok.com par exemple) :
ngrok -subdomain=cachem 80
Transférer un service non HTTP (un autre port que les ports web, par exemple le port ssh 22) :
ngrok -proto=tcp 22
le résultat sera quelque chose comme cela :
ngrok ... Protocol tcp Forwarding tcp://ngrok.com:50612 -> 127.0.0.1:22 ...
Ce qui signifie que pour accéder à votre ordinateur en ssh, votre collègue devra taper dans son terminal ou avec Putty la commande suivante :
ssh ngrok.com 50612
Transférer un service non local (exemple : le site web n’est pas votre ordinateur local, mais sur une autre machine de votre société) :
ngrok 192.168.0.1:80
Conclusion
En suivant ce tutoriel, vous aurez compris toute l’utilité de ngrok. Gratuit, autonome, open source et puissant, Ngrok est un excellent outil pour les développeurs web et administrateurs de services en ligne. Je vous le recommande vivement !