Comment tester une application locale via Internet avec ngrok
Contexte
De nos jours, il existe un certain nombre d’outils en ligne pour aider le développeur. Ces outils permettent de réaliser des analyses sur une page et de fournir des recommandations. Nous avons par exemple l’outil Google Console Search qui permet de voir comment le moteur de recherche récupère les informations de notre page.
Autre cas : Tester une application mobile qui doit appeler une API dont nous voudrions vérifier le comportement sur le poste de développement.
Cependant, pour l’outil ou d’autres, la page ou l’API doivent être disponible sur Internet. Et c’est là que l’outil ngrok
intervient.
Le principe
Il se décompose en deux parties : un module serveur et un module client.
Voici le déroulement :
-
Le module serveur est disponible sur Internet (le site https://ngrok.com).
-
Nous lançons le module client sur le poste local (ou la machine qui contient le service à exposer). C’est ce dernier qui se connecte au module serveur.
-
De là, le serveur met à disposition une nouvelle url.
-
Cette nouvelle url est accessible sur Internet.
-
Lors de l' accès à cette url, la demande sera transférée vers le module client (par le biais d’un tunnel mis en place entre le client et le serveur).
Il n’y a pas de problème avec les pare-feux car c’est le programme client qui se connecte à Internet (Nous sommes dans le bon sens).
Module Serveur
Le serveur est un service en ligne. Donc il n’y pas d’installation mais un compte à créer sur le site https://ngrok.com
Il existe plusieurs plans. Pour mon usage, le plan FREE à $0 est suffisant (for ever au moment de l’écriture de ce billet).
Une fois le compte créé, vous allez pouvoir récupérer le token. Cela permettra au client de s’authentifier auprès du serveur. Pour cela, allez dans le menu Getting Started > Your Authtoken.
Si vous avez une solution en hébergement autonome, n’hésitez pas à me laisser un commentaire (en bas de ce billet)
Module Client
Là, il faut installer le module client en local (ou sur la machine où il y a le service que nous souhaitons interroger via Internet).
Je ne traiterai que le cas de Linux dans ce billet, mais le programme est disponible sur plusieurs système d’exploitations libres ou non.
La première opération est de télécharger l’archive en allant sur le site https://ngrok.com/download puis nous allons la décompresser :
unzip ngrok-stable-linux-amd64.zip
Et c’est tout pour l’installation. Il y a juste un exécutable à démarrer.
Il n’y a pas besoin d’avoir le droit d’administrateur sur la machine.
En revance, Il va être nécessaire de renseigner notre token (la clé d’authentification). Pour cela, nous allons utiliser la commande suivante :
./ngrok authtoken <mon-token>
Pour information, il va stoker le token dans le fichier ~/.ngrok2/ngrok.yml
Utilisation
Nous allons simplement lancer le programme en précisant deux arguments, nous aurons :
./ngrok http 8820
ou
./ngrok http localhost:8820
Le premier argument permet d’indiquer que nous souhaitons utiliser le protocole http. Il est possible de réaliser des tunnels tcp ou tls avec l’option éponyme à la place de http.
Le second argument est soit tout simplement le numéro de port (l’hôte sera localhost), soit nous précisons l’hôte et le numéro de port séparé par le caractère deux points.
A ce moment là, le tunnel devient actif. Nous pouvons voir l’état et notamment l’url publique à utiliser.
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Account Lilian BENOIT (Plan: Free)
Version 2.3.40
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://1876d82f999d.ngrok.io -> http://localhost:8820
Forwarding https://1876d82f999d.ngrok.io -> http://localhost:8820
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
Maintenant, nous allons pouvoir prendre un navigateur pour accèder à l’url (par exemple sur mon téléphone portable)
A noter que le programme client ne rend pas la main. Pour l’arrêter, il faudra réaliser un CTRL+C dans le terminal.
Outils de suivi
Il existe différents outils à notre disposition pour suivre les différents échanges.
mode console
Nous pouvons simplement regarder la console, les différents appels sont visibles.
...
Connections ttl opn rt1 rt5 p50 p90
41 0 0.08 0.08 0.31 30.40
HTTP Requests
-------------
GET /resources/img/main/astuce.png 200 OK
GET /resources/css/phlat.css 200 OK
GET /resources/js/readingTime.js 200 OK
GET /resources/css/phlat-custom.css 200 OK
GET /resources/img/blog/2021/05/ngrok-par-navigateur.png 200 OK
GET /resources/img/main/avertissement.png 200 OK
GET /resources/js/bootstrap.min.js 200 OK
GET /resources/js/jquery-2.2.1.min.js 200 OK
GET /resources/js/highlight.min.js 200 OK
GET /resources/img/blog/2021/05/ngrok-authtoken.png 200 OK
mode web
En lançant le client, nous avons une interface web à notre disposition pour visualiser les appels et tous les détails :
-
le temps d’accès
-
Informations sur la requête (résumé, en-tête, brut et binaires)
-
Informations sur la réponse (résumé, en-tête, brut et binaires)
L’accès est sur le port 4040 par défaut. Pour être sûr, l’url est affichée dans la console lors du démarrage du module client.
Prenez votre navigateur et allez à l’url http://localhost:4040
Un onglet status est disponible. Cela permet d’avoir des métriques.
console ngrok
Sur la console https://ngrok.com, il est possible de voir la liste des points d’entrée disponible.
Lors de mon test, nous pouvons voir que nous avons deux points d’entrée actifs : Le premier en http et le second en https
Moteur de recherche
"Eduquer, ce n'est pas remplir des vases mais c'est d'allumer des feux." - Michel Montaigne
Billets récents
- Eclipse plante systématiquement sous Debian (et autres distribution Linux)
- JEP 463, Implicitly Declared Classes and Instance Main Methods (Second Preview)
- Debian - Montée de version de Debian 11 (Bullseye) à Debian 12 (Bookworm)
- JEP 451, Prepare to Disallow the Dynamic Loading of Agents
- JEP 444, Virtual Threads