NGROK votre serveur local (localhost) sur le web : Tutoriel

Vous cherchez à rendre votre site sur votre serveur local accessible depuis Internet en quelques secondes ? ngrok est l’outil idéal pour exposer un serveur localhost, tester ou partager un projet sans déploiement. Dans ce tutoriel complet sur ngrok, découvrez comment l’installer, l’utiliser efficacement et sécuriser vos tunnels, même si vous débutez.

• Rendre un site local accessible en ligne sans hébergement
• Gagner du temps pour tester webhooks, APIs et projets en conditions réelles
• Apprendre à utiliser un outil puissant tout en évitant les erreurs de sécurité

En quelques secondes, ngrok transforme votre serveur local en une URL accessible depuis Internet. Pas besoin d’hébergement, pas besoin de configuration complexe. Dans ce guide complet, vous allez comprendre comment fonctionne ngrok, comment l’installer, et surtout comment l’utiliser efficacement et en toute sécurité, même si vous débutez.

Qu’est-ce que ngrok et à quoi ça sert ?

Imaginez que votre ordinateur soit une maison. Votre serveur local (par exemple localhost:3000) est une pièce fermée. Personne à l’extérieur ne peut y entrer.

Ngrok agit comme une porte temporaire vers Internet.

Concrètement, il crée un tunnel sécurisé entre :

• votre machine (en local)
• et une URL publique accessible partout dans le monde

Prenons un exemple concret, vous avez un site en local :

http://localhost:3000

Avec ngrok, vous obtenez une URL comme :

https://a1b2c3d4.ngrok.io

Pratique car :

• votre client peut voir votre site
• un webhook Stripe peut vous contacter
• une API externe peut tester votre application

Sans rien déployer.

Les cas d’usage les plus fréquents

Ngrok est utilisé partout dans le développement web. Voici les situations les plus courantes :

• Tester des webhooks (Stripe, PayPal, Discord…)
• Montrer un projet à un client
• Débugger une API externe
• Développer une application mobile connectée à un backend local
• Simuler un environnement de production

Bref, ngrok devient vite un outil indispensable dans votre boîte à outils de développeur.

Installation de ngrok (étape par étape)

Pas de panique, l’installation est simple. On va la faire ensemble.

Depuis le site officiel de ngrok

Rendez-vous sur le site officiel : https://ngrok.com

Cliquez sur “Download” et suivez la procédure.

Installation avec Homebrew

C’est la méthode la plus propre et la plus simple sur macOS. Ouvrez votre terminal et tapez :

brew install --cask ngrok

Une fois installé, vous devrez lier votre compte (gratuit) en récupérant votre « authtoken » sur le tableau de bord de ngrok.com :

Créer un compte ngrok

C’est une étape importante. Sur le site de ngrok :

• créez un compte gratuit
• récupérez votre authtoken

Connecter votre machine à ngrok

Dans votre terminal, indiquez votre token :

ngrok config add-authtoken VOTRE_TOKEN_ICI

• Et voilà. Votre installation est terminée.

Première utilisation de ngrok

Maintenant, passons à la pratique.

Lancer un serveur local

Par exemple avec Node.js :

npm run dev

Votre serveur tourne sur :

http://localhost:3000

👉 Pour aller plus loin : Comprendre et installer Node.js et Un serveur node.js Express

Exposer votre serveur avec ngrok

Dans un autre terminal :

ngrok http 3000

Et là, ngrok vous affiche quelque chose comme :

Forwarding https://abc123.ngrok.io -> http://localhost:3000

• Félicitations, votre site est accessible depuis Internet.

Tester

Ouvrez l’URL ngrok dans votre navigateur. Vous verrez… votre site local.

Comprendre ce que fait ngrok

Pour bien maîtriser ngrok, il faut comprendre ce qu’il se passe derrière.

Ngrok :

1. ouvre une connexion vers ses serveurs
2. crée une URL publique
3. redirige chaque requête vers votre machine

C’est un peu comme un pont entre Internet et votre ordinateur.

Faire fonctionner ngrok avec MAMP

MAMP utilise généralement des ports spécifiques. Pour que ngrok puisse rediriger le trafic vers votre serveur MAMP, vous devez lui indiquer le bon port.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Étape A : Vérifiez le port de MAMP

• Ouvrez MAMP et regardez quel port est utilisé pour Apache.
• Par défaut, c’est souvent le port 8888 ou le port 80.

Étape B : Lancez le tunnel

