HTTPS: n määrittäminen paikallisesti create-reagoi-sovelluksella

HTTPS: n suorittaminen kehityksessä on hyödyllistä, kun sinun on käytettävä sovellusliittymää, joka palvelee myös pyyntöjä HTTPS: n kautta.

Tässä artikkelissa aiomme asettaa HTTPS: n kehitettäväksi luomaan-reagoimaan -sovelluksellemme omalla SSL-varmenteellamme.

Tämä opas on tarkoitettu macOS-käyttäjille ja edellyttää, että olet brewasentanut.

Lisätään HTTPS

Teidän package.json, päivittää alku käsikirjoitus sisältää https:

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

Running yarn starttämän vaiheen jälkeen näyttää tämän näytön selaimessasi:

Tässä vaiheessa olet jo valmis menemään https. Mutta sinulla ei ole kelvollista varmentetta, joten yhteyden oletetaan olevan epävarma.

SSL-varmenteen luominen

Helpoin tapa saada todistus on kautta 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

Kun olet suorittanut yllä olevat komennot, olet luonut koneellesi varmenneviranomaisen , jonka avulla voit luoda sertifikaatteja kaikille tuleville projekteillesi.

create-react-appProjektin juuresta alkaen sinun pitäisi nyt suorittaa:

# 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"

Tallennamme luodut sertifikaatit .certhakemistoon. Näitä ei pitäisi sitoutua versionhallintaan, joten päivitä .gitignoretiedosto sisällyttämään .certhakemisto.

Seuraavaksi meidän on päivitettävä startkomentosarja uudelleen sisällyttämään äskettäin luotu varmenne:

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

Kun suoritat yarn startuudelleen, sinun pitäisi nyt nähdä, että yhteys on suojattu.

Älä ole muukalainen! Voit vapaasti kirjoittaa, jos sinulla on kysyttävää - ota yhteyttä minuun Linkedinissä tai seuraa minua Twitterissä.