Guía para Configurar el Proxy Inverso Ngrok en ServBay

Ngrok es una potente herramienta que permite exponer de manera segura los servicios web que ejecutas localmente en Internet pública. Al integrarlo con ServBay, puedes crear fácilmente túneles seguros y públicos para tus sitios en desarrollo local, lo cual es perfecto para demostraciones de proyectos, pruebas de Webhooks o compartir avances de desarrollo con colaboradores externos. Esta guía explica paso a paso cómo configurar y usar Ngrok como servicio de proxy inverso en ServBay.

Visión General

ServBay ofrece soporte integrado para Ngrok, simplificando al máximo su instalación y configuración. Desde la interfaz gráfica de ServBay puedes gestionar túneles de Ngrok y mapear cualquier sitio web local alojado en ServBay a una URL pública temporal.

Casos de Uso

• Demostraciones a clientes: Muestra a tus clientes sitios en desarrollo ejecutándose en tu propio equipo.
• Desarrollo y prueba de Webhooks: Prueba servicios de terceros que requieren una URL pública de callback (como pasarelas de pago o APIs).
• Pruebas de aplicaciones móviles: Permite que dispositivos móviles accedan a APIs backend locales mediante una URL pública.
• Colaboración en el desarrollo: Comparte temporalmente el acceso a tu entorno de desarrollo con miembros del equipo.

Requisitos Previos

1. ServBay instalado: Asegúrate de tener ServBay instalado y ejecutándose en tu macOS.
2. Cuenta de Ngrok: Necesitas una cuenta en Ngrok. Puedes registrarte para una cuenta gratuita o de pago en el sitio oficial de Ngrok.
3. Sitio web local: Debes haber agregado y estar ejecutando al menos un sitio local en ServBay, como por ejemplo servbay.demo.

Pasos de Configuración

1. Instalar el paquete Ngrok desde ServBay

Antes de poder usar Ngrok, necesitas instalarlo en ServBay:

1. Abre la aplicación de ServBay.
2. En la barra lateral izquierda, haz clic en Paquetes (Packages).
3. Busca o localiza Ngrok en la lista de paquetes.
4. Haz clic en el botón de instalar junto a Ngrok.
5. Una vez instalado, prueba encender el interruptor junto a Ngrok en la interfaz. Es probable que en este momento el servicio falle al iniciar o muestre un estado anómalo, ya que aún no se ha configurado Ngrok. Esto es normal, la configuración se realizará en los siguientes pasos.

2. Obtener tu Authtoken de Ngrok

Ngrok utiliza el Authtoken para autenticarte y autorizar el uso del servicio.

1. Ingresa al Dashboard de Ngrok y accede con tu cuenta.

2. En el menú lateral del panel, localiza Your Authtoken (dentro de "Getting Started" -> "Your Authtoken").

3. Copia tu Authtoken, es una cadena larga de texto que debes guardar de manera segura.

   

3. Configurar Ngrok en ServBay

Con el Authtoken copiado, regresa a ServBay para configurarlo:

1. En la barra lateral izquierda, haz clic en Tunnel.

2. En la lista de servicios Tunnel, selecciona ngrok.

   

3. Auth Token (Token de Autorización):

   • Pega el Authtoken que copiaste previamente en el campo Auth Token.

4. Configurar Túneles (Dominio Local y Dominio Externo): ServBay permite crear túneles Ngrok para múltiples sitios locales.

   • Local Domain (Sitio Web Local):
     • Abre el menú desplegable y selecciona el sitio local que deseas exponer a Internet a través de Ngrok. La lista se llenará automáticamente con tus sitios registrados en ServBay, como servbay.test o servbay.demo.
   • External Domain (Dominio Externo):
     • Para usuarios gratuitos de Ngrok: Deja este campo en blanco. Ngrok generará automáticamente una URL pública aleatoria que terminará en .ngrok-free.app (u otro sufijo de dominio gratuito de Ngrok). ServBay obtendrá y mostrará esta URL automáticamente al crear el túnel con éxito.
     • Para usuarios de pago en Ngrok: Si tienes un dominio personalizado o reservado en tu cuenta de Ngrok, puedes ingresarlo en este campo para usarlo como dominio externo.

5. Agregar más túneles:

   • Si deseas exponer varios sitios locales, haz clic en el botón + que aparece al lado derecho de una entrada de túnel para agregar una nueva configuración. Repite el paso anterior para seleccionar el sitio local y configurar el dominio externo.

