¿Cómo puedo proporcionar un certificado SSL con create-react-app?

Contamos con tu apoyo para difundir nuestras secciones sobre las ciencias informáticas.

Solución:

Actualización: vea la respuesta de Andi a continuación. En la versión reciente, debe establecer la variable de entorno para configurar el certificado

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

---

expulsar create-react-app no se recomienda ya que no podrá actualizarlo sin problemas. Además, puede tener fácilmente un certificado SSL válido sin expulsarlo.
Deberá copiar su certificado a node_modules/webpack-dev-server/ssl/server.pem. La desventaja es que necesita copiar manualmente el archivo. Sin embargo, una forma de hacer que esto sea perfecto es agregar un postinstall script que crea un enlace simbólico. Aquí hay un script que creé:

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

Su package.json debería verse algo como:

"scripts": 
    ...
    "postinstall": "sh ./scripts/link-certificate.sh"

• Mi solución se basa en este hilo.

Pude hacer funcionar un certificado local sin modificando el webpack-dev-server archivos usando react-scripts3.4.1 (técnicamente añadido en 3.4.0 pero tuve algunos problemas, probablemente no relacionados). Agregué estas dos variables de entorno a mi .env.development:

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

Notas:

• .cert es una carpeta que creé en la raíz de mi proyecto
• Mi script que genera el certificado SSL
• Documentación oficial sobre estas dos variables de entorno

Para ampliar la respuesta de Elad:

• 1. Cree un certificado autofirmado siguiendo las instrucciones vinculadas desde https://github.com/webpack/webpack-dev-server/tree/master/examples/cli/https
• 2. Guarde el archivo pem (que contiene tanto el certificado como el privado). key) en algún lugar de su proyecto (por ejemplo, /cert/server.pem)
• 3. Modifique sus scripts de 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",
     

Reseñas y valoraciones

Puedes añadir valor a nuestro contenido dando tu experiencia en las interpretaciones.

---

---

Utiliza Nuestro Buscador