Acceder a localhost desde cualquier lugar

Has pasado horas trabajando localmente en tu computadora, haciendo que el nuevo diseño de la página web se vea perfecto. Tu CMS está bien configurado con contenido de muestra y quieres probarlo en algunos dispositivos móviles y tabletas. Tu cliente también quiere echar un vistazo, pero no tienes tiempo de migrar todo a un servidor público para darles una vista previa rápida.

Si eres un desarrollador web, es probable que hayas estado en esta situación muchas veces. Y probablemente pasaste esos momentos quemando un poco de aceite de medianoche migrando cosas a un servidor orientado al público deseando que hubiera una forma más fácil.

Para todos esos desarrolladores web con los ojos cansados, ¡estoy aquí para decirles que ha llegado una forma más fácil! De hecho, una serie de aplicaciones y servicios están disponibles para facilitar este proceso al proporcionar acceso a tu localhost desde la Web. Los que discutiré en este artículo son:

• ngrok
• PageKite
• localtunnel
• boringproxy
• BrowserStack

Conclusiones Clave

¿Cómo es Posible Acceder a localhost Desde Cualquier Lugar?

Es posible a través de los servicios de túnel seguro en línea. Estos son servicios que te proporcionan un túnel desde Internet hasta tu máquina.

Lo que eso significa es que proporcionan una URL accesible públicamente, vigilan las llamadas en esa URL y reenvían esas llamadas a tu servidor localhost. Todo el complicado montaje se ha hecho por ti; todo lo que necesitas hacer es instalar una aplicación y dirigirla a tu localhost.

A Note About Using Virtual Hosts

En mi localhost, tengo hosts virtuales configurados. Sin tener la dirección de cada servicio a continuación listada como un ServerAlias, mi servidor se negaría a funcionar correctamente. Pasaron unas horas de confusión. Si estás en la misma situación, agrega un ServerAlias a tu httpd.conf, reemplazando la dirección de ngrok que ves a continuación con la dirección del servicio que estás utilizando:

<VirtualHost *:80>
  DocumentRoot "/Users/patcat/Web"
  ServerName mytestsite.test
  ServerAlias 350c0f8e.ngrok.com
</VirtualHost>

ngrok

ngrok es una aplicación para Windows, macOS y Linux que crea un túnel y también te permite inspeccionar todo el tráfico que pasa por el túnel y reenviar ese tráfico para pruebas.

Puedes usar características básicas de forma gratuita y luego registrarte para acceder a funciones más avanzadas. Para utilizar subdominios personalizados y dominios reservados, necesitarás inscribirte en un plan de pago. De lo contrario, podrás usar el servicio, pero se te asignará un dominio aleatorio como la URL 350c0f8e.ngrok.com en el ejemplo de host virtual anterior.

Los planes de ngrok a partir de mayo de 2021 se ven así:

Una ventaja clave de ngrok es que no tiene dependencias. Instalas ngrok y lo ejecutas. No se requiere nada más.

Cómo usar ngrok

Ve a ngrok.com, descarga el archivo y extráelo a donde quieras que ngrok viva en tu computadora. A continuación, se presentan los pasos básicos, pero si deseas más detalles, tenemos otro artículo sobre “Cómo usar ngrok para compartir un sitio de desarrollo local“.

Abre una terminal de línea de comandos y ve al directorio donde extrajiste ngrok. Ejecuta el siguiente comando para crear un túnel a tu localhost en el puerto 80:

./ngrok http 80

Verás una pantalla como esta:

En el ejemplo anterior, tenemos tráfico dirigido a una dirección ngrok generada aleatoriamente de http://42e474ef9799.ngrok.com siendo redireccionado a nuestro localhost en 127.0.0.1:80.

Abre esa URL en cualquier dispositivo con conexión a Internet y accederás a tu localhost desde la Web!

Una de las ofertas más únicas que ngrok proporciona es la capacidad de inspeccionar el tráfico pasado. Para hacerlo, ve a http://localhost:4040/ en tu computadora. Accederás a un panel que muestra las solicitudes entrantes. Puedes hacer clic en cada solicitud de la izquierda y ver detalles en la derecha para los encabezados y otros datos. Mi uso favorito de esto es ver datos JSON devueltos de las solicitudes. El diseño muy básico de esto al cargar una página HTML simple se ve así:

Incluso puedes reenviar una solicitud haciendo clic en el botón Reenviar a la derecha. Eso volverá a ejecutar una solicitud para ti a través del túnel.

Características avanzadas de ngrok

Protección por contraseña te permite evitar que miembros aleatorios del público accedan a tu sitio:

ngrok http -auth="username:password" 80

Subdominios personalizados son para cuando no quieres tener que recordar esa URL generada aleatoriamente! Si te registras en un plan pagado de ngrok, puedes reservar un subdominio para que otros no lo puedan tomar. Lo siguiente te permite ver tu localhost en nogophersinmytunnel.ngrok.com:

ngrok http -subdomain nogophersinmytunnel 80

