2014-10-30 8 views
37

Normalmente in modalità sviluppatore Webpack viene eseguito tramite HTTP. Di solito c'è un server web che serve i contenuti tramite HTTP e webpack usando http/websockets su una porta separata.Webpack Dev Server in esecuzione su HTTPS/Web Sockets Secure

È possibile eseguire il server Web su https e il webpack su https/websocket sicuro?

+0

dopo aver riletto un paio di volte potrebbe essere un duplicato della mia domanda? http://stackoverflow.com/questions/31973085/how-to-run-webpack-dev-server-https-hot-inline – chemoish

risposta

55

Vedi l'webpack docs

C'è una bandiera è possibile aggiungere al comando webpack-dev-server di

webpack-dev-server --https 
+1

webserver è in https, ma webpack-dev-server non crea una connessione https al socket .io-correct? – chemoish

+0

Ho provato questo e ora http non funziona più. C'è un modo in cui posso usare sia https che http? – Eschon

+0

@Eschon hai trovato qualche soluzione per utilizzare sia http che https? –

19

Mentre la risposta di cui sopra è corretto per CLI, se non si è nella CLI, si potrebbe fare qualcosa di simile (in un compito gulp):

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

In tal caso, viene visualizzato un errore 502 Bad Gateway. C'è qualcosa di speciale che potrei avere configurato che causa questo o qualcos'altro di cui ho bisogno? Ad esempio, funziona in Windows? – Sawtaytoes

+0

Forse hai bisogno di cambiare la porta da 1337 a 443? O forse è necessario includere la porta nella richiesta al server, come https: // localhost: 1337? Lasciaci maggiori dettagli su come è configurato il tuo server e su quale URL stai caricando, e forse possiamo aiutarti di più :) – dangoldnj

+0

Ho ricevuto per la prima volta "net :: ERR_INSECURE_RESPONSE" -errors nel mio browser, poiché webpack-dev-server utilizza un certificato autofirmato. Ciò è stato risolto visitando una volta il "https: // .... .js" -url bloccato e dicendo al browser che sono sicuro di voler procedere. – np8

6

questo per ambiente di test solo:

è necessario configurare il webpack-dev-server come segue:

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

Tuttavia, v'è un errore noto quando webpack cerca di leggere la passphrase dalla chiave. please see this link

Il lavoro più semplice intorno è quello di generare una chiave senza passphrase (non so le conseguenze di sicurezza di questo! Ma questo è solo per prove).

di prendere la passphrase dal vostro uso chiave di questo comando:

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

e utilizzare la nuova chiave nella linea di configurazione anteprime

+1

Questo link che hai postato, probabilmente non è come intendevi? – Neikius

+2

basta aggiungere --https, non c'è bisogno di --cert ./cert.pem --key ./key.pem, webpack genererà il cer per se stesso. –