Accéder à localhost depuis n’importe où

Vous avez passé des heures à travailler localement sur votre ordinateur, pour que le nouveau design du site web soit parfait. Votre CMS est bien configuré avec du contenu d’exemple et vous souhaitez le tester sur quelques appareils mobiles et tablettes. Votre client veut également jeter un coup d’œil — mais vous n’avez pas le temps de tout migrer vers un serveur public pour leur donner un aperçu rapide.

Si vous êtes développeur web, il est fort probable que vous ayez déjà vécu cette situation à maintes reprises. Et vous avez probablement passé ces moments à consacrer un peu d’huile de la nuit à la migration de tout cela vers un serveur accessible au public, en souhaitant qu’il existe une manière plus simple.

À tous ces développeurs web aux yeux fatigués, je suis là pour vous dire qu’une manière plus simple est arrivée ! En fait, un grand nombre d’applications et de services sont disponibles pour faciliter ce processus en vous donnant accès à votre localhost depuis le Web. Ceux dont je parlerai dans cet article sont :

• ngrok
• PageKite
• localtunnel
• boringproxy
• BrowserStack

Points clés à retenir

Comment est-il possible d’accéder à localhost depuis n’importe où?

C’est possible grâce aux services de tunnel sécurisé en ligne! Ce sont des services qui vous fournissent un tunnel depuis Internet vers votre machine.

Cela signifie qu’ils fournissent une URL accessible publiquement, surveillent les appels sur cette URL et les transmettent à votre serveur localhost. Toute la configuration complexe a été faite pour vous; tout ce que vous avez à faire est d’installer une application et de la diriger vers votre localhost.

A Note About Using Virtual Hosts

Sur mon localhost, j’ai des hôtes virtuels configurés. Sans avoir l’adresse de chaque service ci-dessous listée comme un ServerAlias, mon serveur refuserait de bien fonctionner. Quelques heures de confusion ont suivi. Si vous êtes dans la même situation, ajoutez un ServerAlias à votre httpd.conf, remplaçant l’adresse ngrok que vous voyez ci-dessous par l’adresse du service que vous utilisez:

<VirtualHost *:80>
  DocumentRoot "/Users/patcat/Web"
  ServerName mytestsite.test
  ServerAlias 350c0f8e.ngrok.com
</VirtualHost>

ngrok

ngrok est une application pour Windows, macOS et Linux qui crée un tunnel tout en vous permettant d’inspecter tout le trafic qui passe par le tunnel et de rejouer ce trafic pour des tests.

Vous pouvez utiliser les fonctionnalités de base gratuitement, puis vous inscrire pour accéder à des fonctionnalités plus avancées. Pour utiliser des sous-domaines personnalisés et des domaines réservés, vous devrez souscrire un plan payant. Sinon, vous pourrez utiliser le service, mais vous obtiendrez un domaine aléatoire tel que l’URL 350c0f8e.ngrok.com dans l’exemple de virtual host ci-dessus.

Les plans de Ngrok au mois de mai 2021 sont les suivants:

Un avantage clé de ngrok est qu’il n’a aucune dépendance. Vous installez ngrok et l’exécutez. Rien d’autre n’est requis.

Comment utiliser ngrok

Rendez-vous sur ngrok.com, téléchargez l’archive et extrayez-la à l’endroit où vous souhaitez que ngrok réside sur votre ordinateur. Voici les étapes de base, mais si vous souhaitez plus de détails, nous avons un autre article sur « Comment utiliser ngrok pour partager un site de développement local« .

Ouvrez une ligne de commande et allez dans le dossier où vous avez extrait ngrok. Exécutez la commande suivante pour créer un tunnel vers votre localhost sur le port 80:

./ngrok http 80

Vous verrez un écran comme celui-ci:

Dans l’exemple ci-dessus, nous avons du trafic vers une adresse ngrok générée aléatoirement de http://42e474ef9799.ngrok.com qui est redirigé vers notre localhost sur 127.0.0.1:80.

Ouvrez cette URL sur n’importe quel appareil disposant d’une connexion Internet et vous accèderez à votre localhost depuis le Web!