Dominios personalizados son para cuando prefieras no tener “ngrok” en tu URL para el proyecto enrutado. Los planes pagados te permiten usar tus propios dominios, en lugar de necesitar usar ngrok.com:

ngrok http -hostname="tunnel.yourdomain.com" 80

Incluso puedes enrutar a una dirección IP en tu red local que de otro modo no sería accesible desde el exterior:

ngrok http 192.168.0.27:80

O puedes crear un túnel para otros servicios no HTTP:

ngrok tcp 22

Hay muchas otras cosas que puedes hacer, desde ejecutar múltiples túneles al mismo tiempo hasta crear un archivo de configuración para guardar todas estas configuraciones para uso futuro.

Para informarse sobre todo lo que es posible, consulte la documentación de ngrok.

PageKite

PageKite es una “redirección inversa basada en túnel dinámico” basada en Python que funciona en Windows, macOS, Linux e incluso dispositivos Android. Es muy similar a ngrok pero lleva bastante más tiempo en el mercado y parece bastante más probado en combate para un conjunto más amplio de usos. Incluso lo han adaptado para trabajar con el protocolo de Minecraft, permitiendo a las personas ejecutar un servidor de Minecraft en su máquina local.

Puedes registrarte para una prueba gratuita de un mes y 2,5 GB de cuota de transferencia. Después de eso, tiene un sistema de “paga lo que quieras” (un mínimo de USD$4 al mes, o gratis si trabajas en software de código abierto gratuito). Sin embargo, en este caso, debes pagar más para obtener más, con aquellos que pagan cantidades mayores obteniendo una cuota más grande, un período de servicio más largo, subdominios personalizados, y así sucesivamente.

PageKite no parece tener un inspector de tráfico como ngrok, pero sí tiene características bastante increíbles como un firewall incorporado que bloquea el acceso a objetivos de ataque comunes como /wp-admin, /xampp, páginas phpMyAdmin… y demás. Puede desactivarse si estás de acuerdo con que estos sean públicos.

Incluso tienen un servidor de retransmisión de frontend en Sydney, Australia, por lo que esto podría potencialmente proporcionar velocidades más rápidas para desarrolladores australianos.

Cómo usar PageKite

Ve a PageKite.net y descarga la versión para tu sistema operativo. Para los usuarios de Windows, asegúrate de tener Python instalado primero. Para macOS y Linux, puedes usar un simple comando cURL para instalarlo directamente desde tu línea de comandos.

Una vez descargado, ejecuta este comando para iniciar un túnel hacia tu servidor localhost. Escoges un subdominio específico que usarás cada vez (en lugar de la asignación aleatoria en ngrok). He elegido hurrygetintothefancytunnel aquí:

pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

En mi Mac recientemente, necesitaba ejecutar con python3 al inicio, así que prueba eso si lo anterior no funciona:

python3 pagekite.py 80 hurrygetintothefancytunnel.pagekite.me

Se ejecutará y te inscribirá en el servicio si aún no estás inscrito. Luego tendrás localhost en funcionamiento para el mundo entero!

Características Avanzadas de PageKite

PageKite tiene algunas características adicionales más impresionantes.

Un ejemplo: no hay necesidad de un servidor web. Si no tienes un servidor en funcionamiento, tiene un servidor web incorporado que puede ejecutar tus archivos estáticos de esta manera:

pagekite.py /path/to/folder igotthattunnelvision.pagekite.me

Al igual que ngrok, puedes restringir el acceso mediante contraseña:

pagekite.py 80 terelekkayatuneli.pagekite.me +password/username=password

O restringir el acceso mediante direcciones IP:

pagekite.py 80 arcadefirecamethroughmywindow.pagekite.me +ip/1.2.3.4=ok +ip/4.5.6=ok

Como mencioné anteriormente, incluso puedes ejecutar todo esto en tu teléfono. Instalé un servidor web para Android llamado kWS y luego ejecuté PageKite para exponerlo a la Web:

Ciertamente no es algo que haré todos los días, pero es bastante genial ver que esto ahora es posible únicamente en un teléfono inteligente!

Al igual que ngrok, PageKite puede manejar múltiples túneles a la vez, y admite tener tu propio dominio, además de permitir la configuración de un archivo de configuración para tus túneles. Para obtener más información sobre esto, consulta su Guía de inicio rápido y su página más detallada de cómo hacerlo.

localtunnel

localtunnel es un servicio de túnel que inicialmente se construyó en Node, pero también tiene clientes basados en Go y C#/.NET.

Cómo usar localtunnel

Puedes instalarlo globalmente en tu dispositivo como la mayoría de los paquetes npm:

npm install -g localtunnel

Para iniciar un túnel a tu localhost en el puerto 80, ejecuta este comando:

lt --port 80

Funcionará igual que ngrok y PageKite. Te proporciona un subdominio similar al que recibí: https://loud-ladybug-21.loca.lt.

Al ejecutar localtunnel por primera vez, recibirás una amable advertencia de que esta acción está haciendo públicos tus recursos en la Web. Solo presiona Haga clic para continuar.

