Webpack Serveur de Dev en cours d'exécution sur HTTPS/Web Sockets Sécurisés

Normalement en mode développeur Webpack s'exécute à l'aide du protocole HTTP. Il est généralement un serveur web qui fournissent du contenu via HTTP et webpack à l'aide de http/websockets sur un autre port.

Est-il possible de lancer le serveur web en https et webpack sur https/websocket sécurisé ?

InformationsquelleAutor Licx | 2014-10-30
  1. 86

    Voir le webpack docs

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

    webpack-dev-server --https
    • serveur web en https, mais webpack-dev-serveur ne veut pas créer une connexion https à douille.io—corriger?
    • J'ai essayé et maintenant http ne fonctionne plus. Est-il possible comment je peux utiliser https et http?
    • avez-vous trouvé une solution à utiliser à la fois les protocoles http et https?
    • Non, mais je n'ai pas vraiment besoin. Il a juste fallu un certain temps pour s'habituer à toujours l'ouverture de ma version locale avec le protocole https.
    InformationsquelleAutor royka
  2. 26

    Alors que la réponse ci-dessus est correct pour de la cli, si vous n'êtes pas dans la CLI, vous pourriez faire quelque chose comme ceci (en bu une gorgée de la tâche):

    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');
});
    • Lorsque vous faites cela, j'obtiens une erreur 502 Bad Gateway. Est-il quelque chose de spécial j'ai peut-être configuré que les causes de cette ou de quelque chose d'autre je vais avoir besoin? Par exemple, cela fonctionne dans Windows?
    • Peut-être vous avez besoin de changer le port de 1337 à 443? Ou peut-être vous avez besoin d'inclure le port de votre demande au serveur, tels que https: //localhost:1337? Laissez-nous plus de détails de ce que votre serveur est configuré comme ainsi que l'URL à charger, et peut-être plus 🙂
    • J'ai d'abord été "net::ERR_INSECURE_RESPONSE" -les erreurs dans mon navigateur, depuis webpack-dev-serveur utilise un certificat auto-signé. Cela a été fixée par la visite une fois l'bloqué "https://.... .js"-url, et qui dit au navigateur, je suis sûr que je veux continuer.
    InformationsquelleAutor dangoldnj
  3. 14

    ce pour l'environnement de TEST uniquement:

    vous avez besoin pour configurer votre webpack-dev-serveur comme suit:

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

    cependant, il est connu d'erreur lors de l'webpack essaie de lire le mot de passe de la clé.
    veuillez consulter ce lien

    La méthode la plus simple de contourner ce problème consiste à générer une clé sans passphrase (je ne connais pas les conséquences sur la sécurité de ce! mais c'est pour test uniquement) .

    De prendre la phrase de passe de votre clé, utilisez cette commande:

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

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

    • Ce lien que vous avez posté, il n'est probablement pas comme vous le souhaitiez?
    • juste ajouter --https , pas besoin d' --cert ./cert.pem --clé ./clé.pem , webpack va générer la cer pour lui-même.
    • Valide cert n'a pas été générée pour moi. Chrome se sont plaints de la connexion. J'ai dû mettre le cert et la clé pour le fixer. J'ai opté pour la mise en dev fichier de configuration.
    InformationsquelleAutor Khalid Hakami
  4. 3

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

    Des navigateurs vous demander une exception de sécurité et de montrer dans la barre d'url que la connexion n'est pas sécurisée.

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

    Ensuite l'utiliser via la 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 configurer devServer.option 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 .pem fichiers au format Unix par défaut. Donc, si vous êtes sur Windows, vous aurez probablement besoin de les convertir vers le format de Windows par exemple à l'aide de Notepad++

    InformationsquelleAutor Ilyich