Рубрики
Без рубрики

Как настроить HTTPS Локально с созданием-реактивным приложением

Запуск HTTPS в разработке полезно, когда вам нужно потреблять API, который также обслуживает запросы через HTTPS. В этой статье мы будем создавать HTTPS в разработке для нашего приложения Create-React-App с нашим собственным сертификатом SSL. Это руководство для пользователей MacOS и требует, чтобы у вас есть

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

В этой статье мы будем создавать HTTPS в разработке для нашего приложения Create-React-App с нашим собственным сертификатом SSL.

Это руководство предназначено для пользователей MacOS и требует, чтобы у вас есть заваривать установлены.

Добавление HTTPS.

В вашем package.json обновите Начать Сценарий для включения HTTPS:

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

Бег Пряжа начать После того, как этот шаг покажет вам этот экран в вашем браузере:

На этом этапе вы уже собираетесь идти с HTTPS. . Но у вас нет действительного сертификата, поэтому ваше соединение предполагается неуверенным.

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

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

# Install mkcert tool
brew install mkcert

# Install nss (only needed if you use Firefox)
brew install nss

# Setup mkcert on your machine (creates a CA)
mkcert -install

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

От корня вашего Create-raction-app Проект, теперь вы должны запустить:

# Create .cert directory if it doesn't exist
mkdir -p .cert

# Generate the certificate (ran from the root of this project)
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

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

Далее нам нужно обновить Начать Сценарий снова включить наш недавно созданный сертификат:

  "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"
  },

Когда вы запустите Пряжа начать Опять же, вы должны увидеть, что ваше соединение безопасно.

Не будь незнакомцем! Не стесняйтесь писать, если у вас есть какие-либо вопросы – Связь со мной на linkedin или Следуй за мной в Twitter Отказ

Оригинал: “https://www.freecodecamp.org/news/how-to-set-up-https-locally-with-create-react-app/”

Читайте ещё по теме: