Hantering av lokal HTTPS-utveckling

När du utvecklar webbapplikationer kräver specifika scenarier HTTPS, även i en lokal miljö. Oavsett om du integrerar med säkra tredjeparts-API:er, testar HTTPS-endast funktioner som servicearbetare och HTTP/2, eller replikerar produktionsförhållanden för att säkerställa smidig distribution, blir HTTPS avgörande. Dessutom kräver vissa webbläsar-API:er—som geolokalisering, push-notifikationer och hantering av inloggningsuppgifter—en säker kontext för att fungera effektivt.

Till exempel kräver Logto OSS HTTPS som standard utom localhost, i sådana fall kan det spara tid att lära sig hur man ställer in HTTPS för lokal utveckling. Denna artikel kommer att guida dig genom att sätta upp HTTPS för lokal utveckling och introducera verktyg som Mkcert för att förenkla processen.

Rollen av localhost och HTTPS-endast funktioner#

localhost är ett speciellt domännamn som kan hantera många HTTPS-endast funktioner som servicearbetare, säkra cookies, HTTP/2 och andra webbläsar-API:er som fungerar bra i http://localhost:xxxx, så du kanske inte alltid behöver lokal HTTPS, prova localhost först!

Prova Cloudflare tunnels#

Tidigare introducerad i denna artikel, Cloudflare-tunnlarna kan enkelt exponera din lokala tjänst för Internet med HTTPS redo.

Ställa in lokal HTTPS#

Kan inte de 2 alternativen lösa ditt problem? Då låt oss ställa in lokal HTTPS. I de följande stegen antar vi att det lokala domännamnet är example.com.

Steg 1: uppdatera hosts-filen#

Innan vi börjar, se till att måldomänen löser sig till din lokala maskin, detta kan göras genom att uppdatera hosts-filen. Öppna /etc/hosts på Linux/macOS eller C:\Windows\System32\drivers\etc\hosts på Windows och lägg till följande rader:

Steg 2: generera certifikat#

Det första med HTTPS är en certifiering. I produktion kan detta göras med verktyg som "Let's encrypt" eller köpa certifikat från dina tjänsteleverantörer. Men i lokal utveckling kan vi generera certifikat direkt.

Mkcert är ett enkelt verktyg utan konfiguration för att göra lokalt betrodda utvecklingscertifikat med valfria namn.

Först, följ den officiella guiden för att installera mkcert, anta att du använder macOS:

För Windows och Linux, kolla denna länk.

Nu när mkcert är klar att använda, kör detta kommando för att generera en lokal CA och lagra rotcertifikatet i din systems betrodda butik. För att lära dig mer om "CA" och certifikat, kolla dokumentationen av Cloudflare.

Generera sedan ett lokalt SSL-certifikat

Detta skapar filerna example.com.pem och example.com-key.pem i din katalog.

Steg 3: ställ in HTTPS i din app#

När certifikatfilerna är klara kan du nu aktivera HTTPS i din app. Till skillnad från i produktionsmiljön där en omvänd proxy som Nginx hanterar HTTPS, kan vi i lokal utveckling ställa in direkt i webbapplikationerna. Låt oss ta Express som ett exempel.

Skapa en enkel Express-server med följande kod:

Kör applikationen och besök https://example.com för att se din säkra Express-app i aktion.

Aktivera HTTPS för Logto OSS#

Logto OSS kräver HTTPS som standard, förutom localhost, om du vill köra Logto lokalt med en annan domän behöver du ställa in lokal HTTPS.

1. Ställ in Logto: Följ länken för att ställa in Logto på din lokala maskin: https://docs.logto.io/docs/get-started/.
2. Förbered certifikat: Använd mkcert för att generera två .pem-filer och placera dem i en katalog.
3. Ställ in miljövariabler: Ange både HTTPS_CERT_PATH och HTTPS_KEY_PATH för att aktivera HTTPS via Node, kolla denna länk för att lära dig mer.

Sammanfattning#

Att ställa in HTTPS för lokal utveckling är inte så komplicerat som det kan verka. Med hjälp av verktyg som Mkcert blir generering av pålitliga lokala certifikat en snabb och enkel process. Medan localhost ofta hanterar många HTTPS-endast funktioner finns det tillfällen när du behöver full HTTPS-support, och denna guide hjälper dig att nå dit. Oavsett om du testar API:er, arbetar med Logto OSS, eller bara replikerar produktionsförhållanden, genom att följa dessa steg kommer du att säkerställa att du är redo för säker, sömlös utveckling.