Wie verwende ich mein localhost Zertifikat mit VS Code

Beim Entwickeln von Frontend-Lösungen mit VS Code finde stört mich an Standard-Setups wie z. B. mit Vite, dass localhost ohne Zertifikat ausgeführt wird. Browser beschweren sich darüber und Sie müssen dies explizit zulassen. Es gibt zwar eine einfache Erweiterung, die eine Zertifikat für die Domain "example.com" verwendet, aber auch das wird vom Browser moniert.

Hier beschreibe ich, wie man Vite oder besser den zugrunde liegenden Dev-Server für die Ausführung mit https auf einem Windows 11-Rechner konfiguriert:

Ich setze voraus, Sie haben bereits ein localhost-Zertifikat. Falls Sie noch keins haben finden Sie hier eine Beschreibung zum Erzeugen von selbst signierten Zertifikaten. Sie müssen Ihr localhost-Zertifikat mit der Microsoft Management Console [mmc] und dem Zertifikate-Plugin exportieren. Exportieren Sie es als PFX-Datei mit privatem Schlüssel. Wählen Sie im zweiten Schritt den Export des privaten Schlüssels und verwenden Sie in den nächsten Schritten die Standardeinstellungen. Passwort für 4. Schritt merken!
Installieren Sie OpenSSL e. g. Win64OpenSSL_Light-3_0_7.msi von https://slproweb.com/products/Win32OpenSSL.html.
Doppelklicken Sie auf start.bat in C:\Program Files\OpenSSL-Win64, um eine OpenSSL-Eingabeaufforderung zu öffnen.

Navigieren Sie zum Ordner der exportierten .pfx-Datei und führen Sie folgende Befehle aus:

cd C:\[PFAD IHRES PFX-EXPORT-ORDNERS]

openssl pkcs12 -in localhost.pfx -out certificate.txt -nodes

Öffnen Sie die resultierende certificate.txt in einem Texteditor und extrahieren Sie zwei Dateien:
Kopieren Sie den Abschnitt ab und einschließlich -----BEGIN CERTIFICATE----- bis -----END CERTIFICATE----- in die Datei localhost.crt.
Kopieren Sie den Abschnitt ab und einschließlich -----BEGIN PRIVATE KEY----- bis -----END PRIVATE KEY----- in die Datei localhost.key.
Kopieren Sie localhost.crt und localhost.key in den Unterordner cert Ihres Vite-Projekts.
Sicherheitshalber sollten *.crt und *.key Dateien in die .gitignore Datei aufgenommen werden, damit diese nicht in einem Repository landen.

Werfen Sie einen Blick in vite.config.js für die Serverkonfiguration. Neu und entscheidend ist der Abschnitt server:

import { defineConfig } from 'vite'
import dns from 'dns'
import fs from 'fs'

dns.setDefaultResultOrder('verbatim')

export default defineConfig({
  build: {
    lib: {
      ...
    }
  },
  server:{
    https:{
      cert: fs.readFileSync('./cert/localhost.crt'),
      key: fs.readFileSync('./cert/localhost.key')
    }
  }
})

In einem ReactJS Projekt, dass mit npx create-react-app my-app erzeugt wurde kann man z. B. eine .env.local Datei mit folgendem Inhalt verwenden:
```
HTTPS=true
SSL_CRT_FILE=cert\localhost.crt
SSL_KEY_FILE=cert\localhost.key
```

Abgesehen von der Vite spezifischen vite.config.js Datei, sollte sich diese Vorgehensweise auch auf andere Projektarten anwenden lassen.

Sollte beim Kopieren der Inhalte in die .key und .crt Dateien ein Fehler passieren, dann führt das zu wenig hilfreichen Fehlermeldungen beim Starten des Dev-Servers. In diesem Fall also zuerst noch mal beide Dateien kontrollieren.

Wie verwende ich mein localhost Zertifikat mit VS Code