Pijnloos lokaal debuggen: het bereiken van HTTPS en aangepaste hostnaam met Cloudflare Tunnel

In onze dagelijkse ontwikkeling gebruiken we vaak http://localhost om toegang te krijgen tot en te debuggen van onze applicaties, wat in de meeste gevallen voldoende is. Echter, in situaties zoals de volgende, kunnen we HTTPS en een aangepaste hostnaam nodig hebben om onze applicaties te debuggen:

• Wanneer je applicatie een API gebruikt die HTTPS vereist (zoals de Web Crypto API of andere externe bibliotheken die HTTPS vereisen)
• Wanneer een externe dienst waarmee je wilt integreren, je vraagt om een wereldwijd toegankelijke HTTPS-gebaseerde API-interface te bieden, en je deze interface moet debuggen

Er zijn veel oplossingen voor deze problemen op de markt, maar de meeste zijn complex en foutgevoelig. Hier wil ik introduceren hoe je Cloudflare Tunnel kunt gebruiken om snel HTTPS en een aangepaste hostnaam te gebruiken voor lokale ontwikkeling.

Wat is Cloudflare Tunnel#

Cloudflare Tunnel is een dienst van Cloudflare die je in staat stelt om je infrastructuur veilig te verbinden met het Cloudflare-netwerk. Het creëert in wezen een veilige en efficiënte verbinding tussen je servers en Cloudflare's wereldwijde netwerk, waardoor je webverkeer wordt beschermd en geoptimaliseerd.

Door Cloudflare Tunnel te gebruiken, kun je eenvoudig je lokale ontwikkelingsmachine aansluiten op Cloudflare's wereldwijde netwerk. Daarna kun je je domein hosten op Cloudflare en verzoeken voor het domein doorsturen naar je lokale machine via de Cloudflare Tunnel.

Vereisten#

Voordat je begint, zorg ervoor dat je:

• Al een domeinnaam bezit en DNSSEC hebt uitgeschakeld bij je registrar (waar je je domeinnaam hebt gekocht).
• Eerder een Cloudflare-account hebt aangemaakt.

Opmerking: In deze handleiding nemen we voor demonstratiedoeleinden aan dat we demo.com als ons domein gebruiken.

Voeg een website toe aan Cloudflare#

Allereerst moet je inloggen op het Cloudflare-dashboard met je Cloudflare-account en de optie "Website" selecteren in het linkermenu. Klik vervolgens op de knop "Aan de slag" op de pagina (als er al een record is, klik dan op "Website toevoegen"). Volg de aanwijzingen om de toevoeging van de website met het domein dat je bezit te voltooien. Na het succesvol toevoegen van de website zie je de volgende inhoud:

Zoals in de afbeelding te zien is, is de toegevoegde website nog niet geactiveerd. Je moet de gids op de pagina volgen om in te loggen bij je domeinregistrar en de naamservers van het domein bij te werken om je website te activeren.

Als voorbeeld nemen we het domein op Godaddy:

Ga naar de Domeininstellingen-pagina, open de optie "Naamservers" onder het DNS-tabblad en wijzig de naamservers naar de waarden die in de gids worden weergegeven:

Na de wijziging, wacht even en de bijbehorende website op Cloudflare wordt geactiveerd:

Nadat je deze inhoud hebt geconfigureerd, wordt je domein gehost op Cloudflare en zal Cloudflare automatisch HTTPS inschakelen voor het domein.

Tunnel maken#

Ga terug naar de homepage van het Cloudflare-dashboard, klik in het linkermenu op "Zero Trust" en selecteer "Tunnels" onder de 'Toegang'-directory. Klik vervolgens op "Een tunnel toevoegen" op de pagina en voer een willekeurige tunnelnaam in (bijv. mijn-dev-tunnel). Volgens de aanwijzingen op de pagina verbind je je lokale ontwikkelingsmachine met de Cloudflare-tunnel.

Als voorbeeld nemen we MacOS. Open een terminal en voer het commando uit dat op de pagina wordt weergegeven:

Als je machine "cloudflared" al eerder heeft geïnstalleerd, hoef je brew install cloudflare/cloudflare/cloudflared niet uit te voeren.

Voer daarna cloudflared tunnel list uit in je terminal en je zult zien dat je machine al verbonden is met de tunnel:

Verkeer naar de gemaakte tunnel routeren#

Nadat we de Tunnel hebben aangemaakt, gaan we de routeringsregels voor de Tunnel configureren.

Stel dat onze lokale applicatie draait op http://localhost:3000, en we willen alle verzoeken voor https://dev.demo.com doorsturen naar de poort waarop de lokale applicatie draait.

Ga eerst terug naar onze tunnelpagina, zoek de tunnel die we zojuist hebben aangemaakt, klik op de knop met de drie puntjes rechts en selecteer "Config".

Vul de relevante configuratie in volgens onze eisen:

Deze configuratie routeert het adres dev.demo.com naar http://localhost:3000 op onze machine. Klik dan op "Hostnaam opslaan".

Na een korte wachttijd, ga naar https://dev.demo.com, en je zult de app zien draaien op onze lokale machine:

Samenvatting#

Na deze handleiding zou je nu eenvoudig HTTPS en een aangepaste hostnaam moeten kunnen implementeren in je lokale ontwikkelingsomgeving zonder je zorgen te maken over complexe configuraties en fouten. Ik hoop dat je baat hebt bij deze handleiding！