Ngrok: cómo compartir tu aplicación local con un simple comando
Durante el proceso de desarrollo de un software es recurrente la necesidad de ejecutar pruebas de integración entre las distintas partes que lo componen.
Supongamos, por ejemplo, que estamos desarrollando una API que brinda un determinado servicio, y otro miembro del equipo esté implementando una aplicación para móviles que consume las funcionalidades de esa API.
Para que el acceso desde la aplicación a la API sea posible, necesitamos realizar configuraciones en la red para permitir el acceso al sistema local.
Pero esto no siempre es posible ya que depende de las facilidades que brinden los proveedores de internet.
Otro escenario similar sería cuando necesitamos hacer una demo de un producto en desarrollo para mostrarle a un cliente los avances.
En este caso podemos optar por subir a un servidor nuestro código y brindar un servicio temporal, pero también puede ser un proceso tedioso para una simple prueba.
La solución más sencilla a estos problemas llega de la mano de Ngrok.
En este artículo estaremos revisando de qué se trata esta tecnología y cómo nos ahorrará tiempo y esfuerzo en el proceso de desarrollo.
¿Qué es Ngrok?
Ngrok es una aplicación que permite compartir un puerto local en tu PC mediante un proxy inverso distribuido globalmente, generando una URL que puede ser enviada a través de internet y garantiza el acceso al puerto compartido sin importar donde se ejecute.
También ofrece opciones de seguridad que permiten autenticación básica o a través de servicios de terceros como Google para asegurar el acceso a tu sistema.
Es importante destacar que esta aplicación no está pensada para desplegar en producción por lo que se recomienda su uso solo en escenarios de pruebas o cuando se desee un acceso rápido de pocos usuarios.
→ Te puede interesar: Netlog: una poderosa herramienta basada en eventos para detectar errores en la carga de una web
Esquema de funcionamiento
Sin Ngrok:
Con Ngrok:
Instalación
Para instalar Ngrok debemos ir a su web oficial https://ngrok.com/download y elegir la opción según el sistema operativo deseado.
Tenemos instaladores para Windows, Linux, macOS y hasta una alternativa para Docker.
En este caso descargaremos la versión para Windows que se trata de un archivo portable que podemos copiar en el directorio que deseemos.
Una vez elegido el destino debemos ir hasta esa carpeta y abrir una consola. Para esto solo debemos escribir cmd en la barra de ruta de nuestro explorador y presionamos Enter, veamos:
Luego podemos verificar la versión de ngrok que tenemos con el comando: ngrok –version
Procedemos a crear una cuenta en ngrok, es totalmente gratis. Para esto debemos acceder nuevamente su web oficial y presionar el botón Signup.
Debemos completar los datos requeridos: Nombre, Email y Password o utilizar una cuenta existente de Google o Github para terminar el registro.
Una vez completado el registro ya podemos autenticarnos haciendo clic en Login y acceder a nuestro token.
Copiamos directamente el comando señalado en la parte inferior de la imagen y lo pegamos en la consola que abrimos anteriormente:
Al presionar Enter, se creará el archivo de configuración y ya podemos empezar a utilizarlo.
Usando Ngrok
Supongamos ahora que tenemos un sitio web corriendo en local y queremos compartirlo a una persona para que acceda directamente.
Para esto tenemos un servidor web como Apache en este caso corriendo en el puerto 81 de nuestro PC local.
Si accedemos a través del navegador web a http://localhost:81 podemos ver en este caso la página por defecto de Apache:
Nuestro objetivo es que otra persona pueda ver esta pantalla desde cualquier sitio. Para eso utilizamos este comando:
ngrok http 81
Con este comando le especificamos que queremos compartir a través del protocolo http el puerto 81 de nuestro ordenador.
Como resultado ngrok nos devuelve la URL de acceso compartido (Forwading) y la URL de una interfaz web para administrar las peticiones que se realizan (Web Interface), veamos:
Ahora solo nos queda enviar la URL (https://cd60-152-206-201-21.ngrok-free.app) a la persona a quien queremos darle acceso y listo. Probemos entrar a través de dicha URL:
Con el plan gratuito podemos se mostrará esta advertencia al usuario donde se informa que está a punto de acceder a un sitio web servido por ngrok. Solo debemos hacer clic en el botón Visit Site.
Y ya está, como puedes observar en la imagen anterior, tenemos acceso a la misma pantalla de antes desde la URL de ngrok, accesible esta vez desde cualquier lugar del mundo.
Aplicaciones
Con este esquema, podemos compartir cualquiera de nuestros puertos locales, ya que podemos usar el protocolo TCP en lugar de HTTP.
Por ejemplo, un uso común consiste en brindar acceso a SSH para controlar nuestra PC a través del puerto 22:
ngrok tcp 22
De este modo se puede acceder a una consola a través de la URL que brinda ngrok y ejecutar comandos remotos en la PC local.
Seguridad
Ngrok permite aplicar varios tipos de filtros de seguridad para brindar un acceso más seguro a nuestras aplicaciones.
Direcciones IP
Podemos decidir desde qué direcciones IP es posible acceder a nuestra PC mediante Ngrok utilizando el comando:
ngrok http 80 –cidr-allow 110.0.0.0/8 –cidr-allow 220.12.0.0/16 –cidr-deny 110.2.3.4/32
Donde le decimos a ngrok que es posible acceder desde las subredes 110.0.0.0/8 y 220.12.0.0/16 y denegamos completamente desde el IP 110.2.3.4. Podemos jugar con estos valores en dependencia de nuestras necesidades.
Autenticación básica
También podemos definir un usuario y contraseña que el usuario debe introducir antes de acceder al sitio, incorporando una capa extra de seguridad:
ngrok http 80 –basic-auth «username1:password1» –basic-auth «username2:password2»
De este modo, cuando el usuario intente acceder a nuestro ordenador le aparecerá un formulario donde debe introducir las credenciales configuradas para lograr acceder satisfactoriamente.
Autenticación de Google
De igual modo podemos configurar el acceso de tal manera que el usuario deba completar la autenticación con sus credenciales en Google antes de acceder a nuestro sitio. Para esto usamos el comando:
ngrok http 80 –oauth google –oauth-allow-email kate.libby@gmail.com
Web Interface
Como mencionamos anteriormente, ngrok habilita una interfaz web local para visualizar las peticiones que se realizan al servicio compartido. Podemos acceder a ella a través de la URL http://127.0.0.1:4040.
En esta interfaz local podemos ver el origen de cada petición y toda la información correspondiente a sus cabeceras.
Precios
Aunque Ngrok permite el uso gratuito de todo lo que hemos estado comentando anteriormente, también permite opciones avanzadas que podrán habilitarse mediante versiones de pago, por ejemplo, especificar el un dominio en el que quieres la URL resultado, balance de cargas avanzado, entre otras.
Puedes ver el listado completo en la URL https://ngrok.com/pricing, pero te adelanto que el pago es de $15.00 por endpoint activo al mes en la versión PAY-AS-YOU-GO o puedes acceder a una versión personalizada si aun no es suficiente para ti.
De este modo concluimos este artículo donde estuvimos analizando de forma superficial una herramienta como Ngrok, cuyo uso te facilitará mucho el proceso de desarrollo y pruebas.
Como recomendación te exhorto a que revises a fondo las posibilidades que te brinda Ngrok, que van mucho más allá de lo que hemos expuesto aquí por cuestiones prácticas.
De momento nos despedimos, no sin antes proponerte que revises nuestras recomendaciones de software por navidad, es muy posible que encuentres alguna sorpresa.
