Votre site en local accessible partout avec ngrok

Qui n’a jamais rêvé(e) de développer son site en local, tout en permettant un accès depuis internet ? Que ce soit pour :

  • Montrer l’avancement aux clients ou collaborateurs
  • Permettre à une API quelconque (Paypal, Amazon, Google…) d’appeler vos pages
  • Ou tout simplement pour vous le garder sous la main accessible par tous vos appareils et n’importe où

Ce serai tellement bien ! Eh bien c’est possible, et gratuitement même ! J’ai nommé…

nrgok, un tunnel sécurisé vers votre localhost

demo

ngrok est un reverse proxy en ligne de commande, qui va vous permettre d’établir une connexion sécurisée derrière votre par-feu, depuis n’importe où vers votre service en local. Bien entendu, cela ne se limite pas au développement web, et les usages que vous en ferez ne dépendes que de vous.

L’article part du postulat que vous êtes sur un système debian ou dérivé, mais il n’y a pas vraiment de différence d’utilisation entre les différents systèmes. Téléchargez ngrok sur la page de téléchargement du projet et décompressez le n’importe où. Rendez vous ensuite dans le dossier.

Une fois dans le dossier dans lequel se trouve l’utilitaire ngrok, rendez le exécutable si ce n’est pas le cas :

chmod +x ngrok

Puis déplacez le dans /usr/local/bin pour pouvoir l’appeler de n’importe où.

mv ngrok /usr/local/bin/

Et ensuite ? On le lance avec la commande « ngrok PROTOCOL PORT ». Prenons un exemple concret avec le protocole HTTP et le port 80 (celui par défaut de votre navigateur).

ngrok http 80

Ngrok va se lancer et vous devriez avoir quelque chose ressemblant à la capture d’écran ci-dessous :

ngrok

On peut distinguer deux zones distinctes sur la console. La première, « tunnel status », vous donnes les infos sur l’instance de ngrok en cours :

  • Forwarding vous indique l’adresse à rentrer dans votre navigateur depuis l’extérieur pour accéder directement à votre service en local, en .ngrok.io. Après la flèche -> se trouve l’adresse vers laquelle le tunnel pointe sur votre ordinateur.
  • Web interface vous donne l’adresse de l’interface web de ngrok, nous aborderons ce point dans quelques instants.

La seconde en dessous, « Http requests », liste évidemment les requêtes entrantes. Vous pouvez voir que si vous saisissez dans votre navigateur l’adresse ngrok de votre service, cette liste affiche les dernières connexions Http.

Parmi la multitude d’utilisation de ce formidable outil, une utilisation classique serait, par exemple, de donner l’adresse de l’instance à vos clients pour leur montrer l’avancement du projet, sans avoir besoin de mettre régulièrement des versions en ligne, ou, encore pire, de travailler directement sur serveur distant.

Mais ce n’est pas tout

ngrok vous permet également d’analyser sous toutes les coutures les requêtes entrantes avec une interface web en real time, s’il vous plait, vous pourrez y accéder par l’adresse localhost:4040. Voici un aperçu :

ngrok-web-interface

Cette interface, un peu à la manière des outils de développement intégrés aux navigateurs, vous permet d’analyser chaque requête et de consulter ainsi le retour de la page, la méthode HHTP, les headers, les données POST / GET…

C’est donc un outil fort pratique pour s’y retrouver, débugger, analyser…

Je vous laisse faire joujou avec, et bien sûr, lire la documentation (vous pensiez tout de même pas que je vous laisserais filer comme ça ? Aller hop, au boulot…) et à bientôt pour de nouveaux articles.

Adam Écrit par :

Développeur web et webdesigner en Freelance passionné de code et de design. Autodidacte et amoureux de la connaissance, je suis curieux et passe mon temps à apprendre de nouvelles choses, que j'ai envie de vous faire partager !

Soyez le premier à commenter

    Laisser un commentaire

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