Cherchez-vous comment rendre public (sur Internet) votre localhost où vous avez un projet d’un site web ou un autre projet, auquel vous souhaitez obtenir un URL public sans l’héberger sur un serveur ? Vous voulez présenter pratiquement votre projet à votre client ou faire une démonstration en temps réel depuis votre ordinateur sans le déploiement sur un serveur ? Bien ! Vous êtes au bon endroit. Je vous présente une solution appliquée par des milliers des développeurs, qui leur permettent d’obtenir un URL public pour leurs serveurs locaux grâce à un outil multi-plateforme, Ngrok.

Ngrok est un logiciel multi-plateforme permettant d’exposer les serveurs locaux à l’Internet par des tunnels sécurisés, utilisant le Protocol (HTTP, TCP ou UDP), il supporte aussi le Protocol HTTPS. L’intérêt pour un développeur est d’obtenir un URL public : 

• Pour la démonstration publique de son projet ou son site web en localhost à partir de son propre ordinateur sans avoir  le déployer un serveur.

• Pour les tests sur les appareils mobiles
• Pour tester son chatbot.
• Pour l’accès SSH à votre Raspberry Pi.
• Permettant de créer des intégrations webhook.
• Pour l’exécution de services de cloud personnel depuis votre domicile.

Là où Ngrok parait le plus meilleur, est qu’il donne en temps réel tout le trafic HTTP passant par vos tunnels avec lequel vous pourrez rejouer chacune de ces requêtes. En savoirs plus. 

A télécharger : Pack de Formation vidéo- Apprendre les bases du HTML, CSS, Javascript et PHP en 3 semaines 

Comment installer Ngrok

Ngrok est multi-plateforme, il est compatible avec Windows, Linux, Mac et FreeBSD. Pour obtenir Ngrok gratuitement : 

1. Accédez sur  https://ngrok.com/download pour télécharger le fichier zip correspondant à votre système d’exploitation. 

2. Une fois le fichier téléchargé, décompressez-le. La décompression dépend du système d’exploitation que vous utilisez : 

• Sous Windows, décompresser le fichier téléchargé et placer l’exécutable « ngrok.exe » dans le répertoire « C:\Windows\« . Désormais, Ngrok sera exploité à partir de l’invite de commande. 
• Sous Linux ou Mac, décompressez le fichier téléchargé depuis un terminal à l’aide de la commande suivante.  : unzip /path/to/ngrok.zip

Comment fonctionne Ngrok

Supposons que nous sommes sur un serveur local WAMP lancé sur le port 80. Pour créer un tunnel et obtenir un URL public, je n’ai qu’à entrer la commande suivante dans l’invite de commande : 

ngrok http 80

Cela devrait ensuite donner comme résultat : 

Dans le résultat de la commande : Session Status —- > Online indique que le service est en ligne, en dessous de cette ligne, vous pouvez remarquer que je suis connecté à mon compte Martin Matomo qui est d’ailleurs un compte Free, d’où l’annotation (Plan : Free). Cette authentification est faite par un authtoken installé. Le point suivant explique comment installer un authtoken.

Les lignes qui nous intéressent, ce sont les deux lignes homologues « Forwarding »  fournissant deux adresses identiques sauf au niveau du protocole, l’un est en http et l’autre utilise le protocole https. 

Maintenant, il ne reste qu’à communiquer l’adresse https://0339b403.ngrok.ioou http://0339b403.ngrok.io  à mon client ou à celui qui est censé d’accéder à mon localhost. Cet URL lui permettra de se connecter à mon localhost à travers  le tunnel NGROK. Voici comment j’ai accédé à cet URL depuis un portable. Et par là, je peux accéder à mes projets,   

accès distant à mon localhost – NGROK

Une fois qu’une personne accède à cette URL tunnel, vous pouvez suivre depuis votre terminal, tout le trafic HTTP passant par votre tunnel. 

Installer un authtoken

Un authtoken ou jeton d’authentification, contient les informations d’authentification d’un utilisateur. Étant donné que ngrok a des nombreuses fonctionnalités avancées, réservées qu’aux membres, il est nécessaire d’installer votre authtoken qui vous authentifie sans ré-entrer à chaque fois votre nom d’utilisateur et le passe enfin d’avoir accès à ces fonctionnalités.

Pour installer un authtoken, vous devez tout d’abord  créer  un compte ngrok. Une fois que vous avez créé un compte, votre authtoken apparaîtra dans le tableau de bord, copier-le, ensuite coller-le dans votre terminal. Cela devrait ressembler à la commande suivante : 

ngrok authtoken xxxxxxxxxxxxxxx

Vous aurez ensuite comme résultat : Authtoken saved to configuration file : C:\Users\Utilisateur/.ngrok2/ngrok.yml. Cela indique que votre authtoken est sauvegardé dans le fichier de configuration « ngrok.yml »

Personnaliser un sous-domaine pour votre URL.

Pour pouvoir définir un sous-domaine pour vos URLs, vous devez être un membre premium. Voir le plan de la souscription.

Le commutateur -subdomain permet de personnaliser un sous-domaine pour vos URLs de tunnel : ngrok http -subdomain=roomytuto 80. Vous aurez l’URL final : https://roomytuto.ngrok.io

Remplacez roomytuto par le nom souhaité.

Utiliser Ngrok avec WordPress

Ceux qui utilisent WordPress (moi également) pour développer des site web, il y a deux chose à faire pour que ngrok fonctionne parfaitement avec les installations WordPress.

WordPress doit générer des liens relatifs

Étant donné que ngrok fournit un autre domaine que celui de localhost,  WordPress doit générer des liens relatifs qui simplifiera et facilitera la mise à jour des liens et permaliens lorsqu’il y a changement de domaine. Alors pour vous assurer que WordPress génère des URLs relatives, vous devez installer l’un des trois plugins suivants : 

• Relative URL
• Root Relative URLs
• Odt Relative URLs

2. WordPress doit comprendre qu’il est censé se servir à partir de votre nom d’hôte tunnelé.

Pour configurer WordPress , vous devez ajouter deux lignes de code suivantes dans le fichier « wp-config » de votre installation WordPress : 

define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']); define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);

Le test que j’ai fait, ces deux lignes de code ont provoqué un débogage au niveau du chargement de la page, et je les ai supprimées dans le fichier wp-config. Seul le plugin Relative URL fonctionne parfaitement. 

Consulter la documentation de ngrok pour découvrir des fonctionnalités plus avancées

Des nombreuses fonctionnalités restent à découvrir dans la documentation de ngrok, vous allez découvrir entre autres  :

• Comment protéger votre tunnel par un mot de passe.
• Comment exécuter plusieurs tunnels simultanément
• Comment rendre public le service réseau exécuté sur le protocol  TCP.
• Comment utiliser ngrok avec Visual Studio
• Comment faire fonctionner ngrok par un proxy HTTP ou SOCKS5.
• Et plus encore. 

Je crois que cet article vous a plu, alors, n’hésitez pas de me laisser un commentaire. Merci, à très bientôt pour un autre article.