web-dev-qa-db-fra.com

Webpack Dev Server s'exécutant sur HTTPS / Web Sockets Secure

Normalement, en mode développeur, Webpack s'exécute en utilisant HTTP. Il existe généralement un serveur Web servant du contenu via HTTP et Webpack utilisant http/websockets sur un port séparé.

Est-il possible d'exécuter le serveur Web sur https et WebPack sur https/websocket secure?

sslhttpswebpackdevserver
68
Licx

Voir le webpack docs

Il y a un drapeau que vous pouvez ajouter à la commande webpack-dev-server

webpack-dev-server --https
92
royka

Bien que la réponse ci-dessus soit correcte pour cli, si vous ne vous trouvez pas dans l'interface de ligne de commande, vous pouvez effectuer quelque chose comme ceci (dans une tâche 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');
});
27
dangoldnj

ceci uniquement pour l'environnement TEST:

vous devez configurer votre serveur webpack-dev-server comme suit:

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

cependant, il existe une erreur connue lorsque Webpack tente de lire la phrase secrète à partir de la clé. s'il vous plaît voir ce lien

La solution la plus simple consiste à générer une clé sans phrase secrète (je n'en connais pas les conséquences pour la sécurité! Mais cela ne concerne que le test).

Pour extraire la phrase secrète de votre clé, utilisez cette commande:

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

et utiliser la nouvelle clé dans la ligne de configuration des aperçus

14
Khalid Hakami

Avec webpack-dev-server --https vous créez un certificat auto-signé. Mais cela ne fonctionne pas pour tous les cas d'utilisation.

Les navigateurs vous demanderont une exception de sécurité et indiqueront dans la barre d’URL que la connexion n’est pas sécurisée.

Par conséquent, il est recommandé de créer un certificat de développement approuvé localement pour localhost avec mkcert

Puis utilisez-le 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

ou configurez l'option devServer.https dans 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 crée des fichiers .pem au format Unix par défaut. Donc, si vous utilisez Windows, vous aurez probablement besoin de les convertir au format Windows en utilisant par exemple. Bloc-notes ++

3
Ilyich

Je travaille sur le projet de réaction. Je souhaitais maintenant ajouter un certificat SSL à ce projet et exécuter mon site Web avec https.

  1. Dans ajouter https dans 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,

          historyApiFallback: true,
          publicPath: '/',
          contentBase: './dist',
          disableHostCheck: true
   }

  2. Ajouter un certificat public SSL au fichier package.json Si vous ne souhaitez pas ajouter de certificat à votre fichier package.json, vous devez l'ajouter à votre fichier webpack.config.js. Il est indispensable d'ajouter votre certificat à votre projet. peut-il sur le fichier package.json ou webpack.config.js

Pour 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"

            }

OU 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. Courir npm start commande sur un terminal ou vous pouvez également utiliser pm2 start npm -- start
1
Rawan-25

Dans mon cas, j'ai dû exécuter toutes ces commandes pour obtenir le certificat:

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

Et puis finalement:

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