Handleiding: Ngrok Reverse Proxy configureren in ServBay

Ngrok is een krachtig hulpmiddel waarmee je lokaal draaiende webservices veilig kunt publiceren op het openbare internet. Dankzij de integratie van Ngrok in ServBay kun je eenvoudig een beveiligde publieke tunnel opzetten voor je lokale ontwikkelwebsite. Dit is uitermate geschikt voor demo’s, Webhook-tests of het delen van je project met externen. In deze handleiding leggen we stap voor stap uit hoe je Ngrok reverse proxy in ServBay configureert en gebruikt.

Overzicht

ServBay biedt ingebouwde ondersteuning voor Ngrok, waardoor installatie en configuratie sterk worden vereenvoudigd. Je beheert Ngrok-tunnels direct via de grafische interface van ServBay en koppelt eenvoudig je lokale websites aan een tijdelijke openbare URL.

Toepassingsscenario's

• Klantdemo’s: Toon ontwikkelversies van je website die lokaal draaien aan klanten.
• Webhook-ontwikkeling: Test derde-partijdiensten die een publieke callback-URL vereisen (zoals betaalgateways of API's).
• Mobiele app-tests: Laat mobiele apparaten via een publieke URL je lokale backend-API bereiken.
• Samenwerking in ontwikkeling: Deel tijdelijk toegang tot je lokale ontwikkelomgeving met teamleden.

Vereisten

1. ServBay geïnstalleerd: Zorg dat ServBay succesvol draait op je macOS-systeem.
2. Ngrok-account: Je hebt een Ngrok-account nodig. Registreer gratis of betaald op Ngrok officiële website.
3. Lokale website: Voeg minstens één lokale website toe en voer deze uit in ServBay, bijvoorbeeld servbay.demo.

Stappenplan

1. Ngrok-pakket installeren in ServBay

Voordat je Ngrok gebruikt, moet je het eerst via ServBay installeren:

1. Open de ServBay-app.
2. Klik in de linker navigatiebalk op Pakketten (Packages).
3. Zoek of blader in de pakketlijst naar Ngrok.
4. Klik rechts naast Ngrok op de installatieknop.
5. Na installatie kun je proberen de schakelaar rechts naast Ngrok aan te zetten. Het is mogelijk dat de service nog niet goed start of een foutstatus aangeeft omdat Ngrok nog niet geconfigureerd is. Dit is normaal; we gaan dit in de volgende stappen oplossen.

2. Je Ngrok Authtoken ophalen

Ngrok gebruikt een Authtoken om je account te valideren en toegang te geven.

1. Ga naar Ngrok Dashboard en log in op je Ngrok-account.

2. Navigeer in het dashboard aan de linkerkant naar Your Authtoken ("Getting Started" -> "Your Authtoken").

3. Kopieer je Authtoken; dit is een lange tekenreeks, bewaar deze goed.

   

3. Ngrok configureren in ServBay

Zodra je de Authtoken hebt gekopieerd, keer je terug naar ServBay om deze in te voeren:

1. Klik in de linker navigatiebalk op Tunnel.

2. Selecteer in de lijst met tunnelservices ngrok.

   

3. Auth Token (autorisatie-token):

   • Plak de eerder gekopieerde Ngrok Authtoken in het invoerveld Auth Token.

4. Tunnel configureren (Local Domain en External Domain): ServBay maakt het mogelijk om meerdere lokale websites via Ngrok-tunnels aan te bieden.

   • Local Domain (lokaal domein):
     • Selecteer in het dropdownmenu de lokale website die je publiek wilt maken via Ngrok. De lijst toont automatisch lokaal geconfigureerde websites, zoals servbay.test of servbay.demo.
   • External Domain (extern domein):
     • Voor gratis Ngrok-gebruikers: Laat dit veld leeg. Ngrok genereert automatisch een willekeurige publieke URL met als achtervoegsel .ngrok-free.app (of een ander gratis domein via Ngrok). Na succesvol starten van de tunnel wordt dit adres automatisch in ServBay weergegeven.
     • Voor betaalde Ngrok-gebruikers: Indien je een custom domein of gereserveerd domein in Ngrok hebt ingesteld, kun je hier het gewenste externe domein invullen.

5. Meer tunnels toevoegen:

   • Voor het configureren van meerdere tunnels voor verschillende lokale websites, klik je op het + (plus) icoon rechts naast een bestaande tunnel. Herhaal stap 4 voor elke nieuwe tunnel.

6. Configuratie opslaan:

   • Klik rechtsonder op Opslaan (Save) zodra je klaar bent met configureren.

4. Ngrok-service starten en controleren

1. Na het opslaan probeert ServBay de Ngrok-service met de nieuwe instellingen te starten.
2. Bekijk de statusindicator naast de ngrok service. Als alles correct is ingesteld en de verbinding succesvol is, wordt het lampje groen: de service draait.
3. Bij elke succesvol gestarte tunnel toont het veld External Domain nu de publieke URL (voor gratis gebruikers: deze verschijnt automatisch).
4. Toegang controleren:
   • Klik op het kopieer-icoon naast het externe domein om de URL te kopiëren.
   • Of klik op het browser-icoon (meestal een kompas of aardbol) om de URL direct in je standaardbrowser te openen.
   • Als alles werkt, is je lokale website nu bereikbaar via de Ngrok-link.

5. Ngrok-tunnels beheren

Gebruik de Ngrok-configuratiepagina in ServBay voor het volgende:

• Externe domein kopiëren: Handig voor delen.
• In browser openen: Snel testen.
• Tunnel toevoegen: Klik op het + icoon.
• Tunnel verwijderen: Klik op het - (min) icoon om een tunnelconfiguratie te verwijderen.
• Service stoppen: Zet de schakelaar naast de ngrok service uit om alles te stoppen. Nogmaals klikken om weer te starten.

Belangrijke opmerkingen

• Beperkingen gratis versie Ngrok: Bij gratis Ngrok-accounts wijzigt de publieke domeinnaam telkens als de tunnel of service opnieuw wordt gestart. Bovendien gelden er limieten op connecties, bandbreedte en gebruiksduur. Voor vaste domeinen en meer functies kun je upgraden naar een betaald Ngrok-abonnement.
• Status lokale service: Controleer of de gekozen lokale website ook werkelijk in ServBay draait (denk aan de juiste PHP-versie, actieve webserver zoals Nginx/Apache en correcte configuratie). Ngrok transporteert slechts het verkeer, maar start of herstelt jouw lokale dienst niet.
• Firewall: Zorg ervoor dat macOS’ firewall of andere beveiligingssoftware de netwerkverbinding van ServBay of Ngrok niet blokkeert.
• HTTPS: Ngrok biedt standaard HTTPS op al zijn tunnels – ideaal voor moderne webontwikkeling en testen.

Veelgestelde vragen (FAQ)

• Q: Ngrok-service start niet: het statuslampje is rood of oranje. Wat nu?
  • A: Controleer eerst of je Ngrok Authtoken juist is ingevoerd. Controleer daarna je internetverbinding en toegang tot de Ngrok-website. Bekijk eventueel de Ngrok-log (het logboekicoon rechts van de service) voor meer gedetailleerde foutmeldingen.
• Q: Ik gebruik de gratis versie van Ngrok. Waarom is het External Domain veld leeg of staat er "Leave blank if you're a free user"?
  • A: Dit is normaal gedrag. Als gratis gebruiker hoef je dit veld niet in te vullen. Na het succesvol starten vult ServBay automatisch de publieke, willekeurige URL in het veld in.
• Q: Kan ik Ngrok tegelijk gebruiken met andere tunneldiensten zoals frp of Cloudflared?
  • A: ServBay ondersteunt installatie en configuratie van meerdere tunneldiensten. Je kunt naar behoefte er een of meerdere tegelijk gebruiken. Houd er rekening mee dat tegelijkertijd meerdere tunneldiensten op dezelfde lokale website leiden tot complexe of conflicterende netwerkinstellingen: wees voorzichtig en weet wat je doet.

Samenvatting

Dankzij de Ngrok-integratie in ServBay wordt het voor webontwikkelaars op macOS heel eenvoudig om hun lokale ontwikkelomgeving veilig extern toegankelijk te maken. Of het nu gaat om een snelle demo, Webhook-integratie of samenwerking met externen: de Ngrok-functie in ServBay biedt een snelle en efficiënte uitkomst. Zorg er steeds voor dat je het externe domein correct instelt volgens je Ngrok-account (gratis of betaald) en dat je lokale website naar behoren functioneert.