Како локално подесити ХТТПС помоћу апликације цреате-респонсе-апп

Покретање ХТТПС-а у развоју је корисно када требате да користите АПИ који такође опслужује захтеве преко ХТТПС-а.

У овом чланку поставићемо ХТТПС у развоју за нашу апликацију цреате-респонсе-апп са сопственим ССЛ сертификатом.

Овај водич је за кориснике мацОС-а и захтева да га brewинсталирате.

Додавање ХТТПС-а

У свом package.json, ажурирајте почетну скрипту тако да укључује хттпс:

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

Покретање yarn startнакон овог корака приказаће вам овај екран у прегледачу:

У овој фази сте већ спремни https. Али немате важећу потврду, па се претпоставља да ваша веза није сигурна.

Креирање ССЛ сертификата

Сертификат је најлакше добити путем 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-react-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директоријум.

Даље, потребно је да 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поново покренете , сада бисте требали да видите да је ваша веза сигурна.

Не буди странац! Слободно пишите ако имате питања - повежите се са мном на Линкедину или ме пратите на Твиттер-у.