Omgaan met lokale HTTPS-ontwikkeling

Bij het ontwikkelen van webapplicaties zijn er specifieke scenario's die HTTPS vereisen, zelfs in een lokale omgeving. Of je nu integreert met beveiligde externe API's, HTTPS-only functies zoals service workers en HTTP/2 test, of productieomstandigheden nabootst om een naadloze implementatie te garanderen, HTTPS wordt cruciaal. Bovendien vereisen bepaalde browser-API's - zoals geolocatie, pushmeldingen en beheer van inloggegevens - een beveiligde context om effectief te functioneren.

Logto OSS vereist bijvoorbeeld standaard HTTPS, behalve op localhost. In dergelijke gevallen, kan het leren instellen van HTTPS voor lokale ontwikkeling je tijd besparen. Dit artikel zal je begeleiden bij het opzetten van HTTPS voor lokale ontwikkeling, waarbij tools zoals Mkcert worden geïntroduceerd om het proces te vereenvoudigen.

De rol van localhost en HTTPS-only functies#

localhost is een speciale domein die vele HTTPS-only functionaliteiten kan afhandelen zoals service workers, beveiligde cookies, HTTP/2 en andere browser-API's kunnen goed werken op http://localhost:xxxx, dus het kan zijn dat je niet altijd lokale HTTPS nodig hebt, probeer eerst localhost!

Probeer Cloudflare tunnels#

Eerder geïntroduceerd in dit artikel, kunnen Cloudflare tunnels je lokale service gemakkelijk blootstellen aan het internet met HTTPS klaar.

Opzetten van lokale HTTPS#

Kunnen de 2 opties je probleem niet oplossen? Laten we dan lokale HTTPS instellen. In de volgende stappen, gaan we ervan uit dat de lokale domeinnaam example.com is.

Stap 1: hosts-bestand bijwerken#

Voordat we beginnen, zorg ervoor dat de doel-domeinnaam naar je lokale machine verwijst, dit kan worden gedaan door het hosts-bestand bij te werken. Open /etc/hosts op Linux/macOS of C:\Windows\System32\drivers\etc\hosts op Windows, en voeg de volgende regels toe:

Stap 2: certificaten genereren#

Het eerste wat je nodig hebt voor HTTPS is een certificaat. In productie kan dit worden gedaan door tools zoals "Let's Encrypt" of door certificaten van je serviceproviders aan te kopen. Maar in lokale ontwikkeling kunnen we certificaten direct genereren.

Mkcert is een simpele tool zonder configuratie om lokaal vertrouwde ontwikkelingscertificaten te maken met namen die je maar wilt.

Volg eerst de officiële handleiding om mkcert te installeren, ervan uitgaande dat je macOS gebruikt:

Voor Windows en Linux, check deze link.

Met mkcert klaar voor gebruik, voer je deze opdracht uit om een lokale CA te genereren en het rootcertificaat in de vertrouwde winkel van je systeem op te slaan. Om meer te leren over "CA" en certificaten, raadpleeg de documentatie van Cloudflare.

Vervolgens, genereer een lokaal SSL-certificaat

Hierdoor worden example.com.pem en example.com-key.pem bestanden in je directory aangemaakt.

Stap 3: HTTPS opzetten in je app#

Met de certificaatbestanden gereed, kun je nu HTTPS in je app activeren. In tegenstelling tot een productieomgeving waar een reverse proxy zoals Nginx het HTTPS regelt, kunnen we in lokale ontwikkeling het direct in de webapplicaties instellen. Laten we Express als voorbeeld nemen.

Maak een eenvoudige Express-server met de volgende code:

Voer de applicatie uit en bezoek https://example.com om je veilige Express-app in actie te zien.

HTTPS inschakelen voor Logto OSS#

Logto OSS vereist standaard HTTPS, behalve voor localhost. Als je Logto lokaal wilt draaien met een andere domein, moet je lokale HTTPS instellen.

1. Stel Logto in: Volg de link om Logto op je lokale machine in te stellen: https://docs.logto.io/docs/get-started/.
2. Bereid certificaten voor: Gebruik mkcert om twee .pem bestanden te genereren en plaats ze in een directory.
3. Stel omgevingsvariabelen in: Geef zowel HTTPS_CERT_PATH als HTTPS_KEY_PATH op om HTTPS via Node in te schakelen, bekijk deze link om meer te leren.

Samenvatting#

Het opzetten van HTTPS voor lokale ontwikkeling is niet zo ingewikkeld als het lijkt. Met behulp van tools zoals Mkcert wordt het genereren van vertrouwde lokale certificaten een snel en eenvoudig proces. Terwijl localhostBold vaak veel HTTPS-only functies afhandelt, zijn er momenten waarop je volledige HTTPS-ondersteuning nodig hebt, en deze gids helpt je om daar te komen. Of je nu API's test, werkt met Logto OSS, of simpelweg productieomstandigheden nabootst, door deze stappen te volgen, ben je klaar voor een veilige, naadloze ontwikkeling.