Sådan konfigureres HTTPS lokalt med create-react-app

At køre HTTPS under udvikling er nyttigt, når du har brug for at bruge en API, der også serverer anmodninger via HTTPS.

I denne artikel opretter vi HTTPS under udvikling til vores create-react-app med vores eget SSL-certifikat.

Denne vejledning er til macOS-brugere og kræver, at du har brewinstalleret.

Tilføjelse af HTTPS

I dit package.json, opdatere starten script til at omfatte https:

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

Kørsel yarn startefter dette trin viser dig dette skærmbillede i din browser:

På dette tidspunkt er du allerede klar til at gå med https. Men du har ikke et gyldigt certifikat, så din forbindelse antages at være usikker.

Oprettelse af et SSL-certifikat

Den nemmeste måde at få et certifikat på er via 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

Efter at have kørt ovenstående kommandoer har du oprettet en certifikatmyndighed på din maskine, der giver dig mulighed for at generere certifikater til alle dine fremtidige projekter.

Fra roden til dit create-react-appprojekt skal du nu køre:

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

Vi gemmer vores genererede certifikater i .certbiblioteket. Disse bør ikke være forpligtet til versionskontrol, så du bør opdatere din, .gitignoreså den inkluderer .certbiblioteket.

Derefter skal vi opdatere startscriptet igen for at inkludere vores nyoprettede 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" },

Når du løber yarn startigen, skal du nu se, at din forbindelse er sikker.

Vær ikke en fremmed! Du er velkommen til at skrive, hvis du har spørgsmål - kontakt mig på LinkedIn eller følg mig på Twitter.