Servicio que crea un túnel público a tu localhost. Guía Completa: LocalWP + ngrok

Guía Completa: LocalWP + ngrok

¿Qué es ngrok?

Servicio que crea un túnel público a tu localhost. Más simple que Cloudflare Tunnel para empezar.

---

Paso 1: Instalar LocalWP

1. Descarga desde: https://localwp.com
2. Instala (Windows/Mac/Linux)
3. Crea un nuevo sitio WordPress:
   • Click en "+ Add Local Site"
   • Nombre: cliente-demo
   • Usa configuración por defecto
4. Inicia el sitio (botón Start site)

---

Paso 2: Instalar ngrok

Windows:

Opción A - Descarga directa:

1. Ve a https://ngrok.com/download
2. Descarga el .zip para Windows
3. Extrae ngrok.exe en una carpeta (ej: C:\ngrok\)
4. Añade esa carpeta al PATH o úsalo desde ahí

Opción B - Con Chocolatey:

choco install ngrok

macOS:

brew install ngrok/ngrok/ngrok

Linux:

curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | \ sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && \ echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | \ sudo tee /etc/apt/sources.list.d/ngrok.list && \ sudo apt update && sudo apt install ngrok

---

Paso 3: Crear Cuenta en ngrok (Gratis)

1. Ve a https://dashboard.ngrok.com/signup
2. Regístrate gratis
3. Ve a Your Authtoken: https://dashboard.ngrok.com/get-started/your-authtoken
4. Copia tu token

---

Paso 4: Conectar ngrok con tu cuenta

ngrok config add-authtoken TU_TOKEN_AQUI

Ejemplo:

ngrok config add-authtoken 2abcd1234efgh5678ijkl9012mnop3456

---

Paso 5: Encontrar el Puerto de LocalWP

Método 1 - Desde LocalWP:

1. Click derecho en tu sitio
2. "Open Site Shell"
3. Mira la URL que aparece en el navegador
4. Anota el puerto (suele estar después de localhost:)

Método 2 - Archivo de configuración:

1. En LocalWP, click en el sitio
2. Ve a la pestaña "Overview"
3. Busca "Site Domain" - ejemplo: cliente-demo.local
4. El puerto suele ser el estándar: 80

Método 3 - Mirar en la URL:

Si la URL es http://cliente-demo.local, el puerto es 80 Si es http://localhost:10005, el puerto es 10005

---

Paso 6: Iniciar ngrok

Abre una terminal/CMD y ejecuta:

ngrok http PUERTO

Ejemplos según tu configuración:

Si LocalWP usa puerto 80:

ngrok http 80

Si LocalWP usa puerto específico (ej: 10005):

ngrok http 10005

Si tu sitio es https en local:

ngrok http https://localhost:PUERTO

---

Paso 7: Obtener la URL Pública

Después de ejecutar ngrok, verás algo así:

ngrok Session Status online
Account [email protected]
Version 3.x.x
Region Europe (eu)
Latency 15ms
Web Interface http://127.0.0.1:4040
Forwarding https://abc123def.ngrok-free.app -> http://localhost:80 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00

Tu URL pública es: https://abc123def.ngrok-free.app

---

Paso 8: Configurar WordPress para la Nueva URL

Opción 1: Plugin wp-cli desde LocalWP (Más fácil)

1. Click derecho en tu sitio en LocalWP
2. "Open Site Shell"
3. Ejecuta:

wp search-replace 'http://cliente-demo.local' 'https://abc123def.ngrok-free.app' --all-tables

Opción 2: Editar wp-config.php

1. En LocalWP, click derecho → "Go to Site folder"
2. Abre app/public/wp-config.php
3. Añade ANTES de /* That's all, stop editing! */:

// Configuración para ngrok
if (isset($_SERVER['HTTP_X_ORIGINAL_HOST'])) { define('WP_HOME', 'https://' . $_SERVER['HTTP_X_ORIGINAL_HOST']); define('WP_SITEURL', 'https://' . $_SERVER['HTTP_X_ORIGINAL_HOST']); $_SERVER['HTTPS'] = 'on';
}

Opción 3: Plugin Better Search Replace

1. Instala "Better Search Replace" desde el admin de WordPress
2. Ve a Herramientas → Better Search Replace
3. Buscar: http://cliente-demo.local
4. Reemplazar con: https://tu-url.ngrok-free.app
5. Selecciona todas las tablas
6. ✅ Marca "Run as dry run" primero (prueba)
7. Si todo OK, desmarca y ejecuta de verdad

---

Paso 9: Compartir con el Cliente

Simplemente envía la URL:

https://abc123def.ngrok-free.app

Nota: En el plan gratuito, los visitantes verán una página de advertencia de ngrok antes. Click en "Visit Site" para continuar.

---

Plan Gratuito vs Pagado

Plan Gratuito (suficiente para demos):

