Rendre vos sites accessibles grâce à ngrok

Par Adrien RUIZBlog

Lorsque vous développez sur votre machine, vos sites ne sont pas directement accessibles depuis l’extérieur. Si vous travaillez sur un site e-commerce, par exemple, vos tests de paiement ne peuvent pas être finalisés, puisque le service bancaire de développement ne peut pas contacter votre site.

Plusieurs solutions s’offrent à vous, mais je vais vous détailler celle que je trouve la plus complète : ngrok.

Installation et premier lancement d’un tunnel sécurisé ngrok

Dans une utilisation basique, ngrok va créer un tunnel sécurisé entre votre machine et leurs serveurs. De la sorte, vos sites deviendront accessibles depuis l’extérieur par de le biais d’un nom de domaine dédié et généré aléatoirement dans sa version gratuite.

L’installation est relativement simple, elle est détaillée ici : https://ngrok.com/download.

Pour ma part, j’opte pour une installation sous linux, mais l’outil dispose d’une version compatible sur chaque SE.

On commence par télécharger l’archive zip, puis on la décompresse dans le répertoire /usr/local/bin/.

La commande ngrok devient disponible et peut être lancée très simplement :

ngrok http 80

Interface d’inspection de requêtes et adresses forwardées

Si tout se passe bien, l’outil vous affiche quelques informations intéressantes :

Web Interface http://127.0.0.1:4040
Forwarding http://2f97b411a8cf.ngrok.io -> http://localhost:80
Forwarding https://2f97b411a8cf.ngrok.io -> http://localhost:80

On retrouve l’accès à l’interface web vous permettant d’inspecter les requêtes entrantes et de les rejouer si nécessaire pour vous faire gagner un temps relativement important durant vos tests ou votre débogage 😎. Et enfin, les adresses HTTP et HTTPS pour accéder à votre site.

De nombreuses options sont disponibles vous permettant de personnaliser la manière d’initialiser le service, mais certaines seront accessibles que dans la version payante de l’outil plutôt abordable.

Pour vous simplifier la tâche, vous pourrez aussi créer un fichier de configuration ngrok avec des valeurs par défauts. Il pourrait par exemple contenir ceci :

authtoken: <TOKEN> # Pour la version payante uniquement
region: eu # On cible l'Europe pour moins de latence
web_addr: <IP>:4040 # Pour personnaliser l'IP de l'interface web d'inspection
tunnels:
  proxy:
    proto: http
    addr: 80

Configuration de votre serveur et de votre site

Le service tourne correctement, néanmoins, il restera encore quelques petites étapes pour finaliser la configuration.

Modifier le vhost de votre serveur web, en ajoutant un ServerAlias correspondant à l’adresse forwardée, exemple ci-dessus 2f97b411a8cf.ngrok.io. Notez que si vous restez en version gratuite, l’adresse changera après chaque initialisation du service.

ServerAlias 2f97b411a8cf.ngrok.io

Configurer votre site s’il a besoin de connaitre l’adresse sur laquelle il est accessible. C’est le cas par exemple pour WordPress et Magento. Sous Drupal, cela sera nécessaire uniquement si vous avez verrouillé les accès sur des domaines de confiance dans la configuration du projet.

Enfin, si vous souhaitez utiliser le HTTPS, il faudra ajouter à votre VHOST cette directive permettant d’indiquer à votre serveur web le protocole utilisé pour votre site :

SetEnvIf X-Forwarded-Proto https HTTPS=on

Une fois terminé, nous pouvons couper le service. Au passage, je vous conseille vivement de ne pas le laisser tourner indéfiniment. D’ailleurs, il me semble que le tunnel est automatiquement coupé au bout de quelques heures.

Donc vous l’aurez probablement compris, l’utilisation d’un tel service apporte de nombreux avantages :

  • Rendre notre site accessible depuis l’extérieur pour optimiser les tests et le débogage
  • Utiliser le HTTPS sur nos projets dès la phase de développement
  • Eviter de garder un site en développement trop longtemps ouvert, ce qui pourrait faire l’objet d’une indexation non souhaitée par les moteurs de recherche. Si vous ne prenez pas assez de précautions, Google pourrait indexer votre site de développement sans vous demander votre avis 😲
  • Eviter d’exposer votre machine en y routant les ports de votre box internet, par exemple. Des robots tournent continuellement sur différents couples d’IPs/Ports, ils pourraient finir par tomber sur votre IP et peut-être même accéder à vos sites 😨

Si vous êtes seul, la version gratuite devrait vous convenir. En revanche, à partir de 2 développeurs sur la même infrastructure de développement, je vous conseillerais d’opter pour le forfait Basic, sans quoi vous risqueriez d’être vite bloqués.