Ontdek hoe je lokale HTTPS kunt implementeren in je ontwikkelingsworkflow met tools zoals Mkcert en stapsgewijze handleidingen voor Express.js en Next.js.
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.
localhost en HTTPS-only functieslocalhost 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!
Eerder geïntroduceerd in dit artikel, kunnen Cloudflare tunnels je lokale service gemakkelijk blootstellen aan het internet met HTTPS klaar.
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.
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:
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.
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.
Logto OSS vereist standaard HTTPS, behalve voor localhost. Als je Logto lokaal wilt draaien met een andere domein, moet je lokale HTTPS instellen.
mkcert om twee .pem bestanden te genereren en plaats ze in een directory.HTTPS_CERT_PATH als HTTPS_KEY_PATH op om HTTPS via Node in te schakelen, bekijk deze link om meer te leren.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.