Dans votre terminal, lancez la commande suivante (en remplaçant 8888 par votre port si nécessaire) :

ngrok http 8888

Étape C : Accédez à votre site

Ngrok va générer une URL du type https://abcd-1234.ngrok-free.app.

• Si vous n’utilisez qu’un seul site (localhost), cette URL affichera directement votre projet.
• Si vous utilisez les Virtual Hosts de MAMP Pro, vous devrez préciser le nom d’hôte pour que MAMP sache quel dossier servir :

ngrok http --host-header=mon-projet.local 8888

Résumé des commandes utiles

Action	Commande
Installation	brew install --cask ngrok
Authentification	ngrok config add-authtoken <token>
Lancement (Standard)	ngrok http 8888
Lancement (MAMP Pro)	ngrok http --host-header=rewrite <nom-domaine-local>:8888

Attention : Avec la version gratuite de ngrok, l’URL change à chaque fois que vous redémarrez le tunnel. C’est suffisant pour des tests rapides ou montrer un projet à un client !

Utiliser ngrok efficacement

Ngrok propose une interface web locale :

bhttp://127.0.0.1:4040

Vous pouvez y voir :

• toutes les requêtes entrantes
• les headers
• les réponses
• les erreurs

C’est un outil incroyable pour :

• débugger une API
• comprendre un webhook
• analyser un problème

Exemple avec un webhook

Imaginons que vous utilisez Stripe. Vous donnez à Stripe l’URL ngrok :

https://abc123.ngrok.io/webhook

Quand Stripe envoie un événement :

• ngrok le reçoit
• le transmet à votre serveur local
• vous pouvez voir la requête dans l’interface

Résultat : vous pouvez tester un paiement… sans serveur en ligne.

Changer le port

Si votre serveur est sur le port 8080 :

ngrok http 8080

Simple, efficace.

Utiliser un sous-domaine (version payante)

Avec une version payante :

ngrok http --domain=mon-site.ngrok.io 3000

Pratique pour :

• éviter de changer d’URL
• configurer des services externes

Sécuriser son utilisation de ngrok

C’est un point essentiel.

• Quand vous utilisez ngrok, vous exposez votre machine au monde entier.

Il faut donc être prudent.

1. Ne jamais exposer des données sensibles

Évitez d’exposer :

• une base de données
• un admin WordPress
• des API privées

2. Ajouter une authentification

Vous pouvez protéger votre tunnel :

ngrok http -auth="user:password" 3000

Ainsi, seules les personnes avec identifiants peuvent accéder à votre site.

3. Limiter l’accès

Ngrok permet de restreindre l’accès (IP, règles…).

C’est particulièrement utile pour :

• tester avec un client
• éviter les visiteurs indésirables

4. Toujours arrêter ngrok après usage

Quand vous avez terminé : CTRL + C

Cela coupe l’accès public immédiatement.

Tableau récapitulatif des commandes ngrok

Voici les commandes essentielles à connaître. Gardez-les sous la main.

Commande	Description
ngrok http 3000	Expose le port 3000
ngrok http 8080	Expose le port 8080
ngrok tcp 22	Expose un service TCP (SSH)
ngrok config add-authtoken TOKEN	Ajouter votre token
ngrok http -auth="user:pass" 3000	Protéger par mot de passe
ngrok http --domain=xxx.ngrok.io 3000	Domaine personnalisé
ngrok start --all	Lance plusieurs tunnels
ngrok config edit	Modifier la config
ngrok version	Vérifier la version

Astuces et bonnes pratiques

Avec l’expérience, vous allez développer des réflexes.

Par exemple :

• utilisez toujours l’interface 4040 pour débugger
• créez un fichier de config pour gagner du temps
• évitez d’exposer des services critiques
• utilisez ngrok uniquement en développement

Beaucoup de développeurs découvrent ngrok… et ne peuvent plus s’en passer. C’est souvent le genre d’outil qui vous fait gagner des heures sans que vous vous en rendiez compte.

---

Ngrok n’est pas juste un outil pratique, c’est un véritable accélérateur de développement. Il vous permet de tester, partager et débugger vos projets en quelques secondes, sans infrastructure complexe.

Mais comme tout outil puissant, il demande un minimum de vigilance. En l’utilisant correctement, vous allez non seulement gagner du temps, mais aussi travailler de manière beaucoup plus fluide et professionnelle. Et entre nous… une fois que vous aurez pris l’habitude de lancer un ngrok http 3000, difficile de revenir en arrière.