Ngrok, c’est quoi ?

Ngrok est un outil qui permet de rendre votre poste de développement web local accessible depuis l’extérieur, via un tunnel sécurisé, depuis une url du type https://azerty.ngrok.io.

Cette url est accessible par n’importe qui (vos clients, vos collègues...) et depuis n’importe où. De plus, Ngrok prend en charge pour vous les configurations délicates de pare-feu, en s’occupant d’ouvrir les ports nécessaires, en toute sécurité.

Un des grands avantages est de pouvoir tester les méthodes de paiements. En effet, Ngrok vous fournit une url accessible de l’extérieur, elle peut donc également être contactée par les PSP.
Conséquence : on peut recevoir les informations sur l’état des paiements sur son projet local et tester la cinématique complète de paiement et de traitement des commandes.

Autre avantage, l’outil met à disposition une interface qui permet de suivre en direct les requêtes HTTP faites sur votre url. On peut ainsi vérifier les requêtes et les relancer manuellement autant de fois qu’on le désire.

Cerise sur le gâteau, vous pouvez également, pour plus de sécurité, configurer un mot de passe pour ne pas ouvrir votre poste à n’importe qui.

Ngrok et Magento

Comment le mettre en place ?

Pour pouvoir l’utiliser il faut tout d’abord créer un compte sur https://ngrok.com. Il existe différentes offres dont une gratuite qui est déjà très complète. La formule payante permet notamment d’avoir la même url à chaque redémarrage du service.

Il faut d’abord télécharger et installer le client sur votre ordinateur (compatible Linux, Windows et Mac). On trouve le lien sur la page d’accueil après l’inscription.
Pour la première utilisation, on exécute cette commande avec le token disponible sur votre compte ngrok. Elle permet de créer la liaison sécurisé avec ngrok.

./ngrok authtoken $token

On peut ensuite démarrer le service ngrok sur le port souhaité à l’aide de la commande suivante :

./ngrok http 80

On retrouve alors dans le détail de ngrok l’url ouverte pour votre machine locale.
Dans mon exemple l’url est la suivante : http://62e73311.ngrok.io

Session Status online Account blackbird emilie (Plan: Free) Update update available (version 2.3.35, Ctrl-U to update) Version 2.3.34 Region United States (us) Web Interface http://127.0.0.1:4040 Forwarding http://62e73311.ngrok.io -> http://localhost:80 Forwarding https://62e73311.ngrok.io -> http://localhost:80 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00

Il faut attribuer le nom d’hôte à votre adresse IP locale dans votre fichier /etc/hosts :

127.0.0.1 62e73311.ngrok.io

Je configure mon virtual host apache sur le directory du projet visé. j’ajoute également un alias pour être tranquille et ne pas avoir à changer le ServerName à chaque redémarrage du service ngrok.

<VirtualHost *:80> ServerName 62e73311.ngrok.io ServerAlias *.ngrok.io ServerAdmin webmaster@localhost VirtualDocumentRoot /home/web/blackbird/htdocs/pub/ <Directory /home/web/blackbird/htdocs/pub/> Options FollowSymLinks Multiviews Indexes AllowOverride All Require all granted </Directory> ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined LogLevel warn <FilesMatch ".+\.ph(p[3457]?|t|tml)$"> SetHandler "proxy:unix:/run/php/php7.1-fpm.sock|fcgi://localhost" </FilesMatch> </VirtualHost>

Enfin, on redémarre apache

sudo service apache2 restart

Note : La démarche est similaire avec tous les autres serveurs web (httpd, nginx, etc) : il faut créer un vhost permettant de prendre en charge les appels sur l’url fournie par Ngrok.

Et sur magento ça marche comment ?

Pour travailler sur des webservices uniquement

Pour que ça puisse fonctionner sur notre projet Magento, il est important de vérifier que l’option “Auto-redirect to Base URL” est désactivée La configuration se trouve dans General / Web / Url Options / Auto-redirect to Base URL.
Si on ne désactive pas cette redirection, lorsque votre script va appeler l’url locale du type 62e73311.ngrok.io, votre requête sera redirigée vers la base url de votre store. Cela aura pour conséquence de perdre les paramètres de votre requête.

Magento config ngrok

Pour partager l’url à des clients ou voir un rendu sur mobile

Dans ce cas précis je conseille plutôt de changer la base url du projet avec l’url générée ngrok. Sinon on rencontrera des problèmes d’accès aux feuilles de styles ou images par exemple.

Magento config ngrok 2

Cas concrets d’utilisation

Echanges avec une méthode de paiement

L’intérêt principal pour moi est de pouvoir tester les méthodes de paiement sur Magento. Sur le projet MesSorties.fr, je l’utilise pour pouvoir développer et tester mes développements pour MangoPay.

J’ai configuré ngrok et mes webhooks sur mon url ngrok :

Magento config ngrok webhook

Lors des différents échanges avec MangoPay, je peux voir dans l’interface ngrok ( http://127.0.0.1:4040) les traces des requêtes effectuées sur mon application. Mieux encore : je peux relancer facilement une de mes précédentes requêtes.

Ngrok interface

Tests sur mobile

Je peux accéder facilement à mon projet local sur mobile et partager l’évolution du projet au client si besoin :

Utilisation de Ngrok pour tester un site en local sur mobile

Conclusion

Vous l’aurez compris, Ngrok permet de partager son environnement local très rapidement et de communiquer facilement avec des web services hébergés. Je suis sûre qu’il y a plein d’autres cas intéressants d’utilisations, n’hésitez pas à me partager les vôtres dans un commentaire.

En espérant que cet article vous aidera lors de vos prochains développements. Je tiens à préciser une dernière chose : cet outil doit uniquement être utilisé pour le développement : il faut en aucun cas l’utiliser sur un environnement de production.