Vous travaillez dans le Web et vous souhaitez discuter de votre travail avec un collègue ou un client à distance ? ngrok va vous permettre de vous affranchir de tout transférer sur un hébergement distant ou d'ouvrir manuellement les ports de votre routeur !

ngrok (prononcez en-grok) est un petit utilitaire gratuit fort pratique. Lorsque l'on travaille sur un site Web en local, montrer l'avancement du projet à un client/collègue/ami peut devenir fastidieux : il faut transférer les fichiers sur un FTP, dupliquer la base de données, avoir un nom de domaine etc... Ou alors ouvrir le port 80 sur votre routeur et le rediriger vers votre PC. Mais il faut penser à le fermer une fois la conversation/démo terminée !

ngrok vous permet de créer un tunnel à partir d'Internet ultra simplement (une ligne à écrire) ! Il créé un reverse proxy sur votre machine et une URL de type a2feg3g9.ngrok.io vous pemettra d'accéder à votre Virtual Host présent sur votre PC à partir de l'extérieur.

Petit plus : ngrok vous met à disposition un petit dashboard qui affiche le trafic HTTP. Pratique pour débugger !

Téléchargement et installation

Rendez-vous sur le site de ngrok puis dans la rubrique Download.
Choisissez la version correspondante à votre environnement.

Ensuite, décompressez l'archive téléchargée et lancez l'application.

Si vous souhaitez accéder à la commande ngrok à partir de n'importe quel répertoire dans une console, rajoutez le chemin vers l'exécutable dans votre variable PATH.

Utilisation

Pour activer le tunnel ngrok, ouvrez une console MS-DOS (ou tout autre terminal) et exécutez la commande suivante :

ngrok http 80

Cela aura pour but de rediriger l'adresse en eca543ea.ngrok.io sur votre localhost:80.

Pour être concrêt, je travaille sur un PC Windows 7 avec WAMP Server et j'ai créé un Virtual Host nommé "supersite.local".
J'aurai pu utiliser la commande suivante pour créer un tunnel vers mon Virtual Host :

ngrok http supersite.local:80

Sauf que ça ne fonctionne pas avec WAMP, il redirige vers le localhost... Comme indiqué dans la doc, il faut utiliser l'option -host-header pour que les Virtuals Host fonctionnent :

ngrok http -host-header=supersite.local 80

Là, c'est bon ! Il ne me reste qu'à communiquer l'adresse http://92d1721f.ngrok.io/ à son destinataire et il pourra naviguer sur le site !

Détails du retour de la commande :

  • Statut de la connexion
  • Version du logiciel
  • URL d'accès à l'interface Web de suivi
  • URLs permettant d'accéder à votre Virtual Host local
  • Connections actives
  • Requêtes HTTP

Pour arrêter ngrok et détruire le tunnel, faites simplement CTRL+C.

Dashboard

ngrok met à votre disposition un outil de supervision des requêtes effectuées sur le site tunnelé. Il est accessible à partir de http://localhost:4040.

Vous aurez accès aux requêtes HTTP (vous pouvez même les relancer !) et à plein de statistiques dans l'onglet "status".

Rajouter une authentification par mot de passe

ngrok propose plusieurs paramètres. Vous pouvez par exemple définir une authentification avec un nom d'utilisateur et mot de passe pour accéder au site.

Pour utiliser cette option, vous devez créer un compte sur ngrok pour obtenir une clé API.

Une fois connecté sur le site de ngrok, vous avez votre clé. Lancez la commande suivante pour l'enregistrer dans votre PC :

ngrok authtoken {votre_cle}

Maintenant, pour activer le tunnel en utilisant un couple login/mot de passe, utilisez la même commande que précédemment mais avec l'option -auth :

ngrok http -auth="user:mdp" -host-header=supersite.local 80

Ici, le nom d'utilisateur est "user" et le mot de passe "mdp".

Conclusion

Je pense que vous l'aurez compris de vous même, ngrok est un petit soft très utile aux personnes travaillant dans le Web. Gratuit, ngrok est simple d'utilisation, l'essayer c'est l'adopter ;)