Сервер Webpack Dev работает на HTTPS/Web Sockets Secure

Ответ 1

См. Документы в веб-пакете

Существует флаг, который вы можете добавить в команду webpack-dev-server

webpack-dev-server --https 

Ответ 2

В то время как вышеприведенный ответ верен для cli, если вы не находитесь в CLI, вы можете сделать что-то вроде этого (в задаче 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');
});

Ответ 3

это только для среды TEST:

вам нужно настроить свой webpack-dev-сервер следующим образом:

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

однако, существует известная ошибка, когда webpack пытается прочитать кодовую фразу из ключа.  см. эту ссылку

Простейшая работа заключается в создании ключа без парольной фразы (я не знаю последствий этой проблемы безопасности, но это только для теста).

Чтобы взять ключевую фразу из вашего ключа, используйте следующую команду:

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

и используйте новый ключ в строке конфигурации предварительного просмотра

Ответ 4

С помощью webpack-dev-server --https вы создаете самозаверяющий сертификат. Но это работает не для всех случаев использования.

Браузеры спросят вас об исключении безопасности и покажут в строке URL, что соединение небезопасно.

Поэтому рекомендуется создать локально доверенный сертификат разработки для localhost с помощью mkcert.

Затем используйте его через 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

или настройте параметр devServer.https в 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 по умолчанию создает файлы .pem в формате Unix. Поэтому, если вы работаете в Windows, вам, вероятно, потребуется преобразовать их в формат Windows, например, используя Notepad++

Ответ 5

Я работаю над проектом реагирования. Теперь я хочу добавить SSL-сертификат для этого проекта и запустить свой веб-сайт с https, поэтому выполните следующий шаг:

1. В добавлении https в 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. Добавление общедоступного сертификата SSL в файл package.json Если вы не хотите добавлять сертификат в свой файл package.json, вам нужно добавить его в свой webpack.config.js, поэтому обязательно добавьте свой сертификат в свой проект. это можно сделать в файле package.json или в webpack.config.js

Для 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"

            }

ИЛИ 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
       }

3. Запустите команду npm start на терминале, или вы также можете использовать pm2 start npm -- start

Ответ 6

Когда я пытаюсь это сделать, я получаю ошибку

RangeError: Invalid typed array length: -4095
at new Uint8Array (<anonymous>)
at new FastBuffer (buffer.js:72:1)
at Handle.onStreamRead [as onread] (internal/stream_base_commons.js:121:17)
at Stream.<anonymous> (/home/adamskrodzki/testNode/js-ipfs/examples/browser-webpack/node_modules/handle-thing/lib/handle.js:120:12)
at Stream.emit (events.js:187:15)
at endReadableNT (/home/adamskrodzki/testNode/js-ipfs/examples/browser-webpack/node_modules/readable-stream/lib/_stream_readable.js:1010:12)
at process.internalTickCallback (internal/process/next_tick.js:72:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: 'node server.js'
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-12-03T17_04_09_330Z-debug.log

Ответ 7

В моем случае мне пришлось выполнить все эти команды, чтобы получить сертификат:

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

И вот наконец:

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