Podemos definir ngrok cómo una herramienta en la nube con la que podremos exponer de forma muy simple servicios locales a una URL pública de forma segura. Trabaja, además, a través de firewalls y NATs, con lo que nos evitaremos los típicos problemas que generan.

Tiene diferentes tipos de cuentas, empezando por una gratuita que es la usaremos en el post.

Gracias a ngrok, vamos a poder exponer, por ejemplo, un desarrollo local a internet y dejarlo accesible de forma inmediata desde cualquier sistema, lo que nos ahorrará muchísimo tiempo de cara a integrar sistemas, hacer demos o testar nuestra aplicación, al evitar tenerlo que desplegar en un servidor accesible desde internet, usar certificados, etc, etc.

Vamos a poder también usarlo para acceder a dispositivos desde internet, por ejemplo exponer el puerto 22 de ssh de una raspberry para poder acceder a la misma desde cualquier cliente ssh a través de internet.

Otra parte muy interesante, es poder testar nuestra aplicación bajo SSL, con lo que podremos conocer si existe algún problema al utilizar comunicación encriptada, ya que típicamente estos problemas se ven sólo al tener desplegada la aplicación.

El funcionamiento es muy sencillo, ya que sólo requiere una cuenta de usuario en ngrok y un cliente descargable compatible con la mayoría de los sistemas operativos actuales:

Lo primero, nos tenemos que crear una cuenta en ngrok y haremos login con la misma, con lo que llegaremos a la siguiente vista, donde se nos incluirán los pasos necesarios que serán muy simples.

Descargamos el cliente de ngrok para nuestro SO. Se nos bajará un zip con el ejecutable dentro, el cual descomprimiremos.

El siguiente paso, como nos indican, será la generación del archivo de configuración mediante el comando que nos facilitan

Como vemos, se nos ha generado un .yml con la configuración de acceso, podemos incluir otras opciones como desactivar el proxy por ejemplo. Aquí estarían definidas todas https://ngrok.com/docs#config-options

En nuestro caso, tenemos un entorno de desarrollo en Vue expuesto en el puerto 8080. En el que, además, para labores de depuración y hot-reload se usan websockets y queremos exponer nuestros avances a internet

Teniendo en cuenta este puerto, llamaremos a ngrok con el mismo, para exponerlo mediante el comando:

Esto arrancará el cliente de ngrok y nos mostrará información en tiempo real de la conexión, así como las urls de acceso. Es posible pasarle diferentes parámetros necesarios, como por ejemplo, para sobrescribir el header con «-host-header»

Vemos que nos da 3 urls. La primera, nos dará acceso a una consola web de estado de ngrok:

Las otras dos, corresponden con el acceso por http y https a nuestro servidor local, además podemos ver la redirección que hace. Accediendo a cualquiera de ellas desde otro dispositivo, llegaremos finalmente a nuestra web.

Cómo veremos el websocket no se conecta debido a la configuración del servidor de vueJS.

Si configuramos el mismo con los siguientes parámetros no tendremos problema para tener nuestro servidor completamente activo y público