✅ Túneles ilimitados
✅ HTTPS automático
✅ 40 conexiones/minuto
⚠️ URL cambia cada vez que reinicias ngrok
⚠️ Página de advertencia para visitantes
⚠️ Sesión expira a las 2 horas (puedes reiniciar)

Plan Paid ($8/mes):

✅ URLs personalizadas fijas: cliente1.tudominio.ngrok.app
✅ Sin página de advertencia
✅ Sin límite de tiempo
✅ Más conexiones simultáneas

---

Comandos Útiles

Especificar región:

ngrok http 80 --region eu

Con subdominio personalizado (requiere plan de pago):

ngrok http 80 --domain=cliente-demo.ngrok.app

Ver todas las peticiones HTTP:

Ve a: http://localhost:4040 (Interfaz web de ngrok para debugging)

Ejecutar en background:

Linux/Mac:

ngrok http 80 > /dev/null &

Windows: Usa otra ventana de CMD

---

Flujo de Trabajo Completo

Primera vez con un cliente:

1. Crear sitio en LocalWP Nombre: cliente-acme
2. Iniciar el sitio
   • Click en "Start site" en LocalWP
3. Desarrollar el sitio
   • Instala tema, plugins, contenido
4. Cuando el cliente quiera verlo: ngrok http 80
5. Configurar WordPress: # En LocalWP → Open Site Shell: wp search-replace 'http://cliente-acme.local' 'https://URL-NGROK' --all-tables
6. Enviar URL al cliente
7. Después de la demo:
   • Ctrl+C para cerrar ngrok
   • Revertir URLs:
   wp search-replace 'https://URL-NGROK' 'http://cliente-acme.local' --all-tables

---

Trucos y Tips

1. Mantener URL fija en plan gratuito

Guarda tu URL en un archivo de texto cada vez:

ngrok http 80 | tee ngrok-url.txt

2. Script para automatizar (Windows PowerShell):

Crea iniciar-demo.ps1:

# Iniciar ngrok
Start-Process powershell -ArgumentList "ngrok http 80"
Start-Sleep -Seconds 3 # Obtener URL
$url = Invoke-RestMethod http://localhost:4040/api/tunnels | Select-Object -ExpandProperty tunnels | Select-Object -ExpandProperty public_url -First 1 # Mostrar URL
Write-Host "URL para el cliente: $url" -ForegroundColor Green # Copiar al portapapeles
Set-Clipboard $url
Write-Host "URL copiada al portapapeles!" -ForegroundColor Yellow

3. Script para Linux/Mac:

Crea iniciar-demo.sh:

#!/bin/bash
# Iniciar ngrok en background
ngrok http 80 &
sleep 3 # Obtener y mostrar URL
URL=$(curl -s http://localhost:4040/api/tunnels | jq -r '.tunnels[0].public_url')
echo "URL para el cliente: $URL" # Copiar al portapapeles (Mac)
echo $URL | pbcopy
echo "URL copiada al portapapeles!"

4. Configuración permanente en wp-config.php:

// Detectar si estamos en ngrok
if (strpos($_SERVER['HTTP_HOST'], 'ngrok') !== false) { define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST']); define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST']); $_SERVER['HTTPS'] = 'on';
}

Así no necesitas hacer search-replace cada vez.

---

Solución de Problemas

Error: "command not found: ngrok"

• Verifica que ngrok esté instalado correctamente
• En Windows, usa la ruta completa: C:\ngrok\ngrok.exe http 80

El sitio se ve sin CSS/JS:

• Haz el search-replace de URLs correctamente
• Añade el código de wp-config.php para detectar ngrok

"Too many redirects":

Añade en wp-config.php:

$_SERVER['HTTPS'] = 'on';

Puerto ocupado:

Cambia el puerto:

ngrok http 8080

ngrok se cierra solo:

• En plan gratuito, las sesiones expiran a las 2 horas
• Simplemente reinicia: ngrok http 80

---

Comparación: ngrok vs Cloudflare Tunnel

Característica	ngrok (gratis)	Cloudflare Tunnel
Instalación	Más simple	Un poco más compleja
Configuración inicial	2 minutos	5-10 minutos
URL fija	❌ (cambia)	✅ Con dominio
Página advertencia	✅ Sí	❌ No
Límite de tiempo	2 horas/sesión	Sin límite
Interfaz debug	✅ Excelente	❌ No
Ideal para	Demos rápidas	Uso permanente

---

Resumen Ultra Rápido

# 1. Instalar ngrok
brew install ngrok/ngrok/ngrok # Mac
# o descarga desde ngrok.com # 2. Conectar cuenta
ngrok config add-authtoken TU_TOKEN # 3. Iniciar LocalWP
# Click en "Start site" # 4. Exponer a internet
ngrok http 80 # 5. Compartir la URL que aparece
https://abc123.ngrok-free.app

¡Listo en menos de 5 minutos! 🚀