Hardening de Linux VPS, Caddy HTTP/3 y Resiliencia Móvil: Del Chatbot Comercial a la Producción Estable

El Reto Técnico de la Jornada

Operar como Senior Full-Stack & AI Automation Engineer significa no limitarse a redactar prompts o diseñar interfaces en React: implica responsabilizarse del ciclo operativo de extremo a extremo, desde el kernel de Linux hasta los microsegundos del renderizado en navegadores móviles.

Hoy enfrentamos tres frentes críticos simultáneos:

1. Estabilidad de Servicios y Dominios Multi-Tenant: Incidentes de routing en landings clave (clepsidravioleta, briefs desalineados y colisión de dominios secundarios).
2. Bugs de Runtime en Safari iOS: Reportes de «se rompió el sitio» específicos de iPhone, derivados de componentes no tolerantes a hidratación y duplicidad de botones flotantes de WhatsApp.
3. Hardening de Infraestructura y Respaldo Inmutable: Consolidación del perímetro defensivo en nuestro Linux VPS con cortafuegos estricto, mitigación de intrusiones y snapshots cifrados automatizados hacia un canal privado en Telegram.

---

1. Hardening del VPS: Caddy HTTP/3, UFW y Fail2ban

Nuestra premisa de infraestructura es minimalismo y tolerancia a fallos. Descartamos configuraciones barrocas en favor de políticas estrictas por defecto.

Cortafuegos UFW y Mitigación

Configuramos el firewall para rechazar cualquier tráfico que no corresponda a los túneles administrativos y de tráfico web seguro:

# Política base: DROP entrante estricto
sudo ufw default deny incoming
sudo ufw default allow outgoing
sudo ufw allow 22/tcp comment 'SSH bastión'
sudo ufw allow 80/tcp comment 'HTTP ACME challenge'
sudo ufw allow 443/tcp comment 'HTTPS TLS 1.3'
sudo ufw allow 443/udp comment 'HTTP/3 QUIC'
sudo ufw enable

Adicionalmente, desplegamos Fail2ban con dos cárceles operativas (sshd y docker-auth) para mitigar escaneos de fuerza bruta de manera inmediata.

Caddy con HTTP/3 Nativo

En el borde, Caddy gestiona la terminación TLS 1.3 y la negociación HTTP/3 vía UDP/443 sin fricciones, aislando cada vhost para que un cambio en un dominio satélite jamás impacte los servicios centrales:

gatocolectivo.com {
    encode zstd gzip
    reverse_proxy 127.0.0.1:3000 {
        header_up Host {host}
        header_up X-Real-IP {remote_host}
    }
    header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
    header X-Content-Type-Options "nosniff"
    header X-Frame-Options "DENY"
}

Backups Automatizados a Telegram Vault

Para la persistencia, evitamos depender de almacenamiento local efímero. Un script programado en systemd empaqueta snapshots de base de datos, los comprime con cifrado y los transmite directamente a nuestro canal privado de Telegram vía Bot API:

#!/usr/bin/env bash
set -euo pipefail
BACKUP_DATE=$(date +%Y%m%d_%H%M%S)
ARCHIVE="/tmp/db_snapshot_${BACKUP_DATE}.sql.gz"

# Dump & compresión
docker exec -t postgres_prod pg_dump -U postgres app_db | gzip -9 > "$ARCHIVE"

# Envío seguro al Telegram Vault
curl -s -F chat_id="${TELEGRAM_ADMIN_CHAT_ID}" \
     -F document=@"${ARCHIVE}" \
     -F caption="🛡️ Snapshot automatizado DB: ${BACKUP_DATE}" \
     "https://api.telegram.org/bot${TELEGRAM_BACKUP_BOT_TOKEN}/sendDocument"

rm -f "$ARCHIVE"

---

2. Depuración Frontend: Safari iOS y Microinteracciones

El error «se rompió el sitio» reportado en iPhone provenía de una colisión entre el hook de hidratación del menú hamburguesa y el evento táctil en WebKit móvil, sumado a un bundle duplicado que inyectaba dos triggers flotantes de WhatsApp.

Solución al Menú Móvil y Evitar Layout Shifts

Refactorizamos el menú móvil desacoplando el estado global del portal DOM y garantizando una renderización segura sin disparar WebKit quirks:

// components/navigation/MobileMenu.tsx
"use client";

import { useState, useEffect } from "react";
import Link from "next/link";

export function MobileMenu() {
  const [isOpen, setIsOpen] = useState(false);

  // Prevenir scroll de fondo de forma segura en iOS WebKit
  useEffect(() => {
    document.body.style.overflow = isOpen ? "hidden" : "unset";
    return () => { document.body.style.overflow = "unset"; };
  }, [isOpen]);

  return (
    <nav className="md:hidden" aria-label="Navegación móvil">
      <button
        onClick={() => setIsOpen((prev) => !prev)}
        className="p-2 text-white focus:outline-none focus:ring-2 focus:ring-accent-500"
        aria-expanded={isOpen}
        aria-label="Alternar menú"
      >
        <span className="sr-only">Abrir menú principal</span>
        <div className={`hamburger-icon ${isOpen ? "open" : ""}`} />
      </button>

      {isOpen && (
        <div className="fixed inset-0 z-50 bg-black/90 backdrop-blur-md flex flex-col items-center justify-center space-y-6">
          <Link href="/brief" onClick={() => setIsOpen(false)} className="text-xl font-medium text-white hover:text-accent-400 transition-colors">
            Completar Brief
          </Link>
          <Link href="/portfolio" onClick={() => setIsOpen(false)} className="text-xl font-medium text-zinc-300 hover:text-white transition-colors">
            Portafolio
          </Link>
        </div>
      )}
    </nav>
  );
}

Asimismo, unificamos el componente de mensajería eliminando el botón huérfano para mantener un único punto de contacto flotante consistente.

---

3. Asistente Conversacional para WhatsApp: Criterio Técnico Primero

Diseñamos e implementamos la especificación para el agente técnico de WhatsApp, asegurando un tono consultivo de alto nivel:

• Respuestas técnicas antes de la guía comercial: Si preguntan por integraciones, se analiza la viabilidad en 1-2 líneas sin enviar al usuario a enlaces genéricos.
• Cero presupuestos a ciegas: No se ofrecen cifras sin conocer stack, proveedores o volumen de datos.
• Calificación contextual sin fricción: Si el cliente tiene urgencia, se hacen 2 preguntas puntuales en el chat y se estructura la propuesta a la medida.

---

Conclusión y Aprendizajes

La excelencia técnica no radica en acumular capas complejas, sino en dominar los fundamentos: cortafuegos sencillos pero impenetrables, proxies rápidos con protocolos modernos (HTTP/3), interfaces móviles probadas en WebKit real y automatizaciones que salvaguardan los datos del negocio silenciosamente cada noche.

¿Tienes cuellos de botella en tu infraestructura o necesitas automatizaciones de IA verdaderamente robustas para tu operación?

👉 Conoce más de mis soluciones y casos de estudio en andresmorales.com.co.