Comparti tu Localhost de forma segura con Ngrok y Localtunnel

Comparti tu Localhost de forma segura con Ngrok y Localtunnel

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

¿Qué logramos con esto?

  • Podemos hacer testing de nuestro desarrollo desde movil, tablet o cualquier otro dispositivo de forma rápida y sencilla.
  • Otros co-workers pueden acceder a nuestro servidor local de forma segura para revisar un proyecto juntos.
  • Si estamos en una call con un cliente podemos mostrarle el avance del proyecto al instante sin necesidad de deployar, configurar DNS, ni nada de eso. Es magia!

Pero un momento! ¿Es necesario usar las dos apps?
No! En este post les presento dos alternativas, cada una con sus ventajas, desventajas y diferencias. Ustedes decidirán luego si optan por una u otra, o las dos 😉

Con esa intro creo que ya se entendió de que va el post, así que vamos a los bifes!

ngrok

ngrok

En primer lugar vamos a descargar ngrok para nuestro sistema operativo, descomprimimos y copiamos el ejecutable al folder de nuestra preferencia. Abrimos la consola en el directorio donde dejamos la app y lo ponemos a correr con el siguiente comando:

$ ngrok http 80



Lo que estamos haciendo 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  
Version                   2.2.8  
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  



Una vez que ngrok crea el túnel nos va a dar una URL random https://b9ccb437.ngrok.io, cualquiera que la tenga va a poder comunicarse con nuestro servidor local. Ingresa desde tu smartphone y vas a ver tu localhost, y si todavía te quedan dudas pedile a alguna amigo que ingrese, créanme, también va a ver lo mismo :)
La desventaja es que en ngrok las URL no son persistentes, de modo que si reiniciamos la app nos va a proporcionar una URL distinta.

Punto a favor para ngrok es el inspector web que nos ofrece para poder visualizar en tiempo real todo el trafico que esta pasando por nuestro servidor local, con detalle de los request, responses, headers, payload, etc. Para acceder al inspector solo debemos ingresar a la URL http://127.0.0.1:4040.

Por ultimo, como dije al principio del post, es posible crear el túnel en cualquier puerto TCP, por ejemplo ngrok tcp 22.

Localtunnel

Localtunnel

Localtunnel es un modulo escrito en javascript que se instala mediante el manejador de paquetes NPM, también requiere de Node.js por lo que debemos asegurarnos de tenerlo instalado previamente. Con el siguiente comando vamos a instalar Localtunnel de forma global:

$ npm install -g localtunnel



Si tenemos un servidor web local corriendo en el puerto 80, vamos a crear el túnel de esta manera:

$ lt --port 80



Vamos a recibir una respuesta como la siguiente:

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



Cuando ejecutamos Localtunnel sin parametros (solo el puerto) nos proporciona una URL random, pero podemos usar el parametro --subdomain para pedirle que utilice un subdominio personalizado, el cual podemos volver a utilizar cada vez que creemos el túnel a nuestro servidor. Esto nos da la posibilidad de poder compartir con otras personas la URL dado que la misma sera 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 estar monitoreando 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

🔥   Ofrece un inspector web para monitorear todo el trafico que pasa a través del túnel

👎   Las URL no son persistentes

Localtunnel

🔥   Ofrece URL persistentes que pueden ser compartidas con otras personas al no cambiar cada vez que se crea la conexion

👎   No es muy estable y es necesario monitorear el proceso cada tanto para verificar que sigue activo

Conclusiones

En base a las ventajas y desventajas de cada app me imagino que ya se irán dando una idea de donde usar cada app, por ejemplo si tenemos acceso a un VPS podemos dejar corriendo ngrok por varios días para testear alguna API o servicio, sabiendo que es muy estable. Para testing entre dispositivos o ver el proyecto con un cliente quizá lo mejor sea Localtunnel que nos da URL persistentes.
Usen lo que crean mejor, lo que les sea mas cómodo o confiable para su trabajo diario.

Y si conocen o usan otra app que les parezca mejor nombrenla en los comentarios o escribanme un correo o por mis redes sociales. Me interesa conocer que herramientas usan día a día ❤.




Post picture by Mathew Schwartz

comments powered by Disqus