¿Como funciona Ngrok?

 Ngrok es una herramienta con la que hacer público tu localhost de forma fácil y rápida. ngrok nos permite exponer a internet una URL generada dinámicamente, la cual apunta a un servicio web que se está ejecutando en nuestra máquina local. Por ejemplo: si tenemos un servicio web arrancado en http://localhost:8080, ngrok genera dinámicamente una URL del tipo http://xxxxxx.ngrok.io visible en internet, y que apunta directamente a nuestro localhost. 

Además, lo mejor de todo es que solo hay que ejecutar un comando desde el terminal. ngrok también nos puede ayudar en otras situaciones, como, por ejemplo:

• Testing en dispositivos móviles: podremos probar nuestro sitio web en desarrollo desde cualquier dispositivo móvil o tablet de forma rápida y sencilla.
• Acceso ssh: podremos tener una forma pública de acceder a un dispositivo dentro de nuestra red privada de forma segura.
• Demos con cliente: poder mostrar al cliente el estado en el que se encuentra el desarrollo de una aplicación.

Está disponible para Linux, Mac y Windows, y tiene una documentación oficial bastante clara y completa: https://ngrok.com/docs

¿Como usar ngrok?

Lo primero que debemos hacer es crear una cuenta en ngrok.com, para lo cual solo necesitamos un email y una contraseña. El hecho de registrarnos nos proporciona un token que es el que nos permitirá generar de manera segura nuestros servicios y que no los pueda "secuestrar" otro usuario, además de darnos acceso a información de estado de los "túneles" que creemos entre nuestro equipo e Internet.

Una vez que terminamos de hacer nuestra cuenta procedemos a bajar el softwares.

Cuando bajamos el programa nos baja comprimido lo único que tenemos que hacer es descomprimirlo en la carpeta en donde lo vamos a usar.

Luego ejecutamos el programa

ngrok.exe es un programa auto-contenido, es decir, no tiene otras dependencias y puede funcionar por si solo. De todos modos lo más recomendable es añadir el ejecutable a tu "path" del sistema, de modo que el comando ngrok lo tengas disponible desde cualquier ventana de línea de comandos. Para ello, dependerá de cada sistema operativo. En Windows la manera más sencilla es abrir  una línea de comandos con permisos de administrador y escribir:

setx path "%path%;C:\ngrok\"

Esta es la ruta a la carpeta donde lo hemos descomprimido. Esto introduce esa ruta en el "path" del usuario local, tal y como te muestro en la siguiente animación:

Una vez hecho esto podemos abrir una línea de comandos (buscando cmd) y podremos usar el comando ngrok en cualquier carpeta del sistema.

Lo único que tenemos que hacer para configurarlo y poder empezar a usarlo es asignarle nuestro token personalizado. Como comentaba antes, este token nos identifica ante la herramienta de modo que nuestros túneles a la Web sean exclusivamente nuestros. Este token lo obtenemos desde la propia portada de la web (ver figura anterior a la animación) o bien, mejor, yendo al apartado "Auth" en el lateral:

Se nos muestra el token (que es una cadena de caracteres muy larga) y podemos copiarlo al portapapeles directamente. También se nos muestra el comando que tenemos que utilizar para asignarlo a la herramienta en nuestra máquina y poder empezar a usarlo.(El token lo oculto por razones obvias).

Dicha orden generará el archivo de configuración por defecto “ngrok.yml” en tu carpeta de usuario dentro de la carpeta del usuario ver imagen abajo.

Una vez hayamos completado todos los requisitos previos, tengamos configurada la autenticación con ngrok y arrancada nuestra aplicación (en nuestro caso en el puerto 8080), podemos proceder a arrancar ngrok.

El proceso se realiza por comandos con la orden básica: ngrok.exe http 8080

Podemos modificar el puerto por cualquier otro donde tengamos la aplicación desplegada. Una vez lanzada la petición ngrok nos mostrará algo así:

Podemos ver que ya tenemos dos URLs disponibles que realizan el redireccionamiento a nuestro localhost, una http y otra https. Cuando nos encontramos en esta situación, también podemos ver en nuestro panel de control web de ngrok cómo están nuestros redireccionamientos en alta y funcionamiento:

151dd7e5ad2d.ngrok.io

http://localhost:8080/webadmin/Index.action

Archivo de configuración ngrok.yml

Si lanzamos un mismo túnel de ngrok a menudo para compartirlo, y no queremos estar escribiendo en la línea de comandos los mismos valores una y otra vez, lo que podemos hacer es dejarlos guardados en el archivo de configuración YAML, ngrok.yml. Para ello podemos usar la clave tunnels, que a su vez nos deja especificar los valores que necesitemos. Por ejemplo:

Para hacer un nuevo proyecto de desarrollo en el que necesitábamos integrarnos con SmartSheet, una plataforma donde los usuarios comparten y modifican en la nube información. Requeríamos que, ante determinados cambios de los usuarios, se ejecutasen ciertos procesos que trataran y modificaran la información en la propia plataforma de SmartSheet. Plataforma que ofrece una API y un sistema de webhooks que nos permiten ejecutar servicios externos ante determinados eventos. Además, proporcionan SDKs para diferentes lenguajes como C#, Java o Node.js, entre otros.

Durante el desarrollo, para poder probar los servicios que eran llamados por estos webhooks, hicimos uso de ngrok. De esta forma, cuando se producía un evento en SmartSheet, se notificaba vía webhook a una URL generada por ngrok, que apuntaba a un servicio arrancado en el localhost de nuestra máquina. Finalmente, este ofrecía la posibilidad de depurar y probar lo que estábamos desarrollando.

Referencias

https://ngrok.com/docs

https://sdos.es/blog/ngrok-una-herramienta-con-la-que-hacer-publico-tu-localhost-de-forma-facil-y-rapida

https://www.jasoft.org/Blog/post/tutorial-ngrok-como-publicar-en-internet-cualquier-pagina-o-aplicacion-web-que-tengas-en-tu-equipo-local

https://www.youtube.com/watch?reload=9&v=DCxt9SAnkyc