web-dev-qa-db-fra.com

Comment puis-je fournir un certificat SSL avec create-react-app?


J'essaie d'héberger une application React que j'ai créée et testée localement à l'aide de la plateforme Facebook.
L'application cliente interagit avec une API que j'ai créée à l'aide de node.js, et avec laquelle je n'ai eu aucun problème à configurer une connexion sécurisée (avec un client node.js envoyant mon certificat SSL, pour test).
Cependant, je rencontre des difficultés en ce qui concerne l'utilisation de react pour envoyer mon certificat SSL au lieu d'un certificat auto-signé qui me fait rencontrer cette erreur en utilisant chrome et en essayant de accès à https://example.net:30 :

Votre connexion n'est pas privée (NET: ERR_CERT_AUTHORITY_INVALID)

La documentation ne m'a pas vraiment aidé:

Notez que le serveur utilisera un certificat auto-signé, de sorte que votre navigateur Web affichera presque définitivement un avertissement lors de l'accès à la page. https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development

Comment puis-je utiliser mon propre certificat SSL (que j'utilise déjà sur une autre application de mon domaine et qui fonctionne comme un charme) au lieu de celui-ci auto-signé? Ai-je oublié quelque chose ?

node.jsfacebookreactjssslhttps
17
Montasar

Éjection create-react-app n'est pas recommandé car vous ne pourrez pas le mettre à jour de manière transparente. De plus, vous pouvez facilement avoir un certificat SSL valide sans éjecter.
Vous devrez copier votre certificat dans node_modules/webpack-dev-server/ssl/server.pem. L'inconvénient est que vous devez copier manuellement le fichier. Cependant, une façon de rendre cela transparent est d'ajouter un script postinstall qui crée un lien symbolique. Voici un script que j'ai créé:

#!/bin/bash
# With create-react-app, a self signed (therefore invalid) certificate is generated.
# 1. Create some folder in the root of your project
# 2. Copy your valid development certificate to this folder
# 3. Copy this file to the same folder
# 4. In you package.json, under `scripts`, add `postinstall` script that runs this file.
# Every time a user runs npm install this script will make sure to copy the certificate to the 
# correct location

TARGET_LOCATION="./node_modules/webpack-dev-server/ssl/server.pem"
SOURCE_LOCATION=$(pwd)/$(dirname "./local-certificate/server.pem")/server.pem

echo Linking ${TARGET_LOCATION} TO ${SOURCE_LOCATION}
rm -f ${TARGET_LOCATION} || true
ln -s ${SOURCE_LOCATION} ${TARGET_LOCATION}
chmod 400 ${TARGET_LOCATION} # after 30 days create-react-app tries to generate a new certificate and overwrites the existing one. 
echo "Created server.pem symlink"

Votre package.json devrait ressembler à:

"scripts": {
    ...
    "postinstall": "sh ./scripts/link-certificate.sh"
}
  • Ma solution est basée sur cela thread
24
Elad

Pour développer la réponse d'Elad:

    1. Créez un certificat auto-signé en suivant les instructions liées à partir de https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https
    1. Enregistrez le fichier pem (contenant à la fois le certificat et la clé privée) quelque part dans votre projet (par exemple /cert/server.pem)
    1. Modifiez vos scripts package.json: 
      "start": "HTTPS=true react-scripts start",
"prestart": "rm ./node_modules/webpack-dev-server/ssl/server.pem && cp -f ./cert/server.pem ./node_modules/webpack-dev-server/ssl",
14
senornestor

Votre serveur qui sert des fichiers à partir de ce port doit être configuré pour utiliser votre certificat SSL. Je suppose que vous utilisez webpack-dev-server sur ce port (c'est ce que fait npm start Dans create-react-app), et peut-être un serveur différent (Apache, nginx, etc.) sur le port 80?

Vous pouvez soit servir vos fichiers compilés à l'aide de votre serveur déjà configuré, soit configurer webpack-dev-server pour utiliser votre certificat SSL.

Pour ce faire, vous pouvez utiliser l'option --cert De webpack-dev-server. Voir https://webpack.github.io/docs/webpack-dev-server.html

Si vous souhaitez le faire en utilisant npm start, qui appelle un script de démarrage personnalisé, vous devrez modifier ce script de démarrage. Vous devrez peut-être d'abord utiliser la commande eject, qui vide tout le code de configuration dans votre référentiel afin que vous puissiez le modifier.

Voici le code source du script de démarrage: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L2

Je dois également noter que webpack-dev-server n'est pas destiné à être utilisé dans un environnement de production.

S'amuser!

8
Alex K

C'est ce que j'ai fait:

bash <(wget -qO- https://Gist.github.com/w35l3y/5bb7fe8508d576472136f35428019177/raw/local-cert-generator.sh)

Ensuite, j'ai double-cliqué et importé: rootCA.pem et server.pem

Ensuite, j'ai modifié package.json:

"start": "HTTPS=true react-scripts start",
"prestart": "cp -f /path/to/server.pem ./node_modules/webpack-dev-server/ssl",

Sources très importantes:

1
w35l3y

J'ai pu faire fonctionner un certificat local sans modifier le webpack-dev-server fichiers utilisant react-scripts3.4.1 (techniquement ajouté dans 3.4.0 mais j'ai eu quelques problèmes, probablement sans rapport avec eux). J'ai ajouté ces deux variables d'environnement à mon .env.development:

SSL_CRT_FILE=.cert/server.crt
SSL_KEY_FILE=.cert/server.key

Remarques:

1
Andi