ssl - wds - webpack dev server https




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

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?


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, Notepad ++.


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 d'avance):

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

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 obligatoire 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. Exécutez la commande npm start sur un terminal ou vous pouvez également utiliser pm2 start npm -- start

Voir la documentation du webpack

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

webpack-dev-server --https 




devserver