Umgang mit lokalem HTTPS-Entwicklung

Bei der Entwicklung von Webanwendungen erfordern bestimmte Szenarien HTTPS, auch in einer lokalen Umgebung. Egal, ob du dich mit sicheren Drittanbieter-APIs integrierst, HTTPS-exklusive Funktionen wie Service Workers und HTTP/2 testest oder Produktionsbedingungen replizierst, um eine nahtlose Bereitstellung sicherzustellen, HTTPS wird entscheidend. Darüber hinaus erfordern bestimmte Browser-APIs—wie Geolokalisierung, Push-Benachrichtigungen und Verwaltung von Anmeldeinformationen—einen sicheren Kontext, um effektiv zu arbeiten.

Beispielsweise erfordert Logto OSS standardmäßig HTTPS, außer localhost, in solchen Fällen kann das Erlernen des Einrichtens von HTTPS für lokale Entwicklung deine Zeit sparen. Dieser Artikel wird dich durch das Einrichten von HTTPS für lokale Entwicklungen führen und Tools wie Mkcert vorstellen, um den Prozess zu vereinfachen.

Die Rolle von localhost und HTTPS-exklusiven Funktionen#

localhost ist eine spezielle Domain, die viele HTTPS-exklusive Funktionalitäten wie Service Workers, sichere Cookies, HTTP/2 und andere Browser-APIs bewältigen kann und in http://localhost:xxxx gut funktionieren kann, daher benötigst du möglicherweise nicht immer lokales HTTPS, versuche zuerst localhost!

Probiere Cloudflare Tunnels#

Zuvor vorgestellt in diesem Artikel, können Cloudflare Tunnels deinen lokalen Dienst ganz einfach mit HTTPS online verfügbar machen.

Einrichtung von lokalem HTTPS#

Die 2 Optionen können dein Problem nicht lösen? Dann lass uns lokales HTTPS einrichten. In den folgenden Schritten nehmen wir an, dass der lokale Domainname example.com ist.

Schritt 1: Aktualisieren der Hosts-Datei#

Bevor wir beginnen, stelle sicher, dass die Zieldomain auf deine lokale Maschine aufgelöst wird, dies kann durch Aktualisierung der Hosts-Datei geschehen. Öffne /etc/hosts auf Linux/macOS oder C:\Windows\System32\drivers\etc\hosts auf Windows und füge die folgenden Zeilen hinzu:

Schritt 2: Zertifikate generieren#

Das Erste bei HTTPS ist ein Zertifikat. In der Produktion kann dies mit Tools wie "Let's encrypt" durchgeführt oder Zertifikate von deinen Dienstanbietern gekauft werden. Aber in der lokalen Entwicklung können wir Zertifikate direkt generieren.

Mkcert ist ein einfaches Tool ohne Konfiguration, um lokal vertrauenswürdige Entwicklungszertifikate mit beliebigen Namen zu erstellen.

Befolge zunächst den offiziellen Leitfaden zur Installation von mkcert, wobei angenommen wird, dass du macOS verwendest:

Für Windows und Linux, siehe dieser Link.

Wenn mkcert nun einsatzbereit ist, führe diesen Befehl aus, um ein lokales CA zu generieren und das Root-Zertifikat in deinem System-Truststore zu speichern. Um mehr über "CA" und Zertifikate zu erfahren, sieh dir die Dokumentation von Cloudflare an.

Dann ein lokales SSL-Zertifikat generieren

Dies erstellt example.com.pem und example.com-key.pem Dateien in deinem Verzeichnis.

Schritt 3: HTTPS in deiner App einrichten#

Mit den Zertifikatsdateien bereit, kannst du jetzt HTTPS in deiner App aktivieren. Anders als in Produktionsumgebungen, in denen ein Reverse-Proxy wie Nginx das HTTPS verarbeitet, können wir in der lokalen Entwicklung direkt in den Webanwendungen einrichten. Nehmen wir Express als Beispiel.

Erstelle einen einfachen Express-Server mit folgendem Code:

Führe die Anwendung aus und besuche https://example.com, um deine sichere Express-App in Aktion zu sehen.

HTTPS für Logto OSS aktivieren#

Logto OSS erfordert standardmäßig HTTPS, außer für localhost, wenn du Logto lokal mit einer anderen Domain ausführen möchtest, musst du lokales HTTPS einrichten.

1. Logto einrichten: Folge dem Link, um Logto auf deinem lokalen Computer einzurichten: https://docs.logto.io/docs/get-started/.
2. Zertifikate vorbereiten: Verwende mkcert, um zwei .pem Dateien zu generieren und platziere sie in einem Verzeichnis.
3. Umgebungsvariablen setzen: Gib sowohl HTTPS_CERT_PATH als auch HTTPS_KEY_PATH an, um HTTPS über Node zu aktivieren, siehe in diesem Link mehr darüber.

Zusammenfassung#

Die Einrichtung von HTTPS für lokale Entwicklung ist nicht so kompliziert, wie es scheinen mag. Mit der Hilfe von Tools wie Mkcert wird das Erstellen vertrauenswürdiger lokaler Zertifikate ein schneller und einfacher Prozess. Während localhostFettdruck oft viele HTTPS-exklusive Funktionen bewältigt, gibt es Zeiten, in denen du volle HTTPS-Unterstützung benötigst, und dieser Leitfaden hilft dir dabei. Egal, ob du APIs testest, mit Logto OSS arbeitest oder einfach Produktionsbedingungen replizierst, indem du diesen Schritten folgst, bist du bereit für eine sichere, nahtlose Entwicklung.