Depuración local sin dolor: logrando HTTPS y nombre de host personalizado con Cloudflare Tunnel

En nuestro desarrollo diario, a menudo usamos http://localhost para acceder y depurar nuestras aplicaciones, lo cual es suficiente en la mayoría de los casos. Sin embargo, en situaciones como las siguientes, podemos necesitar usar HTTPS y un nombre de host personalizado para depurar nuestras aplicaciones:

• Cuando tu aplicación utiliza una API que requiere HTTPS (como el Web Crypto API u otras bibliotecas de terceros que requieren HTTPS)
• Cuando un servicio de terceros que deseas integrar requiere que proporciones una interfaz de API accesible globalmente basada en HTTPS, y necesitas depurar esta interfaz

Hay muchas soluciones para estos problemas en el mercado, pero la mayoría son complejas y propensas a errores. Aquí, me gustaría introducir cómo usar Cloudflare Tunnel para usar rápidamente HTTPS y un nombre de host personalizado para el desarrollo local.

¿Qué es Cloudflare Tunnel?#

Cloudflare Tunnel es un servicio proporcionado por Cloudflare que te permite conectar de forma segura tu infraestructura a la red de Cloudflare. Básicamente, crea una conexión segura y eficiente entre tus servidores y la red global de Cloudflare, asegurando que tu tráfico web esté protegido y optimizado.

Al usar Cloudflare Tunnel, puedes conectar fácilmente tu máquina de desarrollo local a la red global de Cloudflared. Después de eso, puedes alojar tu dominio en Cloudflare y reenviar solicitudes para el dominio a tu máquina local a través del Cloudflare Tunnel.

Prerrequisitos#

Antes de comenzar, asegúrate de que:

• Ya posees un nombre de dominio y has desactivado DNSSEC en tu registrador (donde compraste tu nombre de dominio).
• Anteriormente has creado una cuenta de Cloudflare.

Nota: En este tutorial, por fines de demostración, asumimos que estamos usando demo.com como nuestro dominio.

Agregar un sitio web a Cloudflare#

Primero, necesitas iniciar sesión en el panel de control de Cloudflare usando tu cuenta de Cloudflare y seleccionar la opción "Sitio web" desde el menú de la izquierda. Luego, haz clic en el botón "Comenzar" en la página (si ya hay un registro, haz clic en "Agregar sitio web"). Sigue las indicaciones para completar la adición del sitio web usando el dominio que posees. Después de agregar exitosamente el sitio web, verás el siguiente contenido:

Como se muestra en la figura, el sitio web agregado aún no ha sido activado. Necesitas seguir la guía en la página para iniciar sesión en tu registrador de dominio y actualizar los servidores de nombres del dominio para activar tu sitio web.

Tomando como ejemplo el dominio en Godaddy:

Ingresa a la página de Configuración de Dominio, accede a la opción “Servidores de nombres” bajo la pestaña DNS, y cambia los servidores de nombres a los valores mostrados en la guía:

Después de cambiar, espera un breve período de tiempo y el sitio web correspondiente en Cloudflare será activado:

Después de haber configurado estos contenidos, tu dominio será alojado en Cloudflare, y Cloudflare habilitará automáticamente HTTPS para el dominio.

Crear túnel#

Regresa a la página principal del Panel de Control de Cloudflare, haz clic en "Zero Trust" en el menú de la izquierda y selecciona "Tunnels" en el directorio 'Access'. Luego, haz clic en "Agregar un túnel" en la página, e ingresa cualquier nombre de túnel (por ejemplo, my-dev-tunnel). Según las indicaciones de la página, conecta tu máquina de desarrollo local al túnel de Cloudflare.

Tomando MacOS como ejemplo, abre una terminal y ejecuta el comando mostrado en la página:

Si tu máquina ya ha instalado "cloudflared" previamente, no necesitas ejecutar brew install cloudflare/cloudflare/cloudflared.

Después de eso, ejecuta cloudflared tunnel list en tu terminal, y verás que tu máquina ya está conectada al túnel:

Enrutar tráfico al túnel creado#

Después de crear el Túnel, configuraremos las reglas de ruta para el Túnel.

Supón que nuestra aplicación local está ejecutándose en el puerto http://localhost:3000, y queremos redirigir todas las solicitudes de https://dev.demo.com al puerto donde la aplicación local está ejecutándose.

Primero, volvemos a nuestra página del túnel, encontramos el túnel que acabamos de crear, hacemos clic en el botón de tres puntos a la derecha y seleccionamos "Configurar".

Llena la configuración relevante según nuestros requisitos:

Esta configuración enruta la dirección dev.demo.com a http://localhost:3000 en nuestra máquina. Luego haz clic en "Guardar nombre de host".

Después de una breve espera, accede a https://dev.demo.com, y verás la aplicación ejecutándose en nuestra máquina local:

Resumen#

A través de este tutorial, ahora deberías poder implementar fácilmente HTTPS y un nombre de host personalizado en tu entorno de desarrollo local sin tener que preocuparte por configuraciones complejas y errores. ¡Espero que puedas beneficiarte de este tutorial!