‘Ngrok’: una herramienta con la que hacer público tu localhost de forma fácil y rápida

En algunos proyectos de desarrollo tenemos la necesidad de integrarnos con aplicaciones que ya están funcionando en la nube. Por ello, si estas tienen que hacer llamadas a servicios que estamos desarrollando, directamente o vía webhooks, no podemos depurar nuestro código en local a no ser que desplegásemos nuestro servicio en una URL accesible por aplicación externa.

Este es precisamente el contexto que vivimos con uno de nuestros proyectos, por lo que, para solucionar este problema facilitando la depuración en local y agilizando el desarrollo, contamos con herramientas que nos permiten exponer en internet una URL local. En concreto, nosotros hemos optado por ngrok.

 

¿Qué ofrece ngrok?

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.

 

Necesidad en un proyecto real

Pero volvamos al principio: ¿cómo surge la necesidad en un proyecto real?

Comenzamos 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.

 

ngrok en profundidad

Puesta en marcha

Para empezar a usar ngrok solo necesitamos:

  • Una cuenta de usuario en ngrok.com. Con un plan gratuito de la misma es suficiente para las pruebas básicas. Si no tienes cuenta de usuario, tendrás que procede a crear una cuenta para dar uso a la herramienta.
  • Descargar y descomprimir la aplicación. Tienes distinta posibilidades de descarga:

"descarga de la aplicación"

 

Una vez hayamos completado los requisitos previos y tengamos nuestro localhost arrancado y accesible, procederemos a levantar ngrok para hacer público los aplicativos desplegados en localhost. A modo de ejemplo, tenemos arrancado la aplicación en desarrollo de control externo de SmartSheet en el puerto 8080 (web y ws). http://localhost:8080/ces/

"Registro en ngrok"

 

http://localhost:8080/ces-ws/api/

 

La primera vez que arranquemos ngrok tendremos que dar de alta nuestro token de usuario. Se trata de un proceso sencillo en el que iremos, por comandos, a la carpeta donde tenemos el aplicativo descomprimido y procederemos a lanzar la orden:

"Token de usuario"

 

Dicha orden generará el archivo de configuración por defecto “ngrok.yml” en tu carpeta de usuario dentro de la carpeta “.ngrok2”. El archivo generado podrá usarse para pre-establecer ciertas configuraciones en el funcionamiento de ngrok, tal y como veremos más adelante.

Una vez hayamos dado de alta el token y generado el archivo de configuración, no tendremos que repetir este proceso nunca más. No obstante, si por cualquier motivo cambiamos de cuenta, con modificar el archivo de configuración con el nuevo authtoken obtenido es suficiente.

Para obtener tu authtoken basta con acceder a tu pantalla de configuración en ngrok.com previo logado:

 

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:

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:

 

Ahora podemos proceder a utilizar nuestras URLs públicas para llegar a nuestro localhost sin problemas desde cualquier navegador o dispositivo.


 

En la consola de comandos se irán mostrando las diferentes peticiones que se están realizando:

 

O si lo prefieres, puedes realizar una revisión más en profundidad de las peticiones que se están realizando, incluso revisar cabeceras y contenidos, accediendo a la URL que ngrok te habilita para ello cuando esta arrancado: http://localhost:4040/inspect/http

 

Cada vez que pares el túnel y lo vuelvas a iniciar, cambiará la dirección en la que está expuesto. Esto es una limitación de la versión gratuita. En cualquiera de las ediciones de pago puedes reservar estos nombres e incluso utilizar subdominios o dominios propios, lo cual es muy interesante para algunos usos de la herramienta.

 

Ubicación geográfica

Si te fijas, hay un detalle que quizás te haya pasado inadvertido, pero es el hecho de que tu túnel se ha creado en la región denominada ‘us’. Esto quiere decir que el proxy que actúa de intermediario entre tus usuarios y tu equipo está ubicado en Estados Unidos. Esta es la opción por defecto.

ngrok ofrece ahora mismo cuatro regiones para ubicar los proxies:

  • us - Estados Unidos (Ohio)
  • eu - Europa (Frankfurt)
  • ap - Asia/Pacífico (Singapore)
  • au - Australia (Sydney)

Así, por ejemplo, dado que yo estoy en España y sé que mis usuarios van a estar también en España, lo lógico sería ubicar el proxy a mis túneles en Europa.

Para ello puedo utilizar el parámetro región de la herramienta, así: ngrok.exe http -region eu 8080

Si queremos evitarnos el tener que meter este parámetro cada vez que lancemos un túnel, y queremos que sea el valor por defecto, podemos abrir el archivo de configuración ngrok.yml que vimos antes y añadir esto: region: eu

El cambio de región está visible en la consola de comando cuando arrancamos ngrok.

 

Un poco más de seguridad

Si no queremos simplemente poner el servicio abierto a todos en la red, podemos proteger el túnel de varias maneras.

La mas sencilla y disponible incluso en la versión gratuita de ngrok es mediante el uso de un usuario y una clave. Para ello se utiliza el parámetro auth, así:

ngrok.exe http -auth="usuario:clave" 8080

Ejemplo:

 

En el momento en el que levantemos el túnel de esta manera, si alguien intenta acceder a la URL facilitada por ngrok, se le mostrará un diálogo del navegador solicitándole el usuario y la clave correspondientes. Por tanto, cuando usemos esta opción debemos asegurarnos de que todos entren a través de HTTPS.

 

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:

 

De esta manera podemos dejar definidos todos los túneles que vayamos a necesitar, y luego utilizarlos tan solo escribiendo su nombre en la línea de comandos. Se puede poner así, por ejemplo:

 

Por tanto, tan solo tendremos que recordar el nombre del perfil que queremos levantar.

 

Alternativas a ngrok

En el mercado existen diversas alternativas a ngrok como, por ejemplo, localtunnel, serveo, teleconsole, pagekite o portmap, entre otros.

En nuestro caso, nos decantamos por ngrok por su sencillez y eficacia, pero aquí se puede ver en detalle un cuadro comparativo entre las diferentes opciones elaborado por Softwaretestinghelp (Enlace aquí: https://www.softwaretestinghelp.com/ngrok-alternatives/).

Conclusiones

En definitiva, ngrok nos ha sido muy útil, facilitando el desarrollo y reduciendo drásticamente los tiempos de depuración y de pruebas de nuestros servicios. Pese a su sencillez, ngrok es una herramienta que ofrece muchas posibilidades en su versión gratuita.

¡Seguro que se te ocurren multitud de situaciones en las que te facilitaría el trabajo! Si es así, no dudes en dejarnos un comentario.

Related posts

Comments
¿Qué opinas? Escríbenos. Nos encantará leerte :)