API
23 min read
39 views

Dominando el desarrollo de Webhooks locales: Guía para túneles HTTPS persistentes en Shopify, Slack y Discord

¿Cansado de los timeouts de 2 horas en túneles que rompen webhooks de Shopify o URLs aleatorios que afectan bots de Discord y Slack? Descubre cómo URLs persistentes aceleran las pruebas locales. Tiempos de túnel de 2 horas que se reinician.

IT
InstaTunnel Team
Published by the InstaTunnel team | Editorial policy
Dominando el desarrollo de Webhooks locales: Guía para túneles HTTPS persistentes en Shopify, Slack y Discord

Quick answer

Guía de desarrollo en Shopify y bots: Soluciona webhooks locales: quick answer

If free tunnel limits interrupt your workflow, compare session length, stable URLs, concurrent tunnels, and paid-plan pricing before choosing a localhost tunnel tool.

What free tunnel limits should developers check first?

Check session duration, URL stability, concurrent tunnels, custom subdomains, bandwidth or request limits, and whether webhook callbacks survive restarts.

How does InstaTunnel handle longer development sessions?

InstaTunnel Free is designed around 24-hour sessions, with Pro available for higher limits and MCP endpoint tunnel workflows.

Construir software moderno depende en gran medida de integraciones con terceros. Ya sea procesando eventos del ciclo de vida de pedidos en Shopify, ejecutando comandos slash en Slack o manejando interacciones con componentes interactivos en Discord, tu entorno de desarrollo local debe exponer un endpoint HTTPS seguro y accesible públicamente.

Cuando plataformas de terceros se comunican con tu aplicación, lo hacen a través de webhooks y callbacks HTTPS usando internet público. Sin embargo, tu servidor local generalmente corre en http://localhost:3000 o http://127.0.0.1:8000, lo cual no es accesible desde fuera. Las herramientas de túnel HTTP local resuelven esta brecha creando un puente cifrado entre una URL pública y tu máquina local.

