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

78

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?

Licx
quelle
Nachdem ich dies ein paar Mal gelesen habe, könnte es ein Duplikat meiner Frage sein? stackoverflow.com/questions/31973085/…
chemoish

Antworten:

104

Siehe die Webpack-Dokumente

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

webpack-dev-server --https 
Royka
quelle
4
Der Webserver befindet sich in https, aber der Webpack-Dev-Server stellt keine https-Verbindung zu socket.io her - richtig?
Chemoish
Ich habe es versucht und jetzt funktioniert http nicht mehr. Gibt es eine Möglichkeit, wie ich sowohl https als auch http verwenden kann?
Eschon
@Eschon Haben Sie eine Lösung gefunden, um sowohl http als auch https zu verwenden?
Muhammad Ateeq Azam
@ MuhammadAteeqAzam Nein, aber ich brauchte es nicht wirklich. Es dauerte nur einige Zeit, bis ich mich daran gewöhnt hatte, meine lokale Version immer mit https zu öffnen.
Eschon
Ich habe hier ein Tutorial gemacht bininarycarpenter.com/… . Eigentlich müssen Sie ein SSL-Zertifikat generieren und ihm vertrauen. Es ist eine einmalige Einrichtung und Sie können sie für
mindestens
29

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');
});
dangoldnj
quelle
Dabei erhalte ich einen 502 Bad Gateway-Fehler. Gibt es etwas Besonderes, das ich möglicherweise konfiguriert habe, das dies verursacht, oder etwas anderes, das ich brauche? Funktioniert dies beispielsweise unter Windows?
Kevin Ghadyani
1
Vielleicht müssen Sie den Port von 1337 auf 443 ändern? Oder müssen Sie den Port in Ihre Anfrage an den Server aufnehmen, z. B. https: // localhost: 1337? Hinterlassen Sie uns weitere Details darüber, wie Ihr Server eingerichtet ist und welche URL Sie laden, und vielleicht können wir Ihnen weiterhelfen :)
dangoldnj
1
Ich habe zuerst "net :: ERR_INSECURE_RESPONSE" -Fehler in meinem Browser erhalten, da der Webpack-Dev-Server ein selbstsigniertes Zertifikat verwendet. Dies wurde behoben, indem einmal die blockierte "https: // .... .js" -url aufgerufen und dem Browser mitgeteilt wurde, dass ich sicher bin, dass ich fortfahren möchte.
np8
17

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

Khalid Hakami
quelle
5
Dieser Link, den Sie gepostet haben, ist wahrscheinlich nicht so, wie Sie es beabsichtigt haben?
Neikius
2
Fügen Sie einfach --https hinzu, ohne dass --cert ./cert.pem --key ./key.pem erforderlich ist. Das Webpack generiert den Cer für sich.
usef_ksa
8
Ein gültiges Zertifikat wurde für mich nicht generiert. Chrome beschwerte sich über die Verbindung. Ich musste das Zertifikat und den Schlüssel einstellen, um es zu reparieren. Ich habe mich für die Einstellung in der Dev-Konfigurationsdatei entschieden.
David Fairbanks
11

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

Iljitsch
quelle
7

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
AndreFeijo
quelle
4

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
       }
  1. Führen Sie den npm startBefehl auf einem Terminal aus oder verwenden Sie ihn auchpm2 start npm -- start
Rawan-25
quelle
Das httpszweite Codebeispiel enthält zwei Attribute. Ist das richtig?
Sergio Belevskij
Ich denke, er könnte der erste gewesen sein https: true, der eine http2: true Webpack-Dokumentation war
Pa Bäckström