Сервер Webpack Dev, що працює на HTTPS / Web Sockets Secure

Question 1

Зазвичай у режимі розробника Webpack працює за допомогою HTTP. Зазвичай існує веб-сервер, що обслуговує вміст через HTTP та webpack, використовуючи http / websockets на окремому порту.

Чи можна запустити веб-сервер на https та webpack на https / websocket secure?

Question 2

Див. Документи webpack

Існує прапор, який ви можете додати до команди webpack-dev-server

webpack-dev-server --https

Question 3

Хоча наведена вище відповідь правильна для cli, якщо ви не в CLI, ви можете зробити щось подібне (у ковтальному завданні):

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

Question 4

це лише для середовища TEST:

Вам потрібно налаштувати сервер webpack-dev таким чином:

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

Найпростішим способом є створення ключа без парольної фрази (я не знаю наслідків безпеки для цього! Але це лише для тесту).

Щоб вийняти парольну фразу з ключа, використовуйте цю команду:

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

і використовуйте новий ключ у рядку конфігурації попереднього перегляду

Question 5

З 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 ++

Question 6

У моєму випадку мені довелося виконати всі ці команди, щоб отримати сертифікат:

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

Question 7

Я працюю над реагуючим проектом, тепер хотів додати SSL-сертифікат до цього проекту та запустити свій веб-сайт за допомогою https.

Додайте 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
   }

Додавання загальнодоступного сертифіката 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
       }

Запустіть npm startкоманду на терміналі, або ви також можете використовуватиpm2 start npm -- start