Ngrok est un utilitaire qui vous attribue une URL publique et la redirige vers votre hôte local. Cela permet à toute personne en dehors de votre réseau d'utiliser l'URL publique pour accéder facilement à votre environnement de développement local.

Qu'est-ce que Ngrok?

Imaginons que vous développiez une application Web et que vous souhaitiez la partager avec vos collègues pour qu'ils la testent. Sans ngrok, vous pouvez soit le télécharger sur un petit serveur quelque part, ce qui prend du temps et ne copie pas des éléments tels que les bases de données locales, ou transférer votre routeur pour qu'il pointe vers votre ordinateur, qui est maladroit et ne fonctionne pas partout.

Ngrok résout ce problème en vous donnant une URL unique qui se connecte à votre appareil. Il agit comme une sorte de VPN et peut passer les pare-feu directement à votre appareil. Vous pouvez avoir plusieurs tunnels fonctionnant simultanément, et vous pouvez choisir les ports et le protocole pour chacun. Par exemple, vous pouvez transférer votre serveur Web fonctionnant sur HTTP sur le port 3000 et transférer votre base de données via une connexion TCP brute sur le port 8080.

Le client ngrok vous attribuera automatiquement une URL comme yourapp.ngrok.io:1234. C'est essentiellement un tunnel SSH, mais le point de terminaison est géré pour vous par le service ngrok. Ngrok a des plans payants, qui vous permettent d'exécuter plus de tunnels avec des URL réservées, mais le niveau gratuit est suffisant pour la plupart des tunnels et débogages de base.

Étant donné que les URL sont générées automatiquement sur l'offre gratuite, ngrok n'est pas adapté pour exécuter quoi que ce soit où la disponibilité est un problème. Mais de toute façon, vous ne devriez pas garder un tunnel vers votre ordinateur personnel ouvert tout le temps, simplement pour des raisons de sécurité. La même chose est vraie pour la redirection de port, mais ngrok peut être activé et désactivé, donc c'est mieux à cet égard.

Installer Ngrok

Pour commencer, accédez à tableau de bord en ligne de ngrok et créez un compte. Une fois que vous êtes authentifié, la configuration est relativement simple; ngrok n'a pas besoin d'être installé via un gestionnaire de packages, téléchargez simplement le binaire de votre système et décompressez le fichier, soit via votre explorateur de fichiers, soit avec le décompresser commander.

À partir de là, vous pouvez commencer à exécuter ngrok, mais vous souhaiterez probablement le déplacer hors de votre dossier Téléchargements et dans un endroit où vous pourrez y accéder de n'importe où. Sous Linux et macOS, cet emplacement est stocké dans la variable PATH, que vous pouvez trouver en exécutant:

echo $ PATH

Cela comprend généralement / usr / local / bin /, nous pouvons donc y déplacer ngrok en exécutant cette commande à partir du dossier Téléchargements:

sudo mv ngrok / usr / local / bin /

Ensuite, ngrok fonctionnera comme un utilitaire normal. Sous Windows, vous voudrez ajouter un nouveau dossier au PATH de votre système.

Cependant, avant de l'exécuter, vous devrez l'authentifier avec votre compte. Vous pouvez le faire en copiant le authtoken affiché à l'étape 3 du tableau de bord et en le collant avec la commande:

ngrok authtoken xxxxxxxxxx

Cela connecte votre compte et vous permet de créer des tunnels.

Comment configurer les tunnels Ngrok

Pour créer un tunnel, spécifiez simplement le port local auquel se connecter et le protocole que le tunnel utilisera. Par exemple, pour tunneliser un serveur Web local, vous exécutez:

ngrok http 80

Ce qui ouvrira une interface graphique affichant les connexions ouvertes actuelles et des informations sur votre session. L'URL du tunnel est indiquée sous "Transfert", que vous souhaitez copier.

Vous pouvez également démarrer plusieurs tunnels à la fois à partir d'un fichier de configuration. Ce fichier de configuration se trouve dans votre répertoire personnel, dans ~ / .ngrok2 / ngrok.yml. Par défaut, ce fichier sera vide à l'exception de votre authtoken. Vous pouvez ajouter des tunnels manuellement:

tunnels:
 http:
  proto: http
  adr: 80
 tcp:
  proto: tcp
  adr: 9090

Ce que vous pouvez ensuite tout démarrer en même temps en utilisant:

ngrok start --all

Ou commencez manuellement en spécifiant les noms des tunnels. Vous pouvez trouver toutes les propriétés du tunnel ainsi que d'autres exemples de fichiers de configuration dans la documentation ngrok.

Vous pouvez également créer des tunnels ngrok par programmation avec des clients wrapper pour votre langue. Par exemple, en utilisant le Emballage de nœud, vous pouvez faire en sorte que votre serveur Web se transfère automatiquement avec:

const URL = attendre ngrok.relier({proto: 'http', adr: 80});

… Qui stockerait l'URL de transfert dans une variable que vous utiliserez.

Inspecteur Ngrok

Une autre fonctionnalité qui rend ngrok particulièrement utile pour le débogage des applications Web est l'inspecteur de tunnel. Chaque fois que vous démarrez un tunnel, vous recevez également une URL pour une interface Web, généralement hôte local: 4040. Si vous l'ouvrez dans votre navigateur, vous verrez une liste de toutes les demandes passant par le tunnel, ainsi que le contenu et la réponse.

Il ne bat pas un environnement de développement d'API comme Facteur, mais cela reste très utile pour inspecter le trafic entre le client et le serveur. Il capture tout, y compris les demandes que votre application fait automatiquement.

Il existe un autre onglet intitulé "État" qui affiche l'état de santé de votre tunnel, y compris des statistiques telles que la durée de connexion et les connexions par seconde pour chaque tunnel.