Как настроить HTTPS локально для react-app (https://localhost)

Использование HTTPS в разработке полезно, когда вам нужно использовать API, который также обслуживает запросы через HTTPS.

Мы настроем HTTPS для нашего приложения create-response-app с нашим собственным сертификатом SSL.

Добавление HTTPS

В вашем package.json обновите стартовый скрипт, включив https:

"scripts": {
    "start": "HTTPS=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Запуск yarn startпосле этого шага покажет вам этот экран в вашем браузере что сертификат не валидный.
На этом этапе вы уже готовы к работе https. Но у вас нет действующего сертификата, поэтому предполагается, что ваше соединение небезопасно.

Создание сертификата SSL

Самый простой способ получить сертификат — через mkcert

# установка mkcert для MacOs
brew install mkcert

# установка mkcert для Windows
choco install mkcert

После выполнения вышеуказанных команд вы создадите центр сертификации на своем компьютере, который позволит вам создавать сертификаты для всех ваших будущих проектов.

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

# создаем каталог 
mkdir -p .cert

# создаем сертификат для localhost
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

Мы будем хранить наши сгенерированные сертификаты в .cert каталоге. Они не должны быть связаны с контролем версий, поэтому вам следует обновить свой, .gitignore чтобы включить .certкаталог.

Затем нам нужно снова обновить startскрипт, чтобы включить наш недавно созданный сертификат:

"scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

При yarn start повторном запуске вы должны увидеть, что ваше соединение защищено и сертификат валидный.