Características avanzadas de localtunnel

Obtener un subdominio personalizado gratuito es completamente factible aquí, siempre que el subdominio no haya sido tomado. Para usar un subdominio personalizado, simplemente ejecútalo con el parámetro --subdomain:

lt --port 80 --subdomain platypusestunneltoo

Una de las características muy útiles que localtunnel ofrece es una API de Node que te permite generar localtunnels a través de JavaScript para usar en tus pruebas automatizadas:

const localtunnel = require('localtunnel');

(async () => {
  const tunnel = await localtunnel({ port: 3000 });

  // Su URL de túnel aparecerá como tunnel.url

  tunnel.on('close', () => {
    // Haz algo una vez que el túnel se cierre
  });
})();

boringproxy

boringproxy es una opción más nueva que es totalmente gratuita y de código abierto bajo la licencia MIT! Su principal enfoque parece ser hacer que sea más fácil para las personas alojar sitios web en sus computadoras. Viene como un solo archivo ejecutable que funciona como servidor y cliente en uno. Hay un ejecutable para una gama de sistemas Linux y Windows. macOS está listado como “sin probar”. Personalmente no he podido hacer que funcione en mi Mac, pero si tienes acceso a una caja de Linux o una Raspberry Pi, esta podría ser la solución para ti. Está escrito en Go y está abierto para contribuyentes.

Sus características en resumen:

• 100% gratuito y de código abierto bajo la licencia MIT
• puede ser totalmente alojado por uno mismo
• cuenta con proxy inverso incorporado
• admite dominios/subdominios personalizados

Cómo usar boringproxy

Los pasos principales se siguen más fácilmente en la documentación de boringproxy, ya que es diferente para diferentes plataformas.

En general, implica:

• descargando la instancia del servidor a través de curl (por ejemplo, curl -LO https://github.com/boringproxy/boringproxy/releases/download/v0.6.0/boringproxy-linux-x86_64)
• chmodando el ejecutable descargado (por ejemplo, chmod +x boringproxy-linux-x86_64)
• configurar el enlace a los puertos 80 y 443 (por ejemplo, sudo setcap cap_net_bind_service=+ep boringproxy-linux-x86_64)
• configurar el ejecutable también en el cliente

Este video del creador de boringproxy cubre cómo hacerlo mejor:

Características avanzadas de boringproxy

Certificados HTTPS automáticos se manejan automáticamente para usted a través de Let’s Encrypt. No es necesario preocuparse por obtener certificados para pruebas, ya que esto ocurre detrás de escena.

Interfaz web para configuración se configura automáticamente para permitirle administrar usuarios, tokens de acceso y túneles.

Puedes hacer túneles de aplicaciones web con facilidad. Aloja aplicaciones web como Etherpad (mostrado en el video anterior), dales su propio subdominio, y luego puedes acceder a ellos desde cualquier lugar.

BrowserStack

BrowserStack proporciona capturas de pantalla automatizadas y máquinas virtuales para probar tu sitio web contra una gama de dispositivos y navegadores. Si la razón por la que deseas acceder a localhost es para pruebas, BrowserStack podría interesarte.

Puedes usar los métodos anteriores para probar sitios localhost en las máquinas virtuales de BrowserStack, pero también tiene una extensión de navegador para Chrome y Firefox que te permite proporcionar acceso a tu localhost desde sus servidores.

Sin embargo, esta funcionalidad solo está disponible para los servicios de BrowserStack y no es accesible al público en general. BrowserStack ofrece una prueba gratuita, después de la cual se cobrará una cuota mensual para usar el servicio. Sería útil en casos donde la única razón para acceder a localhost es realizar pruebas en dispositivos.

Cómo usar BrowserStack

Regístrate para una prueba en BrowserStack.com. De hecho, tienen muy bien documentado el proceso de pruebas locales en su sitio web, así que lee eso si estás interesado en seguir esta ruta.

Al final, sin embargo, te permitirá probar tus sitios localhost en máquinas virtuales ejecutadas a través de la Web de la siguiente manera:

Tener Favoritos

Después de probar todas estas opciones, mis favoritas personales serían ngrok y PageKite.

PageKite parece la solución más multifacética con un enorme potencial. Ha sido desarrollado y ampliado para adaptarse a una gama de usos a lo largo de los años, lo que lo convierte en una aplicación realmente impresionante!

ngrok también es genial por su simplicidad y el inspector de tráfico. Tiene más que suficientes características para la mayoría de los desarrolladores web que buscan acceder a su localhost desde la Web.

Conclusión

Si estás trabajando en una computadora con una conexión a internet activa, ahora puedes configurar el acceso a tu localhost desde cualquier lugar en solo unos minutos! Es increíblemente fácil comenzar y, como has visto, ¡no falta de soluciones!

¿Has utilizado alguno de estos servicios? ¿Tienes otros que prefieras? Me encantaría conocer tus opiniones en Twitter!

 

FAQs sobre cómo acceder a localhost desde cualquier lugar