Exposer son environnement local rapidement avec ngrok

Etant actuellement sur un projet d'application Angular 4 nécessitant une compatibilité avec les navigateurs mobiles, je me suis demandé comment est-ce que je pourrai rapidement tester mon code front-end sans avoir à redéployer sur un serveur d'intégration toutes les 5 minutes.

La solution que j'ai retenue se nomme ngrok, tant pour sa simplicité d'installation que pour les fonctionnalités qu'il propose.

Il s'agit d'un petit outil standalone qui permet de créer un tunnel entre un port local et une adresse web distante générée à la volée par l'application. Nous allons voir ensemble comment le mettre en place et l'utiliser, avec des cas concrets.

Installation

Pour utiliser le service proposé par ngrok, il faut s'inscrire sur le site afin de se voir délivrer une clé d'authentification. Rendez-vous sur https://ngrok.com/ et cliquez sur le bouton "Sign up" pour vous créer un compte. Il est possible d'utiliser son compte Github ou Google, ou bien de créer un compte de toutes pièces.

Une fois cette étape faite, connectez-vous avec votre compte et vous serez redirigé vers un dashboard indiquant la démarche à suivre pour installer Ngrok  :

Pour les moins anglophones d'entre vous :

  1. Téléchargez ngrok
  2. Installez votre clé d'authentification (à faire une seule fois) en exécutant la commande indiquée
  3. Créez un tunnel en exécutant ./ngrok http <port>

Une fois la commande exécutée, ngrok va s'initialiser et vous fournira une adresse distante de la forme http://<id>.ngrok.com ainsi que d'autres informations :

Et... c'est tout ! Désormais vous pouvez accéder à votre réseau localhost depuis n'importe quelle machine connectée à internet via l'adresse donnée.

Utilisations

Lorsque vous lancez ngrok, un dashboard d'informations est disponible à l'adresse http://127.0.0.1:4040

Ce dashboard contient des informations sur les différentes requêtes faites à l'adresse donnée au lancement de ngrok, et les données sont mises à jour en temps réel. C'est un moyen efficace de comprendre ce qui ne va pas en cas de problème de communication entre le client et le serveur par exemple.

Ngrok offre de multiples possibilités de configuration, qui sont disponibles sur la documentation officielle de l'outil.

Conclusion

Ce genre d'outil peut être utile dans plusieurs cas de figure :

  • Comme expliqué dans l'introduction, il est possible d'accéder à son environnement local sur une machine distante, comme par exemple un smartphone, ce qui est idéal pour tester la compatibilité mobile
  • Il est aussi possible d'exposer son serveur REST à des fins de test, ou inversement de brancher son webhook local sur un service existant (Github, Api.ai...) pour vérifier son comportement.
  • Mais encore, pour faire une démonstration rapide à un client à distance

Cependant, n'oubliez pas qu'il s'agit plus d'un outil d'appoint pour les développeurs ! Si cela ne semblait pas évident, n'essayez pas de l'utiliser en production ! 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *