it-swarm.com.de

Webpack Dev Server läuft auf HTTPS / Web Sockets Secure

Normalerweise wird Webpack im Entwicklermodus über HTTP ausgeführt. In der Regel gibt es einen Webserver, der Inhalte über HTTP und Webpack unter Verwendung von http/websockets an einem separaten Port bereitstellt.

Ist es möglich, den Webserver unter https und das Webpack unter https/websocket sicher auszuführen?

68
Licx

Siehe Webpack-Dokumentation

Es gibt ein Flag, das Sie dem Befehl webpack-dev-server hinzufügen können

webpack-dev-server --https 
92
royka

Während die obige Antwort für CLI korrekt ist, können Sie, wenn Sie nicht in der CLI sind, Folgendes tun (in einer Schluckaufgabe):

var WebpackDevServer = require('webpack-dev-server');

new WebpackDevServer(webpack(WebpackDevConfig), {
    https: true,
    hot: true,
    watch: true,
    contentBase: path.join(__dirname, 'src'),
    historyApiFallback: true
}).listen(1337, 'localhost', function(err, result) {
    if (err) {
        console.log(err);
    }
    console.log('Dev server running at https://localhost:1337');
});
27
dangoldnj

dies nur für die TEST-Umgebung:

sie müssen Ihren Webpack-Dev-Server wie folgt konfigurieren:

webpack-dev-server --https --cert ./cert.pem --key ./key.pem

es ist jedoch ein Fehler bekannt, wenn Webpack versucht, die Passphrase vom Schlüssel zu lesen. siehe diesen Link

Die einfachste Lösung besteht darin, einen Schlüssel ohne Passphrase zu generieren (Ich kenne die Sicherheitsfolgen hiervon nicht! Dies ist jedoch nur zu Testzwecken).

Verwenden Sie diesen Befehl, um die Passphrase aus Ihrem Schlüssel zu entfernen:

$ openssl rsa -in key.pem -out newKey.pem

und verwenden Sie den neuen Schlüssel in der Vorschau-Konfigurationszeile

14
Khalid Hakami

Mit webpack-dev-server --https Sie erstellen ein selbstsigniertes Zertifikat. Es funktioniert jedoch nicht für alle Anwendungsfälle.

Browser werden Sie nach einer Sicherheitsausnahme fragen und in der URL-Leiste anzeigen, dass die Verbindung nicht sicher ist.

Daher wird empfohlen, ein lokal vertrauenswürdiges Entwicklungszertifikat für localhost mit mkcert zu erstellen

Dann benutze es via CLI:

webpack-dev-server --https --key C:/Users/User/localhost-key.pem --cert C:/Users/User/localhost.pem --cacert C:/Users/User/AppData/Local/mkcert/rootCA.pem

oder konfigurieren Sie die Option devServer.https in webpack.config.js:

devServer: {
    https: {
        key: fs.readFileSync('C:/Users/User/localhost-key.pem'),
        cert: fs.readFileSync('C:/Users/User/localhost.pem'),
        ca: fs.readFileSync('C:/Users/User/AppData/Local/mkcert/rootCA.pem')
    }
}

mkcert erstellt standardmäßig .pem-Dateien im Unix-Format. Wenn Sie also unter Windows arbeiten, müssen Sie diese wahrscheinlich in das Windows-Format konvertieren, indem Sie z. Notepad ++

3
Ilyich

Ich arbeite an einem Reaktionsprojekt. Jetzt wollte ich ein SSL-Zertifikat für dieses Projekt hinzufügen und meine Website mit https ausführen.

  1. Fügen Sie https in webpack.config.js hinzu

     devServer:{
    
              https: true,
              Host: '0.0.0.0', // you can change this ip with your ip
              port: 443,       // ssl defult port number
              inline: true,
    
              historyApiFallback: true,
              publicPath: '/',
              contentBase: './dist',
              disableHostCheck: true
       }
    
  2. Öffentliches SSL-Zertifikat zur package.json-Datei hinzufügen Wenn Sie kein Zertifikat zur package.json-Datei hinzufügen möchten, müssen Sie es zur webpack.config.js hinzufügen. Sie müssen Ihr Zertifikat auch in Ihrem Projekt hinzufügen kann es auf package.json Datei oder webpack.config.js

Für Package.json

scripts: {
                    "test": "echo \"Error: no test specified\" && exit 1",
                    "build": "webpack --mode production",
                    "start": "webpack-dev-server  --open --https --cert /path/to/private.crt --key /path/to/private.key"

            }

ODER webpack.config.js

 devServer:{

              https: true,
              Host: '0.0.0.0', // you can change this ip with your ip
              port: 443,       // ssl defult port number
              inline: true,
              https: {
                    key: fs.readFileSync('/path/to/private.pem'),
                    cert: fs.readFileSync('/path/to/private.pem'),
                    ca: fs.readFileSync('/path/to/private.pem')
                    }
              historyApiFallback: true,
              publicPath: '/',
              contentBase: './dist',
              disableHostCheck: true
       }
  1. Lauf npm start Befehl auf einem Terminal oder Sie können auch pm2 start npm -- start
1
Rawan-25

In meinem Fall musste ich all diese Befehle ausführen, um das Zertifikat zu erhalten:

openssl genrsa -out private.key 4096
openssl req -new -sha256 -out private.csr -key private.key
openssl x509 -req -days 3650 -in private.csr -signkey private.key -out private.crt -extensions req_ext
openssl x509 -in private.crt -out private.pem -outform PEM

Und zum Schluss:

npm run dev -- --open --https --cert private.pem --key private.key
0
AndreFeijo