Tout savoir sur WordPress

Faites tester votre site local à distance avec Ngrok

Disponible sur Linux, Max et Windows, ce petit utilitaire vous permettra de faire tester votre installation WordPress locale à quelqu’un à distance. Pratique pour montrer l’avancement sans mettre en ligne un site en construction par exemple.

Très pratique, ngrok vous permet de créer un tunnel vers votre site local, qui sera accessible via une URL publique le temps que votre script sera en marche. Avec un dessin :

ngrok-process

Ngrok est un script à lancer via la ligne de commande. Même si vous y êtes allergique, c’est très facile et s’active en une étape.

1. Télécharger ngrock

Téléchargez ngrock depuis le site officiel : https://ngrok.com/

Décompressez ensuite l’archive pour y trouver le script

2. Lancer un tunnel

Ouvre votre terminal préféré et lancez ngrok. Pour ma part, le script étant décompressé pour le moment sur le bureau (libre à vous de le ranger ultérieurement) je lance le script avec /Users/Max/Desktop/ngrok 8888 : l’adresse du script suivi du port actuellement utilisé par votre serveur de développement web local. Généralement le port utilisé est le port 80. (8888 pour mamp)

ngrok-server

Le tunnel est donc en place et opérationnel.

  • http://6d3457e9.ngrok.com est donc l’url publique pour cette instance
  • 127.0.0.1:40:40 est l’accès à votre interface web d’analyse de trafic (j’en parle plus bas)
  • Faites CTRL+C pour couper le tunnel à tout moment

Cas particulier sur Mac avec Mamp et codekit 2+

Si vous utilisez Mamp sur Mac, les URLS ne sont pas du genre 127.0.0.1 mais plutôt monsite:8888. L’astuce la plus simple est de faire pointer votre localhost vers le dossier sur lequel vous êtes en train de travailler. Du coup vous ne pourrez pas montrer 2 sites à la fois, mais c’est le plus simple à mettre en place.

tweak-mamp-mac

 

Bon et en plus de ça du coup ngrok ne comprend que ce sont des urls virtuelles donc tous vos scripts et css n’arriveront pas à être chargés. Point grave, si vous avez Codekit (version 2 et plus) installé sur votre ordinateur, allez dans la configuration de votre projet et browser refreshing :

codekit

 

Activez External Server Required et entrez comme adresse l’adresse locale de votre projet (celle en :8888)

CLiquez ensuite sur preview en haut à droite : Codekit vous créera une adresse spéciale ultra pratique : tout le monde dans votre réseau local pourra accéder au site, vous allez pouvoir charger le site sur smartphone et tablettes et à chaque modification le site se rechargera automatiquement.

Il faut donc désormais lancer le tunnel ngrok avec le nouveau port (http://macbook-pro-de-maxime.local:5757/ dans mon exemple) et tout fonctionne.

L’interface Web pour inspecter le trafic

Vous disposez d’une interface Web pour inspecter le trafic et voir les requêtes qui passent.

ngrok-web-interface

Et vous ?

Comment procédez-vous habituellement ? Quelle est votre technique ? Mettez-vous toujours votre site en ligne ? Est-ce que vous bossez directement en ligne ?

Mamp possède un onglet pour configurer un compte dyn.com ou easydns.com qui pourrait surement aussi faire l’affaire.

Cet article a été mis à jour il y a 1568 jours - Il n'est peut être plus à jour !

Article écrit par Maxime BJ

Développeur, bloggeur et formateur Web spécialisé WordPress. 31 ans. Grenoblois. Co-fondateur de WPChef, l’organisme de formation WordPress.

Organisateur de WPInAlps, le meetup WordPress Grenoblois. Vous pouvez me rencontrer lors d’événements tels que WordCamp Paris et Europe. Traducteur Français de l’extension Advanced Custom Fields. Également développeur d’applications web avec MeteorJs. Je m’occupe un site pour apprendre l’informatique aux débutants gratuitement.

J’aime les jeux vidéo, la rando, la bouffe bien grasse et les voyages.

2 Commentaires

  1. Très bonne astuce ! Je vais tester cela.

    Pour ma part, je crée un hébergement de test sur Hostinger et je fais voir le développement/résultat à mes clients.

2e9d8c6e656425018a26e018ad76304bzzzzzzzzzzzzzz