Используйте HTTPS с сервером разработки webpack

Бывают случаи, когда вам нужно использовать HTTPS локально при разработке с помощью webpack. Например, вы можете разрабатывать расширение для Chrome, используя сервер разработки webpack для горячей перезагрузки при внесении изменений. Проблема заключается в том, что ваши сценарии контента не будут загружаться на HTTPS-сайты, и вы получите сообщение об ошибке, похожее на приведенный ниже фрагмент кода.

Webpack-Dev-Server constructs improper SockJS: "An insecure SockJS connection may not be initiated from a page loaded over HTTPS"

Решение состоит в том, чтобы создать локальный центр сертификации (ЦС) в корне вашей системы. Вы можете использовать mkcert для создания ЦС, как показано ниже.

Установите mkcert на macOS с помощью Homebrew

Для других операционных систем ознакомьтесь с руководством по установке mkcert здесь.

brew install mkcert

Запустите команду mkcert, чтобы создать новый локальный ЦС.

mkcert -install

Запустите приведенную ниже команду, чтобы сгенерировать сертификат для хоста, который вы используете локально, например, localhost.

mkcert localhost 127.0.0.1

Команда выведет имя файлов, сгенерированных в терминале. Ниже приведен пример такого вывода

The certificate is at "./example.com+5.pem" and the key at "./example.com+5-key.pem" ✅

Обновить конфиг вебпака

Затем вы должны вернуться на свой сервер разработки веб-пакетов и добавить следующую конфигурацию для использования сгенерированных файлов.

https: {
      key: readFileSync('path-to-/+1-key.pem')),
      cert: readFileSync('path-to/+1.pem>')),
      ca: readFileSync('path-to/rootCA.pem')),
    }

Вы можете найти путь к вашему rootCA.pem файлу, выполнив команду ниже

mkcert -CAROOT

Приложение в браузере

После внесения всех изменений запустите сервер разработки webpack, перейдите в браузер и откройте свой локальный хост, и вы убедитесь, что сайт будет безопасным, как показано ниже.

Надеюсь, вам понравилось читать эту статью!