¿Cómo compartir tu entorno local por internet?

por Asur Bernardo

¿Alguna vez te has preguntado como puedo hacer una demo a ese cliente sin un entorno de staging? ¿O cómo puedo probar esos webhooks que estoy programando sin hacer un despliegue? La respuesta viene de la mano de http tunneling, una técnica que te permite compartir tu entorno local a internet.

Vamos a averiguar como funciona, las diferentes herramientas disponibles y como utilizar la librerías Ngrok y Localtunnel en nuestros propios proyectos.

Tabla de contenidos:

¿Qué es http tunneling y cómo funciona? 🕳️

El http tunneling es una técnica que te permite hacer links de red directos entre dos máquinas que normalmente no se podrían conectar debido a restricciones de Firewall, NAT, ACLs, etc.

Estos túneles requieren una máquina intermediaria (un proxy) que actúe de servidor. La máquina cliente se podrá conectar a este servidor a través de una llamada HTTP (normalmente con el verbo HTTP CONNECT), una vez establecida la única función del servidor es de proxy directo de TCP entre ambos extremos, quién realiza el request y el cliente del túnel.

¿Qué usos tiene el http tunneling? 📱

La teoría es maravillosa, queda super vistoso hablar de protocolos, clientes y servidores, pero lo mejor es la práctica, así que vamos a ver en que lodazales nos podemos meter para embarrarnos bien.

Todos estos casos de uso, aunque se aplican a tecnologías distintas, suelen girar alrededor del concepto de hacer accesible un entorno que está detrás de una NAT y/o un Firewall sin necesidad de desplegarlo a un servidor público.

Exponer tu entorno local al internet para demos

Este es el caso de uso por excelencia y es en lo que se especializan varias de las librerias de las que vamos a hablar a continuación.

Consiste en generar una URL por la que se puede acceder al servidor de tunneling, este servidor consume datos del cliente y devuelve una respuesta HTTP, de esta manera podemos acceder al servidor como si estuviesemos viendo nuestro local, pero desde cualquier sitio que tenga acceso a internet.


Pruebas de webhooks desde local

Probar webhooks es también un caso bastante conocido, incluso los desarrolladores de aplicaciones como Slack recomiendan este workflow.

Las aplicaciones que soportan webhooks suelen requerir una URL de la que consumir datos que sea accesible desde internet, al levantar un túnel puedes configurar la URL que te proporciona y hacer cambios en tiempo real (con Ngrok incluso puedes lanzar request custom desde su GUI).


Pruebas de API en apps o aparatos IOT

Prácticamente todas las aplicaciones dinámicas y aparatos IOT requieren algún tipo de API de la que consumir datos, para hacer pruebas en tiempo real mientras se desarrolla puedes configurar el endpoint de tu túnel en tu consumidor y ponerte a testear.


Otras ideas…

Como veis solo hay que echarle originalidad, seguro que hay muchas más aplicaciones que se me escapan pero estas son algunas extra que se me han ido ocurriendo:

¿Qué herramientas hay de HTTP tunneling? ⚒️

Ahora que ya hemos visto algún caso de uso y hemos echado a andar la imaginación, vamos a ver de que herramientas disponemos para llevar a cabo nuestra idea:

Ngrok - secure introspectable tunnels to localhost

Ngrok es quizás el nombre más reconocible en esta materia, es un SaaS que tiene la facilidad de uso por bandera. Sus características son las siguientes:

Pros

Contras

Localtunnel - expose yourself

Aunque su eslogan se puede malinterpretar facilmente, Localtunnel es el proyecto open source más reconocible de HTTP tunneling y lleva desde el 2012 siendo desarrollado y mantenido. Es la alternativa más frecuente a Ngrok y no sin razón:

Pros

Contras

Repositorio: https://github.com/localtunnel/localtunnel

Chisel - A fast TCP tunnel over HTTP

El nuevo de la clase, se promociona como una herramienta de HTTP tunneling rápida y segura. Con más de 3K estrellas en Github parece que ha convencido a los usuarios, lamentablemente aún no lo he podido probar, pero su rápido crecimiento es prueba más que suficiente de que merece la pena darle una oportunidad.

Pros

Contras

Repositorio: https://github.com/jpillora/chisel

¿Cómo utilizar Ngrok en tu proyecto web? 👩‍🏭

Nos ponemos manos a la obra, al final me he decantado por publicar mi webapp al internet utilizando Ngrok porque al proporcionar un binario descargable es muy fácil y rápido, ni siquiera requiere instalación. El proceso a seguir es el siguiente:

Nos descargamos el zip con el código de la web oficial:

wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip

Extraemos los ficheros:

unzip ngrok-stable-linux-amd64.zip

Ejecutamos el comando especificando el procolo y el puerto de escucha:

./ngrok http 80

La consola nos mostrará todos los datos de nuestro nuevo túnel, con ambos links para entrar a nuestro túnel, tanto http como https. Pinta algo así:

Listo, ya podemos compartir el link con quien queramos que acceda a nuestra máquina para hacer una demostración.

Ngrok ofrece una GUI para analizar los requests que llegan a tu servidor, e incluso hacer respuestas custom a cada uno. Normalmente es accesible desde tu navegador en localhost:4040. Esto puede ser muy útil en el caso de que estés probando una API, webhooks o IOT devices y necesitas hacer una request en concreto sin tener que picar código.

En la web oficial también hay analítica y un dashboard, pero para eso hay que registrarse, puedes ver como configurarlo todo en su documentación oficial.

Cuidado 🚨
La capa gratuita de Ngrok es bastante limitada, para hacer pruebas en una web sencilla sin muchos subrequest funciona perfectamente, si lo necesitas para algo más complejo o en un entorno profesional quizás te merezca la pena pagar por un plan premium.

Setup alternativo con Localtunnel y docker 🐳

Está muy bien eso de instalar globalmente una herramienta o descargarte un binario, pero yo soy mucho más fan de utilizar contenedores para mi workflow, así que he estado haciendo pruebas con docker a ver si se puede integrar Localtunnel y ha resultado que si!

Ya tengo un entorno dockerizado para este mismo blog, así que lo he aprovechado para hacer pruebas.

He encontrado una imagen de docker que es genial, pesa solo 20Mb y tiene más de 1 millón de descargas, así que el 90% del trabajo ya está hecho, la comunidad de docker es una pasada!

Lo podemos hacer todo desde el docker-compose.yml, no hace falta ni siquiera tocar la parte que ya estaba hecha, tan solo añadir el nuevo servicio:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
version: '3'
services:
  web:
    build: .
    ports:
      - "1313:1313"
    volumes:
      - .:/blog
    command: hugo server --verbose --watch --buildFuture --buildDrafts -D --bind 0.0.0.0

  # 🡣 Nuevo contenido 🡣

  localtunnel:
    image: efrecon/localtunnel
    depends_on:
      - web
    command:
      --local-host web --port 1313

Vamos a ver que se hace en cada paso:

Y eso es todo, al lanzarlo se nos inicia un cliente de Localtunnel listo para usar como en el paso anterior, pero sin instalar software en tu equipo, mucho mejor!

Presentación en diapositivas

He hecho una presentación sobre este tema recientemente, dejo por aquí las diapositivas por si alguien les quiere echar un vistazo o las quiere reutilizar:

Asur Bernardo

Back end developer sin ningún tipo de gusto estético. Me encanta la programación, el cacharreo y la tecnología en general. Siempre intento aprender cosas nuevas.

¡Si te ha gustado comparte y comenta!

Load more