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.

Retour en haut