ngrok – Créez facilement un tunnel pour vos applications locales

3

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 une petite application gratuite qui va vous permettre par exemple de partager un site web en cours de développement sur votre machine locale avec n’importe qui à travers le monde… et ceci sans vous prendre la tête avec le paramétrage de votre routeur ou encore le firewall de votre entreprise !tuto-ngrok

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 Tuto voit le jour…

Que peut-on faire avec ngrok?

Si vous êtes développeur web ou responsable d’infrastructure, cet outil est fait pour vous ! En effet, ngrok va vous permettre de rendre public vos travaux en cours de développement sur votre machine locale.

Une fois l’application ngrok lancée, cette dernière va créer un tunnel et va vous fournir 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. Lorsque la requête web arrive sur le serveur de ngrok, ce dernier 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é).

Outre le fait que ngrok fournit un accès indirect à votre ordinateur sur un port défini, il vous offre également la possibilité d’analyse des requêtes web reçues et même de les rejouer. Mais ce n’est pas tout… vous allez pouvoir également vous essayer au https ou SSL, moyennant une inscription sur le site 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 !

start

sous OS X ou Linux taper : ./ngrok 80

ngrok OS X

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 inspect

 

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.

cmd2

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

Si vous avez suivi dans le détail ce tuto, vous aurez compris l’utilité de ngrok. Gratuit, autonome, Open Source et surpuissant… ngrok peut s’avérer être un excellent outil pour les développeurs de sites Internet ou de services Web divers. Je le recommande les yeux fermés.

Share.

About Author

Développeur confirmé et geek avant tout, j'aime partager mes découvertes. Mes tutos de plusieurs pages sont un peu long... mais très détaillés.

  • romain

    tuto bac + 10 🙂

    • Fx

      Tu trouves ? On a pourtant essayé de le rendre le plus accessible possible…

  • Julien CHENAVAS

    Si tu copies le binaire dans /usr/bin, tu n’as plus besoin du « ./ » pour le lancer!

Lire les articles précédents :
Chrome se met à jour… et Google change de logo

Une petite brève pour vous faire part d'une information, Google vient de mettre à jour son navigateur... Ce dernier passe...

Fermer