Guía Completa: Cloudflare Tunnel para WordPress Local

¿Qué es Cloudflare Tunnel?

Permite exponer tu sitio local (localhost) a internet de forma segura sin abrir puertos en tu router. Totalmente GRATIS y sin límites.

---

Requisitos Previos

• WordPress funcionando en local (LocalWP, XAMPP, MAMP, etc.)
• Cuenta gratuita en Cloudflare
• Tu propio dominio (opcional, pero recomendado para aspecto profesional)

---

Método 1: Cloudflare Tunnel con CLI (Recomendado)

Paso 1: Instalar cloudflared

Windows:

# Descarga desde: https://github.com/cloudflare/cloudflared/releases
# O usa winget:
winget install cloudflare.cloudflared

macOS:

brew install cloudflared

Linux:

wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb
sudo dpkg -i cloudflared-linux-amd64.deb

Paso 2: Autenticarse en Cloudflare

cloudflared tunnel login

Esto abrirá tu navegador para autorizar. Selecciona el dominio que quieres usar.

Paso 3: Crear un Tunnel

cloudflared tunnel create mi-wordpress-demo

Guarda el Tunnel ID que te devuelve.

Paso 4: Configurar el Tunnel

Crea un archivo de configuración en:

• Windows: C:\Users\TuUsuario\.cloudflared\config.yml
• macOS/Linux: ~/.cloudflared/config.yml

tunnel: TU-TUNNEL-ID
credentials-file: /ruta/a/.cloudflared/TU-TUNNEL-ID.json ingress: - hostname: demo.tudominio.com service: http://localhost:8080 - service: http_status:404

Importante: Cambia:

• TU-TUNNEL-ID por el ID que obtuviste
• demo.tudominio.com por tu subdominio
• localhost:8080 por el puerto de tu WordPress local

Paso 5: Configurar DNS en Cloudflare

cloudflared tunnel route dns mi-wordpress-demo demo.tudominio.com

Paso 6: Ejecutar el Tunnel

cloudflared tunnel run mi-wordpress-demo

¡Listo! Tu sitio local ahora es accesible en https://demo.tudominio.com

---

Método 2: Cloudflare Tunnel sin dominio propio (Más rápido)

Si no tienes dominio, puedes usar un subdominio temporal de Cloudflare:

cloudflared tunnel --url http://localhost:8080

Esto te dará una URL temporal como:

https://random-words-123.trycloudflare.com

Ventajas:

• No necesitas dominio
• Instantáneo

Desventajas:

• URL aleatoria cada vez
• Menos profesional

---

Método 3: Cloudflare Zero Trust Dashboard (Interfaz gráfica)

Paso 1: Acceder al Dashboard

1. Ve a https://one.dash.cloudflare.com
2. Registra tu cuenta gratuita
3. Ve a Access → Tunnels

Paso 2: Crear Tunnel desde la Web

1. Click en "Create a tunnel"
2. Dale un nombre: wordpress-demos
3. Sigue las instrucciones para instalar el conector

Paso 3: Configurar la Ruta Pública

1. En Public Hostname, añade:
   • Subdomain: demo
   • Domain: tudominio.com
   • Service Type: HTTP
   • URL: localhost:8080
2. Guarda

---

Encontrar el Puerto de tu WordPress Local

LocalWP:

• Click derecho en tu sitio → Open Site Shell
• El puerto suele ser visible en la URL del sitio

XAMPP:

• Puerto por defecto: 80 o 8080
• URL: http://localhost o http://localhost:8080

MAMP:

• Preferencias → Ports
• Normalmente: 8888

---

Configurar WordPress para la Nueva URL

Opción 1: Desde wp-config.php

Añade estas líneas en wp-config.php (antes de "¡Eso es todo, deja de editar!"):

define('WP_HOME', 'https://demo.tudominio.com');
define('WP_SITEURL', 'https://demo.tudominio.com');

Opción 2: Desde la base de datos

Usando phpMyAdmin o Adminer:

UPDATE wp_options SET option_value = 'https://demo.tudominio.com' WHERE option_name IN ('siteurl', 'home');

Opción 3: Plugin (más fácil)

Instala el plugin "Better Search Replace":

1. Busca: http://localhost:8080
2. Reemplaza: https://demo.tudominio.com
3. Selecciona todas las tablas
4. Ejecuta

---

Comandos Útiles

Ver tunnels activos:

cloudflared tunnel list

Eliminar un tunnel:

cloudflared tunnel delete mi-wordpress-demo

Ver información de un tunnel:

cloudflared tunnel info mi-wordpress-demo

Ejecutar en background (Linux/Mac):

cloudflared tunnel run mi-wordpress-demo &

---

Flujo de Trabajo con Clientes

Para cada nuevo cliente:

1. Crea el sitio en LocalWP Sitio: cliente-acme URL local: http://localhost:10005
2. Inicia el tunnel temporal cloudflared tunnel --url http://localhost:10005
3. Envía la URL al cliente https://abc-def-123.trycloudflare.com
4. Cuando termine la demo, cierra el tunnel Ctrl + C en la terminal

Para demos profesionales con dominio:

Configura subdominios permanentes:

• cliente1.demos.tudominio.com
• cliente2.demos.tudominio.com
• cliente3.demos.tudominio.com

Cambia el puerto en config.yml según el sitio que quieras mostrar.

---

Ventajas de Cloudflare Tunnel

✅ Completamente gratuito
✅ HTTPS automático
✅ No necesitas abrir puertos
✅ Funciona detrás de cualquier firewall
✅ Sin límite de ancho de banda
✅ Protección DDoS incluida
✅ Puedes usar tu propio dominio

---

Solución de Problemas

El sitio se ve sin estilos:

• Verifica que WordPress tenga la URL correcta configurada
• Usa Better Search Replace para actualizar todas las URLs

Error "Too many redirects":

• Desactiva plugins de SSL/HTTPS
• Añade en wp-config.php:

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

El tunnel se desconecta:

• Ejecuta como servicio en background
• En Windows, usa NSSM para crear un servicio

Puerto incorrecto:

• Verifica el puerto exacto de tu WordPress local
• En LocalWP: Click derecho → Site Info

---

Alternativa: Ejecutar como Servicio

Windows (usando NSSM):

nssm install cloudflared-tunnel cloudflared tunnel run mi-wordpress-demo
nssm start cloudflared-tunnel

Linux (systemd):

sudo cloudflared service install
sudo systemctl start cloudflared
sudo systemctl enable cloudflared

---

Recursos

• Documentación oficial: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/
• Descargas: https://github.com/cloudflare/cloudflared/releases
• Dashboard: https://one.dash.cloudflare.com

---

Resumen Rápido

Para pruebas rápidas:

cloudflared tunnel --url http://localhost:PUERTO

Para configuración profesional:

1. Instala cloudflared
2. cloudflared tunnel login
3. cloudflared tunnel create nombre
4. Configura config.yml
5. cloudflared tunnel run nombre

¡Así de fácil! Tu WordPress local ahora es accesible desde cualquier parte del mundo.