L’une des offres les plus uniques que ngrok propose est la possibilité d’inspecter le trafic passé. Pour ce faire, rendez-vous à http://localhost:4040/ sur votre ordinateur. Vous accéderez à un tableau de bord montrant les requêtes entrantes. Vous pouvez cliquer sur chaque requête sur la gauche et voir des détails sur la droite concernant les en-têtes et autres données. Mon utilisation préférée de ceci est de voir les données JSON renvoyées à partir des requêtes. La disposition très basique de ceci lors du chargement d’une page HTML simple ressemble à ceci:

Vous pouvez même réexécuter une requête en cliquant sur le bouton Réexécuter à droite. Cela réexécutera une requête pour vous via le tunnel.

Fonctionnalités avancées de ngrok

Protection par mot de passe vous permet d’empêcher des membres du public aléatoires d’accéder à votre site:

ngrok http -auth="username:password" 80

Sous-domaines personnalisés sont là pour lorsque vous ne voulez pas avoir à vous souvenir de cette URL générée aléatoirement! Si vous vous inscrivez à un plan payant ngrok, vous pouvez réserver un sous-domaine pour que d’autres ne puissent pas le prendre. Le suivant vous permet de voir votre localhost à nogophersinmytunnel.ngrok.com:

ngrok http -subdomain nogophersinmytunnel 80

Domaines personnalisés sont pour lorsque vous préférez ne pas avoir « ngrok » dans votre URL pour le projet tunnelé. Les plans payants vous permettent d’utiliser vos propres domaines, plutôt que de devoir utiliser ngrok.com:

ngrok http -hostname="tunnel.yourdomain.com" 80

Vous pouvez même créer un tunnel vers une adresse IP sur votre réseau local qui autrement ne serait pas accessible au monde extérieur:

ngrok http 192.168.0.27:80

Ou vous pouvez créer un tunnel pour d’autres services non HTTP:

ngrok tcp 22

Il existe de nombreuses autres choses que vous pouvez faire, allant de l’exécution de plusieurs tunnels simultanément à la création d’un fichier de configuration pour enregistrer toutes ces réglages pour une utilisation future.

Pour en savoir plus sur tout ce qui est possible, consultez la documentation d’ngrok.

PageKite

PageKite est une « proxy inversé basé sur un tunnel dynamique » basée sur Python et fonctionnant sur Windows, macOS, Linux, et même des appareils Android ! Elle est très similaire à ngrok mais existe depuis un certain temps de plus, et semble être beaucoup plus robuste pour un ensemble plus large d’utilisations. Ils ont même réussi à la faire fonctionner avec le protocole Minecraft pour permettre aux gens de faire tourner un serveur Minecraft sur leur machine locale.

Vous pouvez souscrire à un essai gratuit d’un mois avec un quota de transfert de 2,5 Go. Après cela, il existe un système « payez ce que vous voulez » (un minimum de 4 USD par mois, ou gratuit si vous travaillez sur des logiciels libres et open-source). Cependant, vous devez payer plus pour obtenir plus dans ce cas, les personnes payant des montants plus importants recevant un quota plus important, une durée de service plus longue, des sous-domaines personnalisés, etc.

PageKite ne semble pas avoir d’inspecteur de trafic comme ngrok, mais elle possède des fonctionnalités assez incroyables comme un pare-feu intégré qui bloque l’accès à des cibles d’attaque courantes comme /wp-admin, /xampp, phpMyAdmin pages… et ainsi de suite. Il peut être désactivé si vous êtes d’accord avec le fait que ces éléments soient publics.

Ils ont même un serveur relais frontal à Sydney, en Australie, ce qui pourrait potentiellement offrir des vitesses plus rapides pour les développeurs australiens.

Comment utiliser PageKite

Allez sur PageKite.net et téléchargez la version correspondant à votre système d’exploitation. Pour les utilisateurs de Windows, assurez-vous d’avoir Python installé en premier. Pour macOS et Linux, vous pouvez utiliser une simple commande cURL pour l’installer directement depuis votre ligne de commande.

