Guide de configuration du service de proxy inversé Ngrok dans ServBay

Ngrok est un outil puissant qui permet d’exposer en toute sécurité vos services web locaux sur Internet. Grâce à son intégration dans ServBay, vous pouvez facilement créer un tunnel public sécurisé pour vos sites de développement locaux, idéal pour les démonstrations de projet, les tests de Webhook ou le partage de votre travail avec des membres d’équipe extérieurs. Ce guide vous explique en détail comment configurer et utiliser le service de proxy inversé Ngrok dans ServBay.

Vue d’ensemble

ServBay propose un support natif de Ngrok, simplifiant ainsi son installation et sa configuration. Vous pouvez gérer directement vos tunnels Ngrok via l’interface graphique de ServBay et mapper n’importe quel site local hébergé sur ServBay vers une URL publique temporaire.

Cas d’utilisation

• Démonstration client : Présentez à vos clients un site en cours de développement directement depuis votre ordinateur local.
• Développement de Webhook : Testez des services tiers nécessitant une URL de rappel publique (par exemple, passerelle de paiement, API).
• Tests d’applications mobiles : Permettez à un appareil mobile d’accéder à une API backend locale via une URL publique.
• Développement collaboratif : Partagez temporairement l’accès à votre environnement de développement local avec des membres de votre équipe.

Prérequis

1. ServBay installé : Assurez-vous que ServBay est installé et en cours d’exécution sur votre système macOS.
2. Compte Ngrok : Vous devez disposer d’un compte Ngrok. Rendez-vous sur le site officiel de Ngrok pour créer un compte gratuit ou payant.
3. Site local : Assurez-vous d’avoir ajouté et lancé au moins un site local dans ServBay, par exemple servbay.demo.

Étapes à suivre

1. Installer le package Ngrok dans ServBay

Avant toute utilisation de Ngrok, il faut l’installer dans ServBay :

1. Ouvrez l’application ServBay.
2. Dans la barre latérale de navigation à gauche, cliquez sur Packages (Paquets).
3. Dans la liste, trouvez ou recherchez Ngrok.
4. Cliquez sur le bouton d’installation à côté de Ngrok.
5. Une fois l’installation terminée, essayez d’activer l’interrupteur à droite de Ngrok. À ce stade, le service peut échouer à démarrer ou afficher un statut d’erreur, car Ngrok n’est pas encore configuré. Ceci est tout à fait normal et sera traité dans les étapes suivantes.

2. Obtenir votre Authtoken Ngrok

Ngrok utilise un Authtoken pour authentifier votre compte et vous permettre d’utiliser le service.

1. Rendez-vous sur le Tableau de bord Ngrok et connectez-vous à votre compte.

2. Dans le tableau de bord, trouvez la section Your Authtoken (« Getting Started » -> « Your Authtoken ») dans le menu à gauche.

3. Copiez votre Authtoken. Il s’agit d’une longue chaîne de caractères à conserver précieusement.

   

3. Configurer Ngrok dans ServBay

Une fois l’Authtoken récupéré, retournez dans ServBay pour le configurer :

1. Dans la barre latérale gauche de ServBay, cliquez sur Tunnel.

2. Dans la liste des services Tunnel, choisissez ngrok.

   

3. Auth Token (jeton d’autorisation) :

   • Dans le champ Auth Token, collez l’Authtoken Ngrok que vous venez de copier.

4. Configurer les tunnels (Domaine local et Domaine externe) : ServBay permet de créer des tunnels Ngrok pour plusieurs sites locaux.

   • Local Domain (site local) :
     • Cliquez sur le menu déroulant et sélectionnez le site que vous souhaitez exposer au public via Ngrok. Cette liste se remplit automatiquement avec les sites que vous avez ajoutés dans ServBay, comme servbay.test ou servbay.demo.
   • External Domain (domaine externe) :
     • Pour les utilisateurs Ngrok gratuits : Laissez ce champ vide. Ngrok générera automatiquement une URL publique temporaire aléatoire se terminant par .ngrok-free.app (ou un autre domaine gratuit fourni par Ngrok). ServBay récupérera et affichera automatiquement cette URL lorsque le tunnel sera en ligne.
     • Pour les utilisateurs Ngrok payants : Si vous avez configuré des domaines personnalisés ou réservés dans votre compte Ngrok, saisissez ici celui que vous souhaitez utiliser.

5. Ajouter plus de tunnels :

   • Pour créer d’autres tunnels vers d’autres sites locaux, cliquez sur le bouton + à droite d’une entrée de tunnel pour ajouter une nouvelle configuration. Répétez l’étape 4 pour chaque tunnel supplémentaire.

