Ngrok para Simplificar Demos y Debuggs

Ngrok – Túneles Seguros Hacia Localhost

En esta oportunidad voy a hablar de una herramienta que permite crear un túnel hacia nuestro localhost con un dominio http o https aleatorio a través del cual se puede acceder a un puerto específico de nuestro localhost.

En lo personal a esta herramienta le encontré 3 ventajas fundamentales permite ahorrar tiempo al realizar demos ya que no es necesario hacer un deploy en algún hosting, facilita mucho el debug desde dispositivos móviles ya que al acceder a través del dominio creado por la herramienta se puede probar y debuggear el código como si estuviéramos probando en un navegador directamente en la máquina de desarrollo y por último que la herramienta habilita una web local donde se guarda registro de todas las peticiones que recibe el servidor junto con la información que llega en los request y la que sale en los response.

En este post vamos a ver el funcionamiento básico de la función gratuita, de todas formas es una herramienta bastante completa que incluye opciones de pago las cuales analizare y probare en otro post.

Descargar Ngrok

https://ngrok.com/

Crear Túnel hacia el Localhost

Ngrok abre una consola al ejecutar el programa en la cual debemos incluir el siguiente código para crear el túnel.

ngrok http PUERTO

En caso de estar trabajando con IIS debemos utilizar el siguiente código.

ngrok http PUERTO -host-header="localhost:PUERTO"

Una vez ejecutado este Código se podrá ver algo similar a la siguiente captura de pantalla.

Creación de túnel Ngrok
Session Status: Indica el estado del túnel.

Versión: Indica el nro. de versión y en caso de haber una versión superior en la consola se mostrará un Comando a ejecutar para actualizar.

Región: La ubicación del servidor donde se van a recibir las peticiones a través del túnel, esto es importante si se vive muy lejos de la ubicación del localhost ya que se puede producir un efecto de latencia sobre las peticiones que realizamos al servidor web.

Web Interface: La dirección local de la página web creada por ngrok para analizar las peticiones HTTP realizadas a través del túnel.

Fowarding: Son los dominios HTTP y HTTPS que deberá utilizar el cliente para acceder al localhost.

Http Request: Es una lista que se va cargando sola con los últimos 10 request recibidos por el servidor.

Cerrar el Túnel

Una vez finalizado el trabajo solo será necesario hacer en Ctrl + C en la consola y el túnel se cerrará definitivamente.

Ngrok – Inspector

Esta página se instala en localhost y nos permite analizar los request recibidos por el servidor web. La ventaja más importante para mí se da al momento de tratar de detectar un bug ya que simplemente tengo que reproducirlo en el browser y después analizar que información le llego al servidor.

En la siguiente captura de pantalla se puede ver un ejemplo sobre un proyecto que estoy trabajando actualmente. En la pantalla se puede analizar el Response obtenido al ejecutar una petición GET sobre /Home/GetAllBrands. Otra información interesante es el tiempo de respuesta de cada petición eso puede ayudar a trabajar temas de performance.

Ngrok Inspector

Ngrok tiene muchas opciones más pero a nivel práctico para cualquier desarrollador las características explicadas son por demás útiles e interesantes.

Por cualquier comentario o consulta por favor hacerlo a través del formulario de contacto.

Gracias.