
Использование 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
повторном запуске вы должны увидеть, что ваше соединение защищено и сертификат валидный.