6. Guardar la configuración:

   • Tras finalizar la configuración, haz clic en el botón Guardar (Save) en la esquina inferior derecha.

4. Iniciar y Verificar el Servicio Ngrok

1. Tras guardar los cambios, ServBay intentará iniciar el servicio Ngrok con la nueva configuración.
2. Observa el indicador de estado junto al servicio ngrok. Si todo está correcto y la conexión con Ngrok es exitosa, el indicador se pondrá en verde, señalando que el servicio está operativo.
3. Para cada uno de los túneles arrancados con éxito, el campo External Domain (si lo dejaste vacío antes) mostrará ahora la URL pública asignada por Ngrok.
4. Verificar el acceso:
   • Puedes copiar la URL haciendo clic en el ícono de copiar al lado del dominio externo.
   • O hacer clic en el ícono de navegador (usualmente una brújula o globo terráqueo) para abrir la URL en tu navegador predeterminado.
   • Si todo funciona correctamente, deberías poder acceder a tu sitio local mediante la URL de Ngrok.

5. Gestión de Túneles Ngrok

En la interfaz de configuración de Ngrok en ServBay:

• Copiar dominio externo: Haz clic en el ícono de copiar para facilitar su reparto.
• Abrir en navegador: Haz clic en el ícono de navegador para probar rápidamente el acceso.
• Agregar túnel: Haz clic en el ícono +.
• Eliminar túnel: Haz clic en el ícono - para borrar una configuración de túnel que ya no necesites.
• Detener servicio: Puedes encender o apagar el servicio completo de Ngrok usando el interruptor junto al servicio en la lista. Al volver a hacer clic intentará arrancar el servicio.

Consideraciones Importantes

• Limitaciones en la versión gratuita de Ngrok: Los dominios públicos creados son dinámicos y cambian cada vez que reinicias el servicio o el túnel. Además, existen restricciones en número de conexiones, ancho de banda y duración de uso. Si necesitas dominios fijos o funciones avanzadas, considera actualizarte a un plan de pago.
• Estado del servicio local: Asegúrate de que el sitio que seleccionaste en Local Domain esté funcionando correctamente en ServBay (por ejemplo, versión de PHP y servidor web como Nginx/Apache correctamente configurados y activos). Ngrok solo reenvía el tráfico y no puede iniciar ni reparar tu servicio local.
• Cortafuegos: Verifica que el firewall de macOS o software de seguridad de terceros no bloqueen el tráfico de ServBay o Ngrok.
• HTTPS: Ngrok provee soporte HTTPS de manera predeterminada, lo cual es indispensable para el desarrollo y pruebas modernas de aplicaciones web.

Preguntas Frecuentes (FAQ)

• P: El servicio de Ngrok falla al arrancar y el indicador está en rojo o naranja, ¿qué hago?
  • R: Primero revisa que el Authtoken de Ngrok esté correctamente ingresado. Luego, verifica tu conexión a Internet y que puedas abrir el sitio oficial de Ngrok. Consulta los logs del servicio (hay un ícono de registro/log a la derecha del servicio) para detalles del error.
• P: Soy usuario gratuito de Ngrok, ¿por qué el campo External Domain está vacío o muestra "Leave blank if you're a free user"?
  • R: Es lo esperado. Los usuarios gratuitos no necesitan llenar este campo. Una vez el túnel arranque exitosamente, ServBay mostrará la URL pública aleatoria asignada por Ngrok en este campo.
• P: ¿Puedo usar Ngrok junto a otros servicios de túneles como frp o Cloudflared?
  • R: ServBay permite instalar y configurar múltiples servicios de túnel. Normalmente puedes habilitar uno u otro según tu necesidad. Ejecutar varios servicios de túneles a la vez para el mismo sitio puede complicar o crear conflictos en la configuración de red, así que hazlo con precaución y asegurándote de entender la ruta de tráfico.

Resumen

La integración de Ngrok en ServBay simplifica enormemente el proceso de exponer tu entorno local de desarrollo en macOS a la red pública. Ya sea para demostraciones rápidas, pruebas de integración con Webhooks o para compartir avances con colaboradores, la función de Ngrok en ServBay es una solución eficiente y práctica. Recuerda configurar correctamente el dominio externo según tu tipo de cuenta Ngrok (gratis o de pago) y asegúrate siempre de que tus servicios locales estén activos y funcionando.