A continuación, describiremos cómo configurar HTTPS con create-react-app con un certificado SSL propio.
Es importante tener en cuenta que la ejecución de HTTPS en el desarrollo es útil cuando necesita consumir una API que de la misma forma atiende solicitudes a través de HTTPS.
En esta pequeña guía para usuarios de macOS se requiere que haya un brew instalado.
Agregar HTTPS
En tu package.json, debes de actualizar 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”
},
Después debes ejecutar yarn start por lo que te mostrará esta pantalla en su navegador:
En esta fase, ya estás listo para seguir https. Pero debes de tener en cuenta que no tienes un certificado válido, por lo que se supone que su conexión es insegura.
Crear un certificado SSL
Una de las maneras más prácticas 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 -install
Después de ejecutar los comandos anteriores, habrás creado una autoridad certificada que es una entidad que emite certificados digitales en tu máquina, lo que te ayudará para todos sus proyectos futuros.
Desde la raíz de tu proyecto create-react-app ahora debes 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”
Te recomendamos alamcenar los certificados generados en el directorio .cert. Debes recordar que no deben comprometerse con el control de versiones, por lo que debes actualizar .gitignore para incluirlo en el directorio .cert
A continuación, debes actualizar el startscript nuevamente para incluir el 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 start vuelva a ejecutar, deberás ver que tu conexión es segura de la siguiente manera:
Leíste: Cómo configurar HTTPS con create-react-app, te recomendamos: Cómo crear y publicar biblioteca de componentes Vue
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode
