Руководство по построению локального https-сервиса

JavaScript
Руководство по построению локального https-сервиса

1. Предпосылки

Chromeобновитесь доВерсия 80 и вышеисходное значение по умолчаниюSameSite=Noneпревратиться вSameSite=Lax(Другие браузеры, такие как Safari, Firefox и т. д., имеют аналогичные планы), что приводит к невозможности передачи межсайтовых файлов cookie, что приводит к таким проблемам, как сбои входа в систему. Общее решение состоит в том, чтобы настроить файлы cookie для всех доменных имен, участвующих в развитии бизнеса, на «SameSite=None;Secure;", но программаПредпосылки требуют, чтобы протокол доступа был httpsТем не менее, большая часть текущей локальной разработки внешнего интерфейса — это http, поэтому запрос по-прежнему не может содержать файлы cookie, поэтому локальную службу http необходимо обновить до https.

оsamesiteБольше вводных можно найти вСтатья учителя Руана

2. Общий план

2.1 На основе сервера webpack-dev

Если ваш местный сервис черезwebpack-dev-serverвключенный,webpack-dev-serverПоддержка открытой службы https, она предоставляет два метода настройки:

метод первый

devServer: {
    https: true
}

В этой настройке используется самозаверяющий сертификат, поэтому передайте, например.http://h5.dev.weidian.com:9003/pages/index.htmlПри доступе к такому адресу разработки в браузере появится сообщение об угрозе безопасности, и вам необходимо активно доверять ему, прежде чем вы сможете получить к нему доступ (активно игнорируйте риск, хотя служба https может быть включена, в отдельных сценариях могут быть исключения). .

Способ 2

devServer: {
    https: {
        key: fs.readFileSync('/path/to/server.key'),
        cert: fs.readFileSync('/path/to/server.crt'),
        ca: fs.readFileSync('/path/to/ca.pem'),
    }
}

Этот параметр требует, чтобы разработчик предоставил сертификат. Если разработчик предоставит сертификат для соответствующего доменного имени, в браузере не будет предупреждения об угрозе безопасности при доступе к доменному имени через https.

2.2 Генерация сертификатов и ключей

Если принят второй метод, сертификат и ключ должны быть предоставлены.Традиционная схема генерации сертификата (такая как OpenSSL) требует различных конфигураций команд, что является относительно громоздким.Поэтому здесь представлена ​​относительно простая и удобная схема генерации сертификата. шаги следующие:

Создать сертификат на основеmkcertЭтот инструмент, соответствующие подробности можно найти в официальном руководстве

Шаг 1: Установитеmkcert 

brew install mkcert // On macOS, use Homebrew

Шаг 2: Создайте корневой сертификат

mkcert -install

Шаг 3: Создайте новую папку локально и войдите в каталог (для хранения сертификатов)

mkdir ca
cd ca

Ставить его в проект тоже не обязательно, общее решение - положить на диск, например в каталог пользователя (/User)

Шаг 4: Создайте локальный сертификат, соответствующий требуемому доменному имени, напримерhttp://h5.dev.weidian.com 

mkcert h5.dev.weidian.com

После выполнения команды в этом файле будет генерироватьсяh5.dev.weidian.com-key.pem(закрытый ключ) иh5.dev.weidian.com.pem(сертификат) два файла, т.е.webpack-dev-serverНастройте необходимые файлы.

Шаг 5: Откройте свой собственный проект, скопируйте файлы, созданные на шаге 4, в проект, а затем измените конфигурацию веб-пакета.

devServer: {
    https: {
        key: fs.readFileSync('./cat/h5.dev.weidian.com-key.pem'),
        cert: fs.readFileSync('./cat/h5.dev.weidian.com.pem')
    }
}

Перезапустите проект и откройте адрес разработки.Результаты следующие:

2.3 Библиотека, автоматически генерирующая сертификаты и ключи

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

<!--webpack.config.js-->

async webpackConfig(){
    let ssl = await devcert.certificateFor("h5.dev.weidian.com", { getCaPath: true });

    <!--key和cert分别就是开启Https服务的证书和秘钥-->
    const { key, cert } = ssl;
    
    return {
        "dev-server":{
            https: {
                key, cert;
            }
        }
    }
}

module.exports = webpackConfig()

3. Резюме

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

Ссылки по теме

webpack https

Выпуск локальных сертификатов

Категории