Comment puis-je fournir un certificat SSL avec create-réagir-app?


Je suis en train d'accueillir un réagir application que j'ai créé et testé localement à l'aide de l'facebook passe-partout.

Le client app interagit avec une API que j'ai faite à l'aide de node.js et avec qui je n'avais aucun problème de configuration d'une connexion sécurisée (avec un node.js client envoi de mon certificat SSL, pour les tests).

Cependant, je rencontre des difficultés lors de l'utilisation de réagir à envoyer mon certificat SSL au lieu d'une auto-signé une qui me fait rencontrer cette erreur à l'aide de chrome et d'essayer d'accéder à https://example.net:3000 :

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

La documentation n'a pas assez de m'aider:

Noter que le serveur utilise un certificat auto-signé, de sorte que votre navigateur web sera presque certainement afficher 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 sur mon domaine et fonctionne comme un charme) à la place de cette auto-signé un ? Ai-je raté quelque chose ?

InformationsquelleAutor Montasar Jarraya | 2016-12-16
  1. 7

    Votre serveur qui sert de fichiers à partir de ce port doit être configuré pour l'utilisation de votre certificat SSL. J'imagine que vous l'utilisez webpack-dev-serveur sur ce port (c'est ce que npm start n'en créez-réagir-app), et peut-être un autre serveur (apache, nginx, etc) sur le port 80?

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

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

    Si vous voulez faire cela à l'aide de mnp début, ce qui appelle une custom script de démarrage, vous devrez éditer le script de démarrage. Vous devrez peut-être utiliser le eject première commande, qui exporte tous les config de code dans votre repo afin que vous pouvez le modifier.

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

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

    Amusez-vous!

    • Épargnant de vie! Je vous remercie beaucoup. J'ai configuré webpack-dev-serveur après l'exécution d'éjection et il fonctionne parfaitement.
    • Heureux j'ai pu l'aider! 🙂
    • peut-être que vous pouvez publier votre propre solution étape par étape pour les débutants?
    • Veuillez noter que vous n'avez pas absolument besoin d'éjection pour ce faire, si vous utilisez react-app-rewired—voir github.com/timarney/react-app-rewired. J'ai trouvé que, pour obtenir que cela fonctionne, j'ai encore besoin de définir la variable d'environnement HTTPS pour true
    • C'est génial, @NatKuhn. Je n'étais pas au courant de cette option.
    InformationsquelleAutor Alex K
  2. 20

    Éjection create-react-app n'est pas recommandée, car vous ne pourrez facilement le mettre à jour. En outre, vous pouvez facilement avoir certificat SSL valide sans éjecter.

    Vous aurez besoin de la copie de votre certificat de node_modules/webpack-dev-server/ssl/server.pem. L'inconvénient est que vous devez copier manuellement le fichier. Cependant, une façon de faire ce fluide est d'ajouter un postinstall script qui crée un lien symbolique.
    Voici une script 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 à quelque chose comme:

    "scripts": {
    ...
    "postinstall": "sh ./scripts/link-certificate.sh"
}
    • Ma solution est basée sur cette fil
    • Si je comprends bien, on pourrait se déplacer les trois fichiers à la node_modules/webpack-dev-server/ssl/ dir, puis d'exécuter npm run build && serve -s build. OU, npm run postinstall && npm run build && serve -s build ... est-ce exact?
    • Pas exactement. Vous devez créer un dossier dans la racine de votre application (frère de node_modules) qui contient votre server.pem et le fichier de script. Ensuite, vous ajoutez les postinstall script à votre package.json. Le script s'exécute automatiquement après chaque npm install, donc pas besoin de changer votre flux de travail. HTH.
    • Dois-je ajouter ./local-certificate à .gitignore?
    • Vous ne veulent généralement pas à commettre des certificats de Git, donc oui.
    InformationsquelleAutor Elad
  3. 14

    De s'étendre sur les Elad réponse:

      1. Créer un certificat auto-signé en suivant les instructions liées à de https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https
      1. Enregistrer le fichier pem (contenant à la fois le certificat et la clé privée) quelque part dans votre projet (par exemple /cert/server.pem)
      1. Modifier votre forfait.json scripts: 
        "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",
    • J'ai fini par utiliser devcert-cli (j'ai juste vu mkcert aujourd'hui, ce qui semble aussi bon) pour générer un certificat signé pour localhost dans ./cert. Je puis ajouter l' prestart script pour mon colis.json: cp -f ./cert/server.pem ./node_modules/webpack-dev-server/ssl. L'avantage de l'utilisation de devcert est que vous obtenez un certificat signé vs auto-signé et de de sorte que vous ne verrez pas les avertissements ou des erreurs dans Chrome.
    • Ce qui se passe si nous avons également besoin d'ajouter une clé et un mot de passe?
    • Remarque la clé à l'étape 2 ci-dessus est de concaténer le certificat et la clé privée dans un fichier unique. Dans le cas d'un LetsEncrypt certificat que nous avons fait, c'est privkey.pem + fullchain.pem.
    • Si j'ai un cert.pem et de la clé.mep, comment puis-je créer le serveur.pem?
    InformationsquelleAutor senornestor
  4. 0

    C'est ce que j'ai fait:

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

    Puis je double clic et importés: rootCA.pem et server.pem

    Puis j'ai modifié package.json:

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

    De très importantes sources:

    InformationsquelleAutor w35l3y