Español
  • https
  • tls
  • nginx
  • express
  • proxy

Cómo manejar el desarrollo local con HTTPS

Explora cómo implementar HTTPS local en tu flujo de trabajo de desarrollo con herramientas como Mkcert y guías paso a paso para Express.js y Next.js.

Sijie
Sijie
Developer

Al desarrollar aplicaciones web, escenarios específicos requieren HTTPS, incluso en un entorno local. Ya sea que estés integrando con APIs seguras de terceros, probando características exclusivas de HTTPS como service workers y HTTP/2, o replicando condiciones de producción para asegurar una implementación sin problemas, HTTPS se vuelve crucial. Además, ciertas APIs de navegador, como geolocalización, notificaciones push y gestión de credenciales, requieren un contexto seguro para operar eficazmente.

Por ejemplo, Logto OSS requiere HTTPS por defecto excepto localhost, en tales casos, aprender a configurar HTTPS para el desarrollo local puede ahorrarte tiempo. Este artículo te guiará en la configuración de HTTPS para el desarrollo local, introduciendo herramientas como Mkcert para simplificar el proceso.

El papel de localhost y las funciones exclusivas de HTTPS

localhost es un dominio especial que puede manejar muchas funcionalidades exclusivas de HTTPS como service workers, cookies seguras, HTTP/2 y otras APIs de navegador pueden funcionar bien en http://localhost:xxxx, así que puede que no siempre necesites HTTPS local, ¡prueba primero con localhost!

Prueba túneles de Cloudflare

Previamente introducido en este artículo, los túneles de Cloudflare pueden exponer fácilmente tu servicio local a Internet con HTTPS listo.

Configuración de HTTPS local

¿Las 2 opciones no pueden resolver tu problema? Entonces configuremos HTTPS local. En los siguientes pasos, asumimos que el nombre de dominio local es example.com.

Paso 1: actualiza el archivo hosts

Antes de comenzar, asegúrate de que el dominio objetivo se resuelva hacia tu máquina local, esto se puede hacer actualizando el archivo hosts. Abre /etc/hosts en Linux/macOS o C:\Windows\System32\drivers\etc\hosts en Windows, y añade las siguientes líneas:

Paso 2: genera certificados

Lo primero sobre HTTPS es una certificación. En producción, esto se puede hacer con herramientas como "Let's encrypt" o comprar certificados de tus proveedores de servicios. Pero en desarrollo local, podemos generar certificados directamente.

Mkcert es una herramienta simple de cero configuración para crear certificados de desarrollo localmente confiables con cualquier nombre que desees.

Primero, sigue la guía oficial para instalar mkcert, suponiendo que estás usando macOS:

Para Windows y Linux, consulta este enlace.

Ahora con mkcert listo para usar, ejecuta este comando para generar un CA local y almacenar el certificado raíz en tu almacén de confianza del sistema. Para aprender más sobre "CA" y certificados, consulta la documentación de Cloudflare.

Luego, genera un certificado SSL local

Esto crea los archivos example.com.pem y example.com-key.pem en tu directorio.

Paso 3: configurar HTTPS en tu aplicación

Con los archivos de certificados listos, ahora puedes habilitar HTTPS en tu aplicación. A diferencia del entorno de producción donde un proxy inverso como Nginx maneja el HTTPS, en desarrollo local, podemos configurar directamente en las aplicaciones web. Tomemos Express como ejemplo.

Crea un servidor simple de Express con el siguiente código:

Ejecuta la aplicación, y visita https://example.com para ver tu aplicación Express segura en acción.

Habilitar HTTPS para Logto OSS

Logto OSS requiere HTTPS por defecto, excepto para localhost, si deseas ejecutar Logto localmente con otro dominio, necesitarás configurar HTTPS local.

  1. Configura Logto: Sigue el enlace para configurar Logto en tu máquina local: https://docs.logto.io/docs/get-started/.
  2. Prepara certificados: Usa mkcert para generar dos archivos .pem y colócalos en un directorio.
  3. Configura variables de entorno: Proporciona HTTPS_CERT_PATH y HTTPS_KEY_PATH para habilitar HTTPS a través de Node, consulta este enlace para aprender más.

Resumen

Configurar HTTPS para el desarrollo local no es tan complicado como podría parecer. Con la ayuda de herramientas como Mkcert, generar certificados locales confiables se convierte en un proceso rápido y fácil. Aunque localhostNegrita a menudo maneja muchas características exclusivas de HTTPS, hay momentos en que necesitas soporte completo de HTTPS, y esta guía te ayuda a llegar allí. Ya sea que estés probando APIs, trabajando con Logto OSS, o simplemente replicando condiciones de producción, seguir estos pasos te asegurará que estás listo para un desarrollo seguro y sin problemas.