Utilisez Ngrok pour donner un aperçu d'un projet développé en local à un client en ligne

[Rivals]

NGROK
NGROK , donner un aperçu d'un projet développé en local à un client en ligne très simplement via un tunnel sécurisé​

Bonjour à tous, vous le savez sans doute en tant que développeur, vos clients sont friands de nouveauté quant au développement de leur site internet mais pour les développeurs travaillant en local, que cela soit sur une machine virtuelle ou sur un environnement de type WAMP, MAMP, LAMP etc. il est difficile de donner un aperçu de l'avancé du projet.

Généralement une option s'offre à vous : acheter ou souscrire gratuitement un hébergement, mais cette option est parfois longue à configurer (création de la base de donnée, placement d'htaccess pour sécuriser l'accès etc.) et peu en dérouter plus d'un en cas de problème. Je vous présente donc une nouvelle solution, une solution simplisme qui vous assurera un suivi des requêtes exécutées par le client, une mise en place en 5 secondes et une ligne de commande : Ngrok.
​

You must be registered for see images attach

(principe d'Ngrok)
​

Le principe est de créer un "tunnel" sécurisé, des serveurs d'Ngrok à votre environnement de développement, une fois ce tunnel mis en place Ngrok crée une URL spécifique à chaque tunnel du type : http(s)://b43bcb8f.ngrok.io/

INSTALLATION​

Pour débuter l'installation, je vous invite à vous rendre sur le site

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

(à l'onglet "Downloads"), suivez les étapes suivantes :

1. Téléchargez le script en fonction de votre plateforme,

2. Déplacez le résultat du zip (dans le cas de Windows, cela sera un .exe, sur OSX & Linux un script UNIX) à la racine de votre environnement (www ou htdocs),

3. Ouvrez une console ou invite de commande, placez-vous dans votre dossier.

cd votredossier

​

4. Utiliser Ngrok via la commande "ngrok" ou en renseignant le lien du script dans votre console si jamais la commande n'est pas reconnue.

 /Applications/MAMP/htdocs/x/ngrok

5. Nous allons créer un tunnel en écrivant la commande "http" suivi d'un paramètre qui est l'URL de votre environnement, précédée de "ngrok" ou du lien du script :

/Applications/MAMP/htdocs/x/ngrok http 127.0.0.1:80

Remarque: vous pouvez modifier le port "80".

6. Si l'opération s'est déroulée avec succès vous devriez obtenir deux URL : HTTP & HTTPS, c'est au choix, utilisez-les pour accéder au tunnel Ngrok (attention, la fermeture de la console entraine la suppression du tunnel).

You must be registered for see images attach

(depuis la console)

You must be registered for see images attach

(depuis l'URL indiquée, notre environnement est accessible)

You must be registered for see images attach

​

placement d'htaccess pour sécuriser l'accès etc.

Je parlai tout à l'heure d'accès sécurisé

Et bien sachez qu'avec cet outil, vous avez la possibilité de sécuriser ou du moins de contrôler l'accès à votre tunnel, nous allons voir comment procéder :

Créez-vous un compte sur le site

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

.
Une fois crée, vous devriez obtenir un token, insérez-le dans la commande suivante :

ngrok authtoken votre_token

You must be registered for see images attach

(opération réussie)​

Puis, saisissez cette commande (en remplaçant évidemment le nécessaire) :

ngrok http -auth="rivals:mdp" 172.0.0.1:8888

​

You must be registered for see images attach

SUIVI DES REQUETES
​

Un suivi des requêtes exécutées par le client depuis le tunnel est disponible au port 4040, très simplement rendez-vous sur votre environnement de développement à ce port.

You must be registered for see images attach

​

Les requêtes sont affichées en temps réel, vous pouvez les "relancer" en appuyant sur "Replay", vous avez quelques informations concernant celles-ci.

 

[deleted229251]

Bien rédigée, mais légérement pompée chez graphikart quand même xD

 

[Grégory]

C'est vraiment pas mal, en plus du CLI ça me sera utile

 

[Rivals]

Bien rédigée, mais légérement pompée chez graphikart quand même xD

Je l'ai connu grâce à lui après si tu regardes bien la documentation elle te permet déjà de l'utiliser, je fais ça pour montrer son utilité et faire connaître cet outil

 

[deleted229251]

Je l'ai connu grâce à lui après si tu regardes bien la documentation elle te permet déjà de l'utiliser, je fais ça pour montrer son utilité et faire connaître cet outil

Ouai tkt, j'ai pas dit pompée au sens prendre tous se qu'il à fait mais plutôt l'idée du topic

 

[r00tkit']

Très bon tuto ! merci

 

[Hichxm]

Merci

 

[Device]

Merci du partage