6. Sauvegarder la configuration :

   • Après avoir fini, cliquez sur le bouton Save (Enregistrer) en bas à droite.

4. Lancer et vérifier le service Ngrok

1. Après avoir sauvegardé la configuration, ServBay tentera de démarrer le service Ngrok avec vos nouveaux réglages.
2. Regardez l’indicateur d’état à côté de la ligne de service ngrok. Si la configuration est correcte et que la connexion fonctionne, l’indicateur passera au vert pour signaler que le service est actif.
3. Pour chaque tunnel lancé avec succès, le champ External Domain (si resté vide) affichera l’URL publique générée par Ngrok.
4. Vérifier l’accès :
   • Cliquez sur l’icône de copie à côté du domaine externe pour copier l’URL.
   • Ou cliquez sur l’icône de navigateur (boussole ou globe) pour ouvrir l’URL publique dans votre navigateur par défaut.
   • Si tout est configuré correctement, votre site local sera accessible via ce lien Ngrok.

5. Gérer vos tunnels Ngrok

Depuis l’interface de configuration Ngrok de ServBay :

• Copier le domaine externe : Cliquez sur l’icône de copie pour partager rapidement l’URL.
• Ouvrir dans le navigateur : Cliquez sur l’icône de navigateur pour tester.
• Ajouter un tunnel : Cliquez sur l’icône +.
• Supprimer un tunnel : Cliquez sur l’icône - pour retirer une configuration devenue inutile.
• Arrêter le service : Utilisez le bouton d’activation/désactivation à côté de la ligne ngrok pour arrêter ou relancer le service.

Remarques importantes

• Limites de la version gratuite de Ngrok : Les domaines générés gratuitement sont dynamiques : ils changent à chaque redémarrage du tunnel ou du service. Le nombre de connexions, la bande passante et la durée d’utilisation sont également limités. Pour bénéficier d’un domaine fixe ou de fonctionnalités avancées, envisagez un abonnement Ngrok payant.
• État du site local : Assurez-vous que le site sélectionné dans Local Domain est bien en marche dans ServBay (la version PHP requise, le serveur web Nginx/Apache en service, et une configuration correcte). Ngrok ne fait que relayer le trafic – il ne peut pas démarrer ou corriger vos services locaux.
• Pare-feu : Vérifiez que le pare-feu macOS ou vos logiciels de sécurité ne bloquent pas les connexions nécessaires à ServBay ou Ngrok.
• HTTPS : Ngrok fournit par défaut un accès HTTPS à ses tunnels – une fonctionnalité essentielle pour le développement web moderne et les tests.

Foire Aux Questions (FAQ)

• Q : Le service Ngrok ne démarre pas, la lumière d’état est rouge ou orange, que faire ?
  • R : Vérifiez en priorité que votre Authtoken Ngrok est correct. Confirmez l’accès internet et notamment la possibilité d’atteindre le site officiel Ngrok. Consultez les logs de Ngrok (icône log à droite du service) pour un diagnostic détaillé.
• Q : Je suis utilisateur gratuit Ngrok, pourquoi le champ External Domain est-il vide ou affiche-t-il « Laissez vide si vous êtes un utilisateur gratuit » ?
  • R : C’est le comportement attendu. Les utilisateurs gratuits n’ont rien à saisir ici. Dès que le tunnel démarre correctement, ServBay récupère et affiche automatiquement l’URL publique assignée par Ngrok dans ce champ.
• Q : Puis-je utiliser Ngrok et d’autres services de tunnel (comme frp, Cloudflared) en même temps ?
  • R : ServBay autorise l’installation et la configuration de plusieurs services de tunnel. Le choix d’en activer un ou plusieurs simultanément dépend de vos besoins. Attention, exposer un même site à plusieurs tunnels en parallèle peut complexifier la configuration réseau ou provoquer des conflits. Soyez vigilant et bien informé sur le routage réseau.

Conclusion

Grâce à l’intégration de Ngrok dans ServBay, les développeurs web simplifient grandement l’exposition de leur environnement de développement local macOS sur Internet. Pour des démonstrations rapides, l’intégration de Webhooks ou un partage avec des collaborateurs, la fonction Ngrok de ServBay est une solution pratique et efficace. Veillez à configurer correctement le domaine externe selon votre formule Ngrok (gratuite ou payante) et assurez-vous que vos services locaux fonctionnent correctement.