Utforska hur du implementerar lokal HTTPS i din utvecklingsprocess med verktyg som Mkcert och steg-för-steg-guider för Express.js och Next.js.
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.
localhost och HTTPS-endast funktionerlocalhost ä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!
Tidigare introducerad i denna artikel, Cloudflare-tunnlarna kan enkelt exponera din lokala tjänst för Internet med HTTPS redo.
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.
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:
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.
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.
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.
mkcert för att generera två .pem-filer och placera dem i en katalog.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.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.