Linux VPS Hardening, Caddy HTTP/3, and Mobile Resilience: From Conversational AI to Production Stability

The Engineering Challenge

Operating as a Senior Full-Stack & AI Automation Engineer means taking complete responsibility across the full stack—from Linux kernel security policies up to microsecond-level rendering performance across mobile browsers.

Today's priorities tackled three intersecting areas:

1. Multi-Tenant Domain Stability: Resolving routing issues and domain cross-talk on client landing pages.
2. WebKit & iOS Safari Bugs: Investigating and fixing client-side hydration crashes on mobile Safari, along with redundant floating action buttons.
3. Production Infrastructure Hardening: Strengthening perimeter defense on a Linux VPS via strict firewalling, active intrusion prevention, and automated database snapshots pushed to an encrypted Telegram vault.

---

1. Production VPS Hardening: Caddy HTTP/3, UFW & Fail2ban

Our infrastructure philosophy is centered on minimalism and strict isolation. We reject unneeded complexity in favor of resilient defaults.

Strict Firewalling with UFW

We lock down every non-essential port, exposing only authenticated bastion access and secure web transport:

# Base policy: strict inbound drop
sudo ufw default deny incoming
sudo ufw default allow outgoing
sudo ufw allow 22/tcp comment 'Bastion SSH'
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

Combined with Fail2ban monitoring sshd and docker-auth jails, unauthorized scans are throttled immediately at the socket level.

Edge Proxy with Native HTTP/3

Caddy provides automatic TLS 1.3 certificates and full HTTP/3 (QUIC) negotiation via UDP/443 without performance overhead:

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"
}

Automated Telegram Vault Backups

Database reliability requires off-site redundancy. A lightweight systemd cron job exports encrypted snapshots directly to a private Telegram channel via 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 & compress
docker exec -t postgres_prod pg_dump -U postgres app_db | gzip -9 > "$ARCHIVE"

# Ship to secure Telegram Vault
curl -s -F chat_id="${TELEGRAM_ADMIN_CHAT_ID}" \
     -F document=@"${ARCHIVE}" \
     -F caption="🛡️ Automated DB Snapshot: ${BACKUP_DATE}" \
     "https://api.telegram.org/bot${TELEGRAM_BACKUP_BOT_TOKEN}/sendDocument"

rm -f "$ARCHIVE"

---

2. Mobile Debugging: Eliminating WebKit Hydration Errors

Mobile users reported an unexpected crash on iPhone Safari. Root-cause analysis revealed an unhandled event listener race condition inside the mobile menu alongside duplicate WhatsApp button mounts.

Resilient Mobile Navigation Component

We refactored the navigation bar to guarantee deterministic mounting and prevent body layout shifts on iOS Safari:

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

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

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

  // Prevent body scroll safely on iOS WebKit
  useEffect(() => {
    document.body.style.overflow = isOpen ? "hidden" : "unset";
    return () => { document.body.style.overflow = "unset"; };
  }, [isOpen]);

  return (
    <nav className="md:hidden" aria-label="Mobile navigation">
      <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="Toggle menu"
      >
        <span className="sr-only">Open main menu</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">
            Complete Brief
          </Link>
          <Link href="/portfolio" onClick={() => setIsOpen(false)} className="text-xl font-medium text-zinc-300 hover:text-white transition-colors">
            Portfolio
          </Link>
        </div>
      )}
    </nav>
  );
}

---

3. Conversational Architecture for WhatsApp

We also refined the technical conversational spec for WhatsApp inbound triage:

• Technical Answers First: Direct, accurate responses to technical questions before routing to links.
• Zero Blind Quotes: Explicit refusal to guess budgets before understanding architecture and volume.
• Frictionless Chat Qualification: High-intent prospects are qualified natively inside the chat interface.

---

Takeaways

High-performance systems are built on resilient foundations: minimalist firewalls, fast HTTP/3 proxies, robust WebKit-tested mobile components, and automated data pipelines that protect the business without manual overhead.

Looking to optimize your infrastructure or deploy production-grade AI automations?

👉 Discover our engineering work at andresmorales.com.co.