Ejecutar HTTPS en desarrollo es útil cuando necesita consumir una API que también atiende solicitudes a través de HTTPS.
En este artículo, configuraremos HTTPS en desarrollo para nuestra aplicación create-react-app con nuestro propio certificado SSL.
Esta guía es para usuarios de macOS y requiere que la hayas brewinstalado.
Agregar HTTPS
En su package.json, actualice el script de inicio para incluir https:
"scripts": { "start": "HTTPS=true react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },Ejecutar yarn startdespués de este paso le mostrará esta pantalla en su navegador:
En esta etapa, ya está listo para comenzar https. Pero no tiene un certificado válido, por lo que se supone que su conexión no es segura.
Crear un certificado SSL
La forma más sencilla de obtener un certificado es a través de 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 -installDespués de ejecutar los comandos anteriores, habrá creado una autoridad de certificación en su máquina que le permitirá generar certificados para todos sus proyectos futuros.
Desde la raíz de su create-react-appproyecto, ahora debe ejecutar:
# 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"Almacenaremos nuestros certificados generados en el .certdirectorio. Estos no deben estar comprometidos con el control de versiones, por lo que debe actualizar su .gitignorepara incluir el .certdirectorio.
A continuación, necesitamos actualizar el startscript nuevamente para incluir nuestro certificado recién creado:
"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" },Cuando yarn startvuelva a ejecutar , debería ver que su conexión es segura.
¡No seas un extraño! No dude en escribirnos si tiene alguna pregunta: conéctese conmigo en Linkedin o síganme en Twitter.