Tuto NGrok, un outil pour tester vos sites et applications web
C’est par hasard que j’ai rencontré ce logiciel que je connaissais de nom sans savoir ce qu’il faisait, en fait je le confondais avec Grok.
NGrok est un logiciel qui permets d’exposer votre localhost à internet, ce se fait grâce à un tunnel SSH.
Commencez par télécharger le zip du logiciel, décompressez le pour avoir un exécutable (pas besoin d’installation)
Contenu
Démarrer Ngrok
vous allumez votre serveur web local, vous démarrer Ngrok avec la commande suivante :
$ ngrok http 80
#vous aurez un écran comme ceci
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Account apple (Plan: Free)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://xxxxxxxx.ngrok.io -> http://localhost:80
Forwarding https://xxxxxxxx.ngrok.io -> http://localhost:80
Connections ttl opn rt1 rt5 p50 p90
12 0 0.00 0.00 5.13 5.90
Notez bien l’url ayant comme domaine ngrok.io, il s’agit de l’adresse qui va aiguiller les requêtes su monde Internet vers votre site web en local !
En effet votre localhost n’est pas visible vis à vis de l’Internet. Car vous êtes derrière votre box ADSL ou Fibre, ce dernier doit être configuré en mode routeur pour que votre ordinateur soit accessible depuis le cloud. Heureusement que par défaut ce n’est pas le cas !
Vous disposez des deux adresses un en http et l’autre en https. Cette adresse va être mappée à votre http://localhost, si vous avez plusieurs sites dans leur répertoire, vous y accéderez en spécifiant le répertoire jusqu’à leur racine.
Par exemple soit la structure de répertoire suivant :
/ site1/ site2/ site3/public
Par défaut le / indique le répertoire racine du web correspondant à http://localhost. Pour accéder à site1 il vous faudra y accéder via :
http://xxxxxxxx.ngrok.io/site1 # de même http://xxxxxxxx.ngrok.io/site2 http://xxxxxxxx.ngrok.io/site3/public Pour le cas du stie 3, un installation Laravel ou Symfony, la racine web se trouve dans le dossier /public donc il faut le mettre dans l'url.
Pour voir les requêtes entrantes
Nous disposons d’un outil très intéressant pour savoir ce qu’on reçoit en nous mettons du côté du serveur web, en allant à l’adresse http://localhost:4040/, nous pouvons voir les requêtes entrantes et leurs détails.
Exemple d’utilisation de NGrok
J’ai eu à développer une application en React Native, qui s’appuie sur un back-end Laravel, et il y a vait des opérations Ajax de création d’utilisation ou d’identification, le problème c’est sous IOS, les urls des endpoints devaient être en https ! J’ai trouvé fastidieux de configurer en local un certificat SSL pour le développement, aussi j’ai dû pour faire mes test monter un virtual host sur un dédié, ce qui m’a pris un peu de temps.
Mais grâce à Ngrok, j’ai trouvé un moyen de requêter sur une url https vers un serveur de test (en l’occurence celui en localhost) très facilement, ce qui devrait accélérer le temps de développement !
D’autres usages : montrer à votre client son site web, ou à vos collègues développeurs.
Mais il y a bien plus de choses et je vous renvois à la documentation officielle pour les détails.
Ngrok Symfony
Quand vous utilisez un virtualhost en local pour développer une application comme Symfony, il faut faire une maniplation différente pour accéder à votre application web. En effet le répertoire qui sera exposé à Internet est dans le cas de Symfony 4. le répertoire /public. Si vous essayer d’accéder via la méthode décrite au début ça ne marchera pas, vous aurez une erreur. Il faut faire une autre commande :
./ngrok http -host-header=rewrite monsite:80
Avec cette méthode, quelqu’un de l’extérieur accédera à votre site en local comme si vous accédiez à votre site en local.