Une fois téléchargé, exécutez cette commande pour lancer un tunnel vers votre serveur localhost. Vous choisissez un sous-domaine spécifique que vous utilisez à chaque fois (plutôt que l’allocation aléatoire dans ngrok). J’ai choisi hurrygetintothefancytunnel ici:

pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Sur mon Mac récemment, j’ai dû lancer avec python3 au début, alors essayez cela si l’option ci-dessus ne fonctionne pas:

python3 pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Cela va s’exécuter et vous inscrire à la service si vous n’êtes pas déjà inscrit. Ensuite, vous aurez localhost opérationnel pour le monde entier!

Fonctionnalités avancées de PageKite

PageKite possède des fonctionnalités supplémentaires plus impressionnantes.

Un exemple : pas besoin d’un serveur web. Si vous n’avez pas de serveur en cours d’exécution, il possède un serveur web intégré qui peut exécuter vos fichiers statiques comme ceci:

pagekite.py /path/to/folder igotthattunnelvision.pagekite.me

Comme ngrok, vous pouvez restreindre l’accès via mot de passe:

pagekite.py 80 terelekkayatuneli.pagekite.me +password/username=password

Ou restreindre l’accès via adresses IP:

pagekite.py 80 arcadefirecamethroughmywindow.pagekite.me +ip/1.2.3.4=ok +ip/4.5.6=ok

Comme mentionné ci-dessus, vous pouvez même exécuter tout cela sur votre téléphone. J’ai installé un serveur web Android appelé kWS et ensuite j’ai lancé PageKite pour l’exposer à la Web:

Ce n’est certainement pas quelque chose que je ferai tous les jours, mais c’est assez impressionnant de voir que ce genre de choses est maintenant possible uniquement sur un smartphone!

Tout comme ngrok, PageKite peut gérer plusieurs tunnels à la fois, et il prend en charge l’utilisation de votre propre domaine, ainsi que la configuration d’un fichier de configuration pour vos tunnels. Pour en savoir plus à ce sujet, consultez leur Guide de démarrage rapide et leur page plus complète Comment faire.

localtunnel

localtunnel est un service de tunneling qui a été initialement construit en Node, mais dispose également de clients basés sur Go et C#/.NET.

Comment utiliser localtunnel

Vous pouvez l’installer globalement sur votre appareil comme la plupart des packages npm :

npm install -g localtunnel

Pour démarrer un tunnel vers votre localhost sur le port 80, vous exécutez cette commande :

lt --port 80

Il fonctionnera comme ngrok et PageKite ! Il vous donne un sous-domaine ressemblant à celui que j’ai reçu : https://loud-ladybug-21.loca.lt.

Lors du premier lancement de localtunnel, vous recevrez un gentil rappel que cette action rend vos ressources publiques sur le Web. Appuyez simplement sur Cliquez pour Continuer.

Fonctionnalités avancées de localtunnel

Obtenir un sous-domaine personnalisé gratuit est totalement possible ici, tant que le sous-domaine n’a pas été pris. Pour utiliser un sous-domaine personnalisé, exécutez-le simplement avec le paramètre --subdomain:

lt --port 80 --subdomain platypusestunneltoo

L’une des fonctionnalités très pratiques que localtunnel fournit est une API Node qui vous permet de générer des localtunnels via JavaScript pour les utiliser dans vos tests automatisés :

const localtunnel = require('localtunnel');

(async () => {
  const tunnel = await localtunnel({ port: 3000 });

  // Votre URL de tunnel apparaîtra comme tunnel.url

  tunnel.on('close', () => {
    // Faites quelque chose une fois que le tunnel est fermé
  });
})();

boringproxy

boringproxy est une option plus récente qui est totalement gratuite et open source sous la licence MIT ! Son objectif principal semble être de faciliter l’hébergement de sites web sur les ordinateurs des utilisateurs. Il est fourni sous la forme d’un seul fichier exécutable qui fonctionne à la fois en tant que serveur et client. Il existe un exécutable pour une gamme de systèmes Linux et Windows. macOS est listé comme « non testé ». Personnellement, je n’ai pas réussi à le faire fonctionner sur mon Mac, mais si vous avez accès à une boîte Linux ou à un Raspberry Pi, cela pourrait bien être la solution pour vous. Tout est écrit en Go et est ouvert aux contributeurs.

