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.

astuceAutre 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).

avertissementIl 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

astuceIl 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. ngrok authtoken

avertissementSi 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.

avertissementIl 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>

avertissementPour 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)

ngrok par navigateur

avertissementA 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

ngrok moniteur 4040

avertissementUn 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

ngrok liste endpoint