Используйте HTTPS для локальной разработки

В большинстве случаев http://localhost в целях разработки ведет себя как HTTPS. Однако в некоторых особых случаях , таких как пользовательские имена хостов или использование защищенных файлов cookie в браузерах, вам необходимо явно настроить сайт разработки на поведение HTTPS, чтобы точно представить, как ваш сайт работает в рабочей среде. (Если ваш рабочий веб-сайт не использует HTTPS, сделайте приоритетным переход на HTTPS ).

На этой странице объясняется, как запустить ваш сайт локально с помощью HTTPS.

Краткие инструкции см. в кратком справочнике mkcert .**

Запустите свой сайт локально по протоколу HTTPS, используя mkcert (рекомендуется).

Чтобы использовать HTTPS с вашим локальным сайтом разработки и получить доступ https://localhost или https://mysite.example (настраиваемое имя хоста), вам нужен сертификат TLS, подписанный объектом, которому доверяет ваше устройство и браузер, который называется доверенным центром сертификации (CA). ) . Браузер проверяет, подписан ли сертификат вашего сервера разработки доверенным центром сертификации, прежде чем создавать соединение HTTPS.

Мы рекомендуем использовать mkcert , кросс-платформенный центр сертификации, для создания и подписи сертификата. Другие полезные параметры см. в разделе Запуск сайта локально с помощью HTTPS: другие параметры .

Многие операционные системы включают библиотеки для создания сертификатов, например openssl . Однако они более сложны и менее надежны, чем mkcert, и не обязательно являются кроссплатформенными, что делает их менее доступными для более крупных команд разработчиков.

Настраивать

1. Установите mkcert (только один раз).

   Следуйте инструкциям по установке mkcert в вашей операционной системе. Например, в macOS:

   brew install mkcert
   brew install nss # if you use Firefox
   

2. Добавьте mkcert в свои локальные корневые центры сертификации.

   В терминале выполните следующую команду:

   mkcert -install
   

   При этом создается локальный центр сертификации (CA). Ваш локальный центр сертификации, созданный mkcert, пользуется доверием только локально , на вашем устройстве.

3. Создайте сертификат для вашего сайта, подписанный mkcert.

   В своем терминале перейдите в корневой каталог вашего сайта или в любой другой каталог, в котором вы хотите хранить свой сертификат.

   Затем запустите:

   mkcert localhost
   

   Если вы используете собственное имя хоста, например mysite.example , запустите:

   mkcert mysite.example
   

   Эта команда делает две вещи:

   • Создает сертификат для указанного вами имени хоста.
   • Позволяет mkcert подписать сертификат.

   Теперь ваш сертификат готов и подписан центром сертификации, которому локально доверяет ваш браузер.

4. Настройте свой сервер на использование HTTPS только что созданного сертификата TLS.

   Подробности того, как это сделать, зависят от вашего сервера. Далее следует несколько примеров:

   👩🏻‍💻 С узлом:

   server.js (замените {PATH/TO/CERTIFICATE...} и {PORT} ):

   const https = require('https');
   const fs = require('fs');
   const options = {
     key: fs.readFileSync('{PATH/TO/CERTIFICATE-KEY-FILENAME}.pem'),
     cert: fs.readFileSync('{PATH/TO/CERTIFICATE-FILENAME}.pem'),
   };
   https
     .createServer(options, function (req, res) {
       // server code
     })
     .listen({PORT});
   

   👩🏻‍💻 С http-сервером :

   Запустите свой сервер следующим образом (замените {PATH/TO/CERTIFICATE...} ):

   http-server -S -C {PATH/TO/CERTIFICATE-FILENAME}.pem -K {PATH/TO/CERTIFICATE-KEY-FILENAME}.pem
   

   -S запускает ваш сервер с использованием HTTPS, тогда как -C устанавливает сертификат, а -K устанавливает ключ.

   👩🏻‍💻 С сервером разработки React:

   Отредактируйте свой package.json следующим образом и замените {PATH/TO/CERTIFICATE...} :

   "scripts": {
   "start": "HTTPS=true SSL_CRT_FILE={PATH/TO/CERTIFICATE-FILENAME}.pem SSL_KEY_FILE={PATH/TO/CERTIFICATE-KEY-FILENAME}.pem react-scripts start"
   

   Например, если вы создали сертификат для localhost в корневом каталоге вашего сайта:

   |-- my-react-app
       |-- package.json
       |-- localhost.pem
       |-- localhost-key.pem
       |--...
   

   Тогда ваш start скрипт должен выглядеть так:

   "scripts": {
       "start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start"
   

   👩🏻‍💻 Другие примеры:

   • Сервер разработки Angular
   • Питон

5. Откройте https://localhost или https://mysite.example в своем браузере, чтобы еще раз убедиться, что ваш сайт работает локально с использованием HTTPS. Вы не увидите никаких предупреждений браузера, поскольку ваш браузер доверяет mkcert как локальному центру сертификации.

краткий справочник по mkcert