Comment configurer HTTPS localement avec create-react-app

L'exécution de HTTPS en développement est utile lorsque vous devez utiliser une API qui traite également des demandes via HTTPS.

Dans cet article, nous allons configurer HTTPS en développement pour notre application create-react-app avec notre propre certificat SSL.

Ce guide est destiné aux utilisateurs de macOS et nécessite que vous ayez brewinstallé.

Ajouter HTTPS

Dans votre package.json, mettez à jour le script de démarrage pour inclure https:

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

L'exécution yarn startaprès cette étape vous montrera cet écran dans votre navigateur:

À ce stade, vous êtes déjà prêt à partir https. Mais vous n'avez pas de certificat valide, donc votre connexion est supposée non sécurisée.

Créer un certificat SSL

Le moyen le plus simple d'obtenir un certificat est 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

Après avoir exécuté les commandes ci-dessus, vous aurez créé une autorité de certification sur votre machine qui vous permettra de générer des certificats pour tous vos futurs projets.

Depuis la racine de votre create-react-appprojet, vous devez maintenant exécuter:

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

Nous stockerons nos certificats générés dans le .certrépertoire. Ceux-ci ne doivent pas être validés pour le contrôle de version, vous devez donc mettre .gitignoreà jour votre pour inclure le .certrépertoire.

Ensuite, nous devons à nouveau mettre à jour le startscript pour inclure notre certificat nouvellement créé:

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

Lorsque vous exécutez à yarn startnouveau, vous devriez maintenant voir que votre connexion est sécurisée.

Ne soyez pas un étranger! N'hésitez pas à écrire si vous avez des questions - connectez-vous avec moi sur Linkedin ou suivez-moi sur Twitter.