Webpack Dev Server, der unter HTTPS / Web Sockets Secure ausgeführt wird

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

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

Siehe die Webpack-Dokumente

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

webpack-dev-server --https 

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');
});

Dies gilt 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

Die einfachste Lösung besteht darin, einen Schlüssel ohne Passphrase zu generieren (ich kenne die Sicherheitsfolgen nicht! Dies dient 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 Konfigurationszeile der Vorschau

Mit webpack-dev-server --httpserstellen Sie 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, mit mkcert ein lokal vertrauenswürdiges Entwicklungszertifikat für localhost zu erstellen

Verwenden Sie es dann über die 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 unter Windows arbeiten, müssen Sie diese wahrscheinlich mit Notepad ++ in das Windows-Format konvertieren

In meinem Fall musste ich alle 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 dann endlich:

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

Ich arbeite an einem Reaktionsprojekt. Jetzt wollte ich ein SSL-Zertifikat für dieses Projekt hinzufügen und meine Website mit https ausführen. Befolgen Sie daher den folgenden Schritt:

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 Datei package.json hinzufügen Wenn Sie Ihrer Datei package.json kein Zertifikat hinzufügen möchten, müssen Sie es zu Ihrer Datei webpack.config.js hinzufügen. Sie müssen Ihr Zertifikat entweder 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
       }

3. Führen Sie den npm startBefehl auf einem Terminal aus oder verwenden Sie ihn auchpm2 start npm -- start