A pesar de su conveniencia, las herramientas de túnel gratuitas estándar introducen fricción significativa en los flujos de trabajo diarios: * Timeouts de sesión: Los túneles suelen expirar después de 1 a 2 horas, interrumpiendo sprints de desarrollo enfocados. * URLs efímeros: Cada reinicio del túnel genera un subdominio aleatorio (por ejemplo, https://a1b2-c3d4.ngrok-free.app), lo que obliga a actualizar manualmente los paneles de socios. * Flujos OAuth interrumpidos: URLs inválidas rompen el estado de sesión durante los handshakes OAuth, requiriendo reinicios tediosos.

Esta guía ofrece una visión completa de cómo los endpoints persistentes y sesiones de larga duración simplifican el desarrollo local para desarrolladores de apps en Shopify, bots en Discord y creadores de apps en Slack.


Parte 1: La guía del desarrollador de apps en Shopify: Manteniendo webhooks estables durante sprints de 24 horas

Arquitectura del desarrollo local en Shopify

Desarrollar aplicaciones embebidas en Shopify o soluciones personalizadas requiere comunicación bidireccional continua entre tu servidor local y la plataforma Shopify.

+------------------+                    +---------------------+                    +----------------------+
|                  |   Webhook HTTPS    |                     |   Reenviar solicitud |                      |
|  Plataforma Shopify| -----------------> | Borde del túnel público | -----------------> | Webhooks en localhost |
|  (Eventos/OAuth)  |                    | (InstaTunnel Edge)  |                    | (http://localhost)   |
|                  | <----------------- |                     | <----------------- |                      |
+------------------+   Respuesta (200)  +---------------------+   Respuesta (200)  +----------------------+

Shopify aplica políticas de seguridad estrictas en dos pilares principales:

  1. Flujo de autorización OAuth 2.0: Cuando un comerciante instala o lanza una app embebida en Shopify dentro del Admin, Shopify envía una solicitud a la URL de la app y verifica los URIs de redirección. Todas las URLs deben usar HTTPS y responder sin advertencias de SSL.
  2. Suscripciones a Webhooks de eventos: Shopify envía cargas útiles JSON asincrónicas para eventos de tienda —como orders/create, products/update, o app/uninstalled— a endpoints registrados en tu configuración o suscripciones dinámicas GraphQL.

Al probar estas integraciones localmente, tu aplicación depende de un túnel proxy para enrutar el tráfico entrante de Shopify a tu puerto local.


El costo oculto de los timeouts en túneles durante sprints de desarrollo

Un punto principal de fricción en el desarrollo de apps en Shopify es la sesión efímera del túnel. Las versiones gratuitas en túneles populares imponen límites de sesión, cerrando túneles tras 1 a 2 horas de inactividad o uso continuo.

1. Cambio de contexto y fatiga en el panel

Cuando un túnel expira a mitad de sprint: 1. La URL pública colapsa, causando que los webhooks posteriores fallen con 404 No Encontrado o Conexión rechazada. 2. Shopify marca tu endpoint de webhook como fallido. Las fallas persistentes activan el algoritmo de retroceso automático de webhooks de Shopify, deshabilitando eventualmente las suscripciones de eventos. 3. Debes abrir una terminal, volver a ejecutar el CLI de túnel, copiar el nuevo dominio aleatorio, acceder al panel de socios de Shopify, localizar la configuración de la app, actualizar la URL de la app y las URLs de redirección permitidas, y volver a ejecutar tus herramientas de sincronización (como shopify app config push).

En promedio, un desarrollador pierde 10 a 15 minutos por caída del túnel. En un sprint de 8 horas con 3–4 reinicios forzados, se pierde más de una hora de desarrollo activo en tareas administrativas.

2. Estado OAuth fragmentado y sesiones locales rotas

La autenticación en apps Shopify depende en gran medida de tokens de sesión y verificación Cookie/HMAC. Cambiar la URL pública invalida los tokens de sesión almacenados en tu base de datos.

Durante una prueba de sesión activa, un reinicio del túnel obliga a que el iframe del App Bridge embebido en tu navegador solicite recursos desde un dominio antiguo y fallido. Esto se manifiesta como errores CORS Policy o bucles de redirección OAuth infinitos en el panel de Shopify. Solucionar estos problemas suele hacer que los desarrolladores sospechen de su código, cuando la causa real es simplemente una sesión de túnel expirada.

3. Manejadores de webhooks asincrónicos incompletos

Probar workers en segundo plano de larga duración —como sincronización de inventario masiva o exportaciones GDPR— requiere seguir la ejecución del webhook durante varias horas. Si el túnel cae a mitad de proceso, la respuesta de callback nunca llega a localhost. Como resultado, las pruebas de workers en cola multi-etapa se vuelven poco confiables.


Implementando sesiones de túnel de larga duración

Para mantener un flujo de desarrollo sin interrupciones, los desarrolladores necesitan túneles que duren tanto como los sprints de codificación. InstaTunnel soluciona esto ofreciendo persistencia de sesión gratuita de 24 horas, eliminando desconexiones a mitad del día.

Implementación paso a paso para Shopify CLI

A continuación, una configuración práctica para integrar InstaTunnel en un flujo de trabajo estándar con Shopify Node/Remix o PHP.

+---------------------------------------------------------------------------------+
|                        ENTORNO LOCAL DEL DESARROLLADOR                        |
|                                                                                 |
|  +--------------------+         +--------------------+                          |
|  |  Shopify App CLI   |         |  Agente InstaTunnel |                          |
|  |  (Backend de app)  |         |  (Fondo)            |                          |
|  |  Puerto: 3000       |         |  Puerto: 3000       |                          |
|  +---------+----------+         +---------+----------+                          |
|            ^                              ^                                     |
+------------|------------------------------|-------------------------------------+
             |                              |
             v                              v
+---------------------------------------------------------------------------------+
|                         RED SEGURA DE INSTATUNNEL                                |
|                                                                                 |
|  Punto final persistente: https://shopify-dev-sprint.instatunnel.com             |
|  * TTL de sesión activa de 24 horas                                              |
|  * Subdominio persistente a través de reinicios de sesión                        |
+---------------------------------------------------------------------------------+

Paso 1: Instalar y autenticar el cliente de túnel

Instala el binario o paquete mediante tu gestor de paquetes preferido:

# Instalar InstaTunnel globalmente
npm install -g instatunnel-cli

# Verificar instalación y comenzar una sesión de larga duración
instatunnel http 3000 --session-ttl 24h

Paso 2: Configurar tu proyecto en Shopify

En la raíz de tu proyecto, actualiza tu archivo shopify.app.toml para apuntar directamente a tu endpoint persistente en lugar del túnel automático generado por Shopify CLI:

# shopify.app.toml
name = "inventory-sync-app"
client_id = "shpxa_1234567890abcdef"
application_url = "https://shopify-dev-sprint.instatunnel.com"

[access_scopes]
scopes = "read_products,write_products,read_orders"

[auth]
redirect_urls = [
  "https://shopify-dev-sprint.instatunnel.com/api/auth/callback"
]

[webhooks]
api_version = "2026-04"

  [[webhooks.subscriptions]]
  topics = [ "orders/create" ]
  uri = "https://shopify-dev-sprint.instatunnel.com/api/webhooks"

Paso 3: Ejecutar el servidor de desarrollo

Pasa la bandera --tunnel-url al CLI de Shopify para que reutilice tu túnel de larga duración en lugar de crear uno efímero:

shopify app dev --tunnel-url=https://shopify-dev-sprint.instatunnel.com:3000

Mejores prácticas para probar webhooks de Shopify localmente

1. Implementar verificación de firma inmediatamente

Shopify firma cada solicitud de webhook usando un hash HMAC SHA-256 en el encabezado X-Shopify-Hmac-SHA256. Asegúrate de validar esta firma en tu servidor local antes de procesar las cargas útiles:

import crypto from 'crypto';

function verifyShopifyWebhook(req, rawBody, secret) {
  const hmacHeader = req.headers['x-shopify-hmac-sha256'];
  const generatedHmac = crypto
    .createHmac('sha256', secret)
    .update(rawBody, 'utf8')
    .digest('base64');

  return crypto.timingSafeEqual(
    Buffer.from(hmacHeader),
    Buffer.from(generatedHmac)
  );
}

2. Desacoplar ingestión de webhooks del procesamiento

Responde a Shopify con un código HTTP 200 OK en menos de 5 segundos para evitar errores de timeout. Desplaza la ejecución real (por ejemplo, actualizar registros en base de datos o enviar correos transaccionales) a una cola de trabajo en segundo plano como Redis, BullMQ o Celery.

3. Repetir webhooks sin activar eventos en tienda en vivo

En lugar de activar manualmente pasos de checkout en una tienda de prueba cada vez que ajustas código, usa las herramientas de inspección de cargas útiles en tu entorno local o fixtures JSON guardados para reenviar cargas directamente a tu puerto local activo (localhost:3000/api/webhooks).


Parte 2: Crear bots en Slack y Discord más rápido: por qué los subdominios personalizados son obligatorios para interfaces conversacionales

Modelo de callback en interfaces conversacionales

A diferencia de los endpoints REST estándar que responden directamente a solicitudes iniciadas por el cliente, plataformas conversacionales como Slack y Discord dependen en gran medida de modelos de callback impulsados por eventos.

+-----------------------------------------------------------------------------------+
|                             PLATAFORMAS DISCORD Y SLACK                            |
+-----------------------------------------------------------------------------------+
       | Componente interactivo          | Comando slash             | Manejador de eventos
       | (Clic en botón)                 | (/deploy-prod)            | (Mensaje creado)
       v                                v                          v
+-----------------------------------------------------------------------------------+
|                      URL de portal de desarrollador codificada                        |
|                       https://my-bot-dev.instatunnel.com                            |
+-----------------------------------------------------------------------------------+
                                        |
                                        v
+-----------------------------------------------------------------------------------+
|                            ENTORNO LOCAL DE DESARROLLO                              |
|                             http://localhost:8080                                 |
+-----------------------------------------------------------------------------------+

Cómo Discord interactúa con bots locales

  • Endpoints de interacciones: Discord permite a los desarrolladores enrutar comandos slash (/help), acciones del menú contextual y clics en botones/menús de selección a un ENDPOINT DE INTERACCIONES URL. Este endpoint debe responder con 200 OK o 204 No Content junto con una firma criptográfica válida (Ed25519) en 3 segundos.
  • Gateway vs. Interacciones HTTP: Aunque existen conexiones WebSocket para estados en tiempo real, los bots de Discord sin servidor y escalables usan exclusivamente Endpoints de Interacción HTTP, requiriendo un punto de entrada HTTPS estable durante desarrollo local.

Cómo Slack interactúa con bots locales

  • Comandos slash y suscripciones a eventos: Cuando un usuario escribe un comando o publica un mensaje en un canal donde tu app está instalada, Slack envía una solicitud POST HTTP a tu URL de solicitud configurada.
  • Componentes interactivos: Modales, botones de block-kit y menús de selección múltiple requieren una URL de solicitud de interactividad fija.
  • Desafío de verificación de URL: Cuando ingresas una URL nueva en el directorio de apps de Slack, Slack envía una solicitud POST con un parámetro challenge que tu servidor debe devolver para verificar propiedad.

Problemas con URLs dinámicos y aleatorios en portales de bots

Usar un túnel gratuito estándar que genera una URL dinámica en cada reinicio (por ejemplo, https://9a3f-124-50-12-1.ngrok-free.app) presenta varios desafíos para desarrolladores de bots:

+---------------------------------------------------------------------------------+
|                       TÚNELES DINÁMICOS vs. PERSISTENTES                          |
+---------------------------------------------------------------------------------+
| DINÁMICOS (Efímeros)                             PERSISTENTES (Subdominio personalizado) |
| -------------------                              ------------------------------ |
| 1. Reiniciar túnel                                1. Reiniciar túnel             |
| 2. Obtener URL nueva: https://xyz.ngrok.app        2. URL estática:             |
| 3. Abrir portal de Slack/Discord                     https://mybot.instatunnel.com|
| 4. Buscar Configuración - Interacciones            3. Comenzar a codificar inmediatamente! |
| 5. Pegar URL y aceptar desafío                     Sin necesidad de panel.        |
| 6. Repetir tras cada caída                        Sin configuración adicional. |
+---------------------------------------------------------------------------------+

1. Bucle manual de configuración en portal

Cada vez que un túnel efímero se reinicia, tu URL de interacción codificada en el portal de desarrollador se rompe.

Para restaurar la conectividad: 1. Copia la nueva dirección del túnel. 2. Ingresa al portal de desarrolladores de Discord o al panel de gestión API de Slack. 3. Abre la configuración específica de la app. 4. Navega a Interactividad y acciones o Información general. 5. Actualiza la URL, realiza la validación y guarda.

Hacer esto varias veces al día ralentiza la velocidad de iteración y distrae del desarrollo.

2. Deriva de callbacks en múltiples plataformas

Bots complejos que conectan a varias plataformas (ej. Slack, Discord, Webhooks de GitHub, Stripe) si cambian la URL del túnel: * Debes actualizar de 3 a 5 paneles administrativos antes de probar una notificación multiplataforma. * Olvidar actualizar uno genera errores no manejados y bugs en ejecución asíncrona.

3. Verificación de firma y handshake interrumpidos

Discord verifica interacciones HTTP usando criptografía de clave pública (Ed25519). Cuando la URL del endpoint cambia en medio de una sesión activa, los clientes de Discord pueden seguir enviando cargas a la URL antigua por minutos debido a caché DNS, causando errores 502 Bad Gateway o 504 Gateway Timeout, dificultando determinar si el problema está en tu código o en la capa de enrutamiento.


Solución estratégica: subdominios persistentes en túneles gratuitos

Proveer subdominios personalizados en la capa gratuita resuelve estos problemas desacoplando los reinicios del túnel local de las configuraciones externas.

Asignando un endpoint persistente —como https://my-discord-bot.instatunnel.com— tu entrada pública permanece estática sin importar cuántas veces reinicies, crashes o cambies puertos locales.

Configuración de subdominios persistentes para Discord y Slack

1. Configurar endpoint de interacciones en Discord

  1. Reserva tu subdominio persistente vía CLI de InstaTunnel:
instatunnel http 8080 --subdomain=my-discord-bot
  1. Abre el Portal de desarrolladores de Discord, selecciona tu aplicación y navega a Información general.

  2. En el campo URL de interacciones, ingresa tu dirección estática:

    https://my-discord-bot.instatunnel.com/api/interactions
    
  3. Discord enviará una carga de prueba con un PING (1). Asegúrate que tu app local valide las firmas en los encabezados (X-Signature-Ed25519 y X-Signature-Timestamp) y responda con {"type": 1}.

  4. Guarda cambios. Este endpoint funciona indefinidamente en sesiones de desarrollo diarias.

    +---------------------------------------------------------------------------------+
    |                       FLUJO DE RUTEO DEL BOT EN DISCORD                          |
    |                                                                                 |
    |  Discord --- https://my-discord-bot.instatunnel.com/api/interactions          |
    |                                       |                                         |
    |                               Borde de InstaTunnel                                |
    |                                       |                                         |
    |                                       v                                         |
    |                            http://localhost:8080                                |
    +---------------------------------------------------------------------------------+
    

2. Configurar comandos slash y componentes interactivos en Slack

  1. Inicia el túnel persistente apuntando a tu framework local (ej. Bolt JS, FastAPI):
instatunnel http 3000 --subdomain=dev-slack-app
  1. Abre la consola del Directorio de apps de Slack, selecciona tu app y actualiza:
    • Comandos slash: https://dev-slack-app.instatunnel.com/slack/commands
    • Interactividad y accesos directos: https://dev-slack-app.instatunnel.com/slack/events
    • Suscripciones a eventos: https://dev-slack-app.instatunnel.com/slack/events
  2. Slack envía automáticamente una carga POST con { challenge: "valor_string" }. Tu app debe devolver el valor en un 200 OK para verificar propiedad.
  3. Como la URL (dev-slack-app.instatunnel.com) es estática, puedes reiniciar tu servidor local sin actualizar configuraciones en Slack.

Comparación de características arquitectónicas

Capacidad / Métrica Túneles efímeros (gratuitos estándar) Túneles persistentes (InstaTunnel)
Duración máxima de sesión 1–2 horas 24 horas (nivel gratuito)
Tipo de subdominio Hash aleatorio (ej. a12b3c.ngrok.app) Subdominios estáticos personalizados
Estabilidad OAuth en Shopify Falla en timeout; requiere reinicio de sesión Mantiene estado continuamente
Sobrecarga de mantenimiento del portal Alta (5–10 actualizaciones diarias por desarrollador) Cero overhead tras configuración inicial
Integración de webhooks multi-servicio Reconfiguración manual en todos los paneles Un objetivo estático para todas las APIs conectadas
Inspección de cargas útiles Salida básica en terminal Registro estructurado de solicitudes y cuerpos

Deep dive técnico: Verificación segura de webhooks locales

Manejar tráfico externo localmente requiere medidas de seguridad robustas para proteger tu entorno de desarrollo.

1. Verificación criptográfica Ed25519 en Discord

Al manejar interacciones HTTP en Discord localmente, valida los encabezados entrantes usando librerías oficiales o verificaciones criptográficas personalizadas antes de procesar:

import { verifyKey } from 'discord-interactions';
import express from 'express';

const app = express();

// Discord requiere el cuerpo en crudo para validar firma
app.post('/api/interactions', express.raw({ type: 'application/json' }), (req, res) => {
  const signature = req.headers['x-signature-ed25519'] as string;
  const timestamp = req.headers['x-signature-timestamp'] as string;
  const publicKey = process.env.DISCORD_PUBLIC_KEY!;

  const isValid = verifyKey(req.body, signature, timestamp, publicKey);

  if (!isValid) {
    return res.status(401).send('Firma inválida');
  }

  const message = JSON.parse(req.body.toString());
  
  // Manejar PING de Discord
  if (message.type === 1) {
    return res.send({ type: 1 });
  }

  // Manejar comandos de aplicación
  if (message.type === 2) {
    return res.send({
      type: 4,
      data: { content: "¡Interacción recibida en localhost!" }
    });
  }
});

2. Verificación de solicitudes en Slack

Valida las solicitudes de Slack usando tu Secreto de firma para confirmar que el tráfico proviene de Slack y no de una fuente no autorizada:

import crypto from 'crypto';
import tsscmp from 'tsscmp';

function verifySlackSignature(req: express.Request, secret: string): boolean {
  const slackSig = req.headers['x-slack-signature'] as string;
  const timestamp = req.headers['x-slack-request-timestamp'] as string;

  // Rechazar solicitudes antiguas para prevenir ataques de repetición
  const fiveMinutesAgo = Math.floor(Date.now() / 1000) - (60 * 5);
  if (parseInt(timestamp, 10) < fiveMinutesAgo) {
    return false;
  }

  const sigBaseString = `v0:${timestamp}:${req.body}`;
  const mySig = 'v0=' + crypto
    .createHmac('sha256', secret)
    .update(sigBaseString, 'utf8')
    .digest('hex');

  return tsscmp(mySig, slackSig);
}

Conclusión: Eliminando fricciones en el desarrollo de webhooks

Construir software en ecosistemas complejos como Shopify, Slack y Discord requiere herramientas eficientes para iterar rápidamente. Confiar en túneles de corta duración con URLs dinámicas genera sobrecarga administrativa innecesaria, haciendo que los desarrolladores gasten tiempo reconfigurando plataformas externas en lugar de programar.

Adoptar túneles HTTP persistentes con sesiones de larga duración y subdominios estáticos resuelve estos problemas: * Desarrolladores de apps en Shopify: pueden realizar sprints de 24 horas sin flujos OAuth rotos ni suscripciones de webhook fallidas. * Creadores de bots en Slack y Discord: pueden configurar sus paneles una sola vez con una URL estática, enfocándose en funciones.

Al elegir soluciones de túnel diseñadas para ecosistemas, los equipos de ingeniería pueden simplificar pruebas locales, reducir fricciones en el entorno y acelerar entregas de integraciones.

Continue from this article into the most relevant product guides and workflows.

Related Topics

#Shopify webhook localhost testing#tunnel timeout Shopify#local Shopify app development proxy#Shopify partner dev tools#Shopify webhooks local proxy#fixed URL webhook tunnel#Shopify OAuth local testing#Shopify CLI local tunnel alternative#persistent localhost URL#Discord bot webhook localhost#Slack slash commands local testing#persistent localhost URLs for bots#local webhook debugging tool#fixed subdomain tunnel#free persistent localhost tunnel#reverse proxy for Shopify developers#test Shopify webhooks locally#local HTTP proxy for webhooks#Shopify HMAC verification local#Discord bot developer workflow#Slack app local manifest URL#test Discord webhooks local#long-lived localhost tunnel#24-hour tunnel free session#InstaTunnel Shopify integration#local webhook relay#dev tunnel for Shopify app#persistent HTTPS endpoint local#Shopify app development webhook setup#bypass ngrok session limits#ngrok alternative custom subdomain#test webhooks without tunnel reset#local dev server public URL#Shopify app OAuth redirect local

Keep building with InstaTunnel

Read the docs for implementation details or compare plans before you ship.

Share this article

More InstaTunnel Insights

Discover more tutorials, tips, and updates to help you build better with localhost tunneling.

Browse All Articles