ngrok y Localtunnel son dos aplicaciones que nos permiten exponer en internet una conexión HTTPS hacia nuestro localhost, de manera que podemos compartir, por ejemplo, nuestro servidor web local; incluso aunque nos encontremos detrás de un firewall. No solo podemos permitir el acceso a nuestro servidor web, sino también a cualquier puerto TCP local donde estemos corriendo algún servicio, como un servidor SSH, FTP, o una base de datos.

¿Qué logramos con esto?

• Podemos hacer testing de nuestro sitio web desde el móvil, tablet o cualquier otro dispositivo de manera rápida y sencilla.
• Otros co-workers pueden acceder a nuestro servidor local de manera segura para revisar un proyecto en conjunto.
• Podemos hacer una demo con nuestros clientes en cuestión de segundos y sin necesidad de deployar a un servidor, configurar DNS, ni nada de eso. Es magia!

En este post veremos las ventajas y desventajas de cada app para que puedan decidir si optan por una u otra, o las dos 😉.

ngrok

Ngrok tiene la particularidad de que con la cuenta gratuita nos ofrece tunnels sin timeout, es decir que pueden estar corriendo indefinidamente, por ello les recomiendo que se creen una cuenta ya que es muy sencillo y lo pueden hacer logueandose con Google o GitHub si lo desean.

1. Lo primero que debemos hacer es descargar ngrok para nuestro sistema operativo.
2. Una vez descargado descomprimimos el ejecutable y lo copiamos en una carpeta de nuestra preferencia (yo lo tengo en la raíz del directorio donde guardo todos mis proyectos 🎈).
3. Luego iniciamos sesión en nuestra cuenta de ngrok y copiamos el Authtoken.

4. Abrimos una consola en la carpeta donde copiamos la app y la vinculamos a nuestra cuenta con el comando:

   $ ngrok authtoken <YOUR_AUTH_TOKEN>
   

5. Ya podemos abrir una conexión a nuestro server:

   $ ngrok http 80
   

Lo que hicimos con el último comando es abrir un túnel HTTP en el puerto 80. ngrok nos va a mostrar algo como lo siguiente:

ngrok by @inconshreveable

Session Status            online
Account                   Luciano Muñoz (Plan: Free)
Version                   2.3.35
Region                    United States (us)
Web Interface             http://127.0.0.1:4040
Forwarding                http://b9ccb437.ngrok.io -> localhost:80
Forwarding                https://b9ccb437.ngrok.io -> localhost:80

Como podemos ver ngrok nos asigna una URL random https://b9ccb437.ngrok.io y cualquiera que la tenga va a poder comunicarse con nuestro servidor local. Hace la prueba ingresando desde tu smartphone!

Otra de las cosas cool de ngrok es el inspector web donde podemos visualizar en tiempo real todo el trafico que esta pasando por nuestro tunnel, con detalle de los request, responses, headers, payload, etc. Para ingresar al inspector solo debemos acceder a la URL http://127.0.0.1:4040 desde el navegador.

El punto en contra es que las URL persistentes son una característica de la versión paga, de modo que con nuestra cuenta free al reiniciar el tunnel nos va a proporcionar una URL distinta. Pero, siempre tenes la opción de pagar por la app para contribuir con su desarrollo 😉 y obtener todas las funcionalidades.

Por ultimo, como dije al principio del post, es posible crear un tunnel hacia cualquier puerto TCP, por ejemplo ngrok tcp 22. Pero esto te lo dejo para que lo investigues por tu cuenta 👍!

Localtunnel

Localtunnel esta escrito en javascript y se instala mediante NPM, el gestor de paquetes de Node.js, lo que implica que debemos asegurarnos de tener Node.js instalado previamente.

La instalación es mucho mas sencilla que en el caso de ngrok si ya contamos con los requerimientos de los que les hablé anteriormente. Abrimos una consola y tecleamos el siguiente comando para instalar Localtunnel de forma global en nuestro sistema:

$ npm install -g localtunnel

Ya podemos crear nuestro tunnel al puerto que deseamos:

$ lt --port 80

Luego de ejecutar el comando anterior vamos a recibir una respuesta como la siguiente:

your url is: <https://bxtwmwsppb.localtunnel.me>

Podemos ver que ya tenemos nuestro tunnel creado hacia el puerto 80 de nuestro localhost.

Cuando ejecutamos Localtunnel sin parámetros extra nos proporciona una URL random, de la misma forma que lo hace ngrok, pero si usamos el parámetro --subdomain podemos solicitar un un subdominio personalizado, el cual podremos volver a utilizar cada vez que sea necesario, siempre y cuando dicho subdominio no este siendo utilizado ya por otra persona. Esto nos da la posibilidad de poder compartir siempre la misma URL dado que la misma será persistente:

$ lt --port 80 --subdomain mylocalhost
your url is: <https://mylocalhost.localtunnel.me>

Localtunnel sin embargo no es tan estable como ngrok por lo que debemos monitorear la consola cada cierto tiempo para verificar que el túnel sigue activo.

Pros y Cons

ngrok

🔥   Es muy estable, puede estar corriendo por días sin problemas
🔥   Tiene un inspector web para monitorear todo el trafico que pasa a través del tunnel
👎   Las URL no son persistentes en la versión free

Localtunnel

🔥   Tiene URL persistentes, lo que nos permite poder compartir siempre la misma URL
👎   Es necesario monitorear la consola cada tanto para chequear que sigue activo porque no es del todo estable

Conclusiones

Mis conclusiones en base a las ventajas y desventajas de cada app es que si necesitamos tunnels robustos que puedan permanecer corriendo por horas, incluso días, la mejor alternativa es ngrok. Pero Localtunnel gana cuando se trata de hacer una demo con un cliente, ya que gracias a los subdominios podemos compartirle una URL del tipo proyecto.localtunnel.me, y queda más profesional por decirlo de alguna manera.

Pero como siempre digo, proba las dos apps para que puedas sacar tus propias conclusiones, y usa lo que se adapte mejor a vos y a tu trabajo.

Si conoces o usas otra app de este estilo que te parezca una buena alternativa, dejala en los comentarios o escribime por mis redes sociales. Me interesa conocer que herramientas usan día a día ❤️.