Kako lokalno postaviti HTTPS pomoću aplikacije create-response-app

Pokretanje HTTPS-a u razvoju korisno je kada trebate konzumirati API koji također poslužuje zahtjeve putem HTTPS-a.

U ovom ćemo članku postavljati HTTPS u razvoju za našu aplikaciju za stvaranje-reagiranje s vlastitim SSL certifikatom.

Ovaj vodič je za korisnike macOS-a i zahtijeva da ga brewinstalirate.

Dodavanje HTTPS-a

U svom package.jsonažurirajte početnu skriptu tako da uključuje https:

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

Izvođenje yarn startnakon ovog koraka prikazat će vam ovaj zaslon u pregledniku:

U ovoj ste fazi već spremni https. Ali nemate valjanu potvrdu, pa se pretpostavlja da vaša veza nije sigurna.

Izrada SSL certifikata

Potvrdu je najlakše dobiti putem 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

Nakon pokretanja gornjih naredbi, stvorit ćete ovlaštenje za izdavanje certifikata na vašem stroju koje vam omogućuje generiranje certifikata za sve vaše buduće projekte.

Od korijena vašeg create-react-appprojekta, sada biste trebali pokrenuti:

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

Pohranit ćemo generirane certifikate u .certdirektorij. Oni ne bi trebali biti posvećeni kontroli verzija, pa biste ih trebali ažurirati tako .gitignoreda uključuju .certdirektorij.

Dalje, startskriptu moramo ponovo ažurirati kako bismo uključili naš novostvoreni certifikat:

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

Kad yarn startponovno pokrenete , sada biste trebali vidjeti je li vaša veza sigurna.

Ne budi stranac! Slobodno pišite ako imate pitanja - povežite se sa mnom na Linkedinu ili me slijedite na Twitteru.