Ses fonctionnalités en bref:

• 100% gratuit et open source sous la licence MIT
• peut être entièrement hébergé en local
• a un proxy inverse intégré
• prend en charge les domaines/sous-domaines personnalisés

Comment utiliser boringproxy

Les étapes principales sont les plus faciles à suivre dans la documentation de boringproxy, car cela varie selon les plateformes.

Dans l’ensemble, cela implique:

• télécharger l’instance serveur via curl (par exemple, curl -LO https://github.com/boringproxy/boringproxy/releases/download/v0.6.0/boringproxy-linux-x86_64)
• chmoder l’exécutable téléchargé (par exemple, chmod +x boringproxy-linux-x86_64)
• configurer le liaison aux ports 80 et 443 (par exemple, sudo setcap cap_net_bind_service=+ep boringproxy-linux-x86_64)
• installer l’exécutable également sur le client

Cette vidéo du créateur de boringproxy explique le mieux comment procéder:

Fonctionnalités avancées de boringproxy

Certificats HTTPS automatisés sont gérés automatiquement pour vous via Let’s Encrypt. Pas besoin de vous soucier d’obtenir des certificats pour les tests, car cela se produit en coulisses.

Interface web pour la configuration est automatiquement mise en place pour vous permettre de gérer les utilisateurs, les jetons d’accès et les tunnels.

Vous pouvez faire transiter des applications web avec facilité. Hébergez des applications web comme Etherpad (montré dans la vidéo ci-dessus), attribuez-leur leur propre sous-domaine, puis vous pouvez y accéder à partir de n’importe où.

BrowserStack

BrowserStack fournit des captures d’écran automatisées et des machines virtuelles pour tester votre site web contre une gamme de dispositifs et de navigateurs. Si vous souhaitez accéder à localhost pour des tests, BrowserStack pourrait vous intéresser.

Vous pouvez utiliser les méthodes ci-dessus pour tester des sites localhost dans les machines virtuelles BrowserStack, mais il dispose également d’une extension de navigateur pour Chrome et Firefox vous permettant de fournir un accès à votre localhost depuis leurs serveurs.

Cependant, cette fonctionnalité est réservée aux services BrowserStack et n’est pas accessible au grand public. BrowserStack propose un essai gratuit, après quoi il vous coûtera un tarif mensuel pour utiliser le service. Cela pourrait être pratique dans les cas où la seule raison pour laquelle vous cherchez à accéder à localhost est de faire des tests de dispositifs.

Comment utiliser BrowserStack

Inscrivez-vous à un essai sur BrowserStack.com. Ils ont en fait très bien documenté le processus de test local sur leur site web, alors lisez cela si vous êtes intéressé par cette option.

En fin de compte, cela vous permettra de tester vos sites localhost sur des machines virtuelles exécutées via le Web de la manière suivante:

Préférences personnelles

Après avoir expérimenté toutes ces options, mes préférences personnelles seraient ngrok et PageKite.

PageKite semble être la solution la plus polyvalente avec un énorme potentiel. Elle a été développée et étendue pour s’adapter à une gamme d’utilisations au fil des ans, ce qui en fait une application vraiment impressionnante!

ngrok est également génial pour sa simplicité et l’inspecteur de trafic. Il dispose de suffisamment de fonctionnalités pour la plupart des développeurs web souhaitant accéder à leur localhost depuis le Web.

Conclusion

Si vous travaillez sur un ordinateur avec une connexion Internet active, vous pouvez maintenant configurer l’accès à votre localhost de n’importe où en quelques minutes seulement! Il est incroyablement simple de commencer et, comme vous l’avez vu, il n’y a pas de pénurie de solutions!

Avez-vous utilisé l’un de ces services? En avez-vous d’autres que vous préférez? J’adorerais connaître vos réflexions sur Twitter!

 

FAQ sur l’accès à localhost de n’importe où