Taller 9: Panel de Administración Web para Asterisk

Desarrollo de un panel web profesional con Next.js 15, monitoreo en tiempo real vía AMI, gestión de usuarios con roles y reportes CDR/CEL

🖥️ Taller 9: Panel de Administración Web para Asterisk

🎯 El Problema Real: Administración Visual de la PBX

Hasta ahora hemos trabajado exclusivamente desde CLI y archivos de configuración. Un panel web moderno proporciona:

✅ Acceso remoto seguro mediante autenticación y roles
✅ Interfaz intuitiva para usuarios no técnicos
✅ Monitoreo en tiempo real de extensiones y troncales vía AMI
✅ Reportes visuales de CDR/CEL con filtros avanzados
✅ Gestión de usuarios con permisos diferenciados
✅ Originar y colgar llamadas desde el navegador
✅ Dashboard con métricas en tiempo real

🏗️ Arquitectura del Sistema

Stack Tecnológico

Frontend:

Next.js 15.2.4 (App Router)
React 19
TypeScript 5.8
Tailwind CSS 4
shadcn/ui
TanStack Query 5

Backend:

Node.js 20+
Better Auth 1.2
Drizzle ORM 0.41
asterisk-manager 0.2

Infraestructura:

Nginx (reverse proxy + SSL)
Certbot (Let’s Encrypt)
PM2 (process manager)

🔧 Parte 1: Configurar AMI en Asterisk

1.1 Editar manager.conf

nano /etc/asterisk/manager.conf

;
; /etc/asterisk/manager.conf
; Configuración AMI para Panel de Administración Web
;

[general]
enabled = yes
port = 5038
bindaddr = 0.0.0.0

; === SEGURIDAD ===
timestampevents = yes
authtimeout = 30
authlimit = 50

; === OPTIMIZACIÓN ===
; Deshabilitar eventos que saturan el sistema
disabledevents = Newexten,VarSet,RTCPSent,RTCPReceived

displayconnects = yes

; === USUARIO PARA PANEL WEB ===
[panel_web]
secret = Panel2025Secure!

; Denegar todo por defecto
deny = 0.0.0.0/0.0.0.0

; Permitir solo desde localhost
permit = 127.0.0.1/255.255.255.0

; Permisos de lectura y escritura
read = system,call,log,verbose,agent,user,config,dtmf,reporting,cdr,dialplan
write = system,call,agent,user,config,command,reporting,originate

1.2 Recargar y Verificar

asterisk -rx "manager reload"
netstat -tlnp | grep 5038
asterisk -rx "manager show users"

1.3 Configurar Firewall

ufw deny 5038
ufw allow from 127.0.0.1 to any port 5038 proto tcp
ufw status numbered

🚀 Parte 2: Instalar Panel Web

2.1 Instalar Node.js 20+ y pnpm

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
apt-get install -y nodejs
npm install -g pnpm

node --version
pnpm --version

2.2 Clonar Repositorio

cd /opt
git clone https://github.com/giandiego/panel-admin-asterisk.git
cd panel-admin-asterisk
pnpm install

🗄️ Parte 3: Configurar Base de Datos

3.1 Usar Base de Datos Existente

El panel utilizará la misma base de datos aulaswitch que configuramos en el Taller 8 para CDR/CEL. Esto simplifica la configuración y mantiene todos los datos de Asterisk centralizados.

3.2 Verificar Acceso a la Base de Datos

# Verificar que la base de datos aulaswitch existe y es accesible
psql -U asterisk -d aulaswitch -h localhost -c "SELECT version();"

# Verificar tablas CDR/CEL existentes
psql -U asterisk -d aulaswitch -h localhost -c "\dt"

# Verificar datos CDR
psql -U asterisk -d aulaswitch -h localhost -c "SELECT COUNT(*) FROM cdr;"

Contraseña: AsteriskAudit2025!

3.3 Configurar Variables de Entorno

cd /opt/panel-admin-asterisk
cp _example_env .env
nano .env

NODE_ENV=production

# === BASE DE DATOS ===
# Usamos la misma base de datos aulaswitch del Taller 8
# Esta BD contiene: cdr, cel (Asterisk) + user, account, session (Panel)
DATABASE_URL="postgresql://asterisk:AsteriskAudit2025!@localhost:5432/aulaswitch"

# === AUTENTICACIÓN (Better Auth) ===
# Generar con: openssl rand -base64 32
BETTER_AUTH_SECRET="TU_SECRETO_GENERADO_AQUI"
BETTER_AUTH_URL="https://panel.tudominio.com"

SUPER_ADMIN_EMAIL="admin@aulautil.com"
SUPER_ADMIN_PASSWORD="Admin2025Secure!"
SUPER_ADMIN_NAME="Administrador Principal"

AMI_HOST="localhost"
AMI_PORT=5038
AMI_USERNAME="panel_web"
AMI_PASSWORD="Panel2025Secure!"

NEXT_PUBLIC_BETTER_AUTH_URL="https://panel.tudominio.com"

Generar secreto:

openssl rand -base64 32

3.4 Aplicar Esquema del Panel

Ahora crearemos las tablas del panel en la base de datos aulaswitch:

# Aplicar migraciones (crear tablas: user, account, session)
pnpm db:push

# Crear super administrador inicial
pnpm db:seed:super-admin

Salida esperada:

✅ Esquema de base de datos aplicado correctamente
✅ Tablas creadas: user, account, session
✅ Super administrador creado:
   Email: admin@aulautil.com
   Password: Admin2025Secure!

3.5 Verificar Tablas Creadas

# Conectar a aulaswitch
psql -U asterisk -d aulaswitch -h localhost

# Listar TODAS las tablas (CDR/CEL + Panel)
\dt

# Deberías ver:
# - cdr (Taller 8)
# - cel (Taller 8)
# - user (Panel - nuevo)
# - account (Panel - nuevo)
# - session (Panel - nuevo)

# Verificar super admin creado
SELECT id, email, name, role FROM "user";

# Verificar que CDR/CEL siguen intactos
SELECT COUNT(*) FROM cdr;
SELECT COUNT(*) FROM cel;

# Salir
\q

🎨 Parte 4: Probar en Desarrollo

cd /opt/panel-admin-asterisk
pnpm dev

4.1 Acceso Remoto (Opcional para Desarrollo)

# Permitir tu IP
ufw allow from TU_IP_LOCAL to any port 3000 proto tcp

# Agregar en manager.conf
nano /etc/asterisk/manager.conf

Agregar en [panel_web]:

permit = TU_IP_LOCAL/255.255.255.255

asterisk -rx "manager reload"

4.2 Iniciar Sesión

Accede a http://IP_SERVIDOR:3000

Credenciales:

Email: admin@aulautil.com
Password: Admin2025Secure!

🚀 Parte 5: Despliegue en Producción

5.1 Build

cd /opt/panel-admin-asterisk
pnpm build

5.2 Instalar PM2

npm install -g pm2
pm2 --version

5.3 Configurar PM2

nano /opt/panel-admin-asterisk/ecosystem.config.js

module.exports = {
  apps: [{
    name: 'panel-asterisk',
    script: 'node_modules/next/dist/bin/next',
    args: 'start',
    cwd: '/opt/panel-admin-asterisk',
    instances: 1,
    exec_mode: 'cluster',
    watch: false,
    max_memory_restart: '500M',
    env: {
      NODE_ENV: 'production',
      PORT: 3000
    },
    error_file: '/var/log/pm2/panel-asterisk-error.log',
    out_file: '/var/log/pm2/panel-asterisk-out.log',
    log_date_format: 'YYYY-MM-DD HH:mm:ss Z',
    merge_logs: true,
    autorestart: true,
    max_restarts: 10,
    min_uptime: '10s'
  }]
};

5.4 Iniciar con PM2

mkdir -p /var/log/pm2
cd /opt/panel-admin-asterisk
pm2 start ecosystem.config.js
pm2 status
pm2 logs panel-asterisk

5.5 Inicio Automático

pm2 startup systemd
# Ejecutar el comando que PM2 muestra
pm2 save

🌐 Parte 6: Nginx + SSL

6.1 Instalar Nginx

apt update
apt install -y nginx
nginx -v
systemctl status nginx

6.2 Configurar Sitio

nano /etc/nginx/sites-available/panel-asterisk

server {
    listen 80;
    server_name panel-asterisk.elpepe123.online;

    access_log /var/log/nginx/panel-asterisk-access.log;
    error_log /var/log/nginx/panel-asterisk-error.log;

    client_max_body_size 10M;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_buffering off;
    }
}

6.3 Habilitar

ln -s /etc/nginx/sites-available/panel-asterisk /etc/nginx/sites-enabled/
nginx -t
systemctl reload nginx

6.4 Certbot SSL

apt install -y certbot python3-certbot-nginx
ufw allow 80/tcp
ufw allow 443/tcp

certbot --nginx -d panel.tudominio.com
certbot renew --dry-run

6.5 Actualizar .env

nano /opt/panel-admin-asterisk/.env

Cambiar a HTTPS:

BETTER_AUTH_URL="https://panel.tudominio.com"
NEXT_PUBLIC_BETTER_AUTH_URL="https://panel.tudominio.com"

pm2 restart panel-asterisk

🎉 Verificación Final

# Servicios
systemctl status postgresql
systemctl status nginx
pm2 status
asterisk -rx "manager show connected"

# Logs
pm2 logs panel-asterisk --lines 50
tail -f /var/log/nginx/panel-asterisk-access.log

# Acceso
curl -I https://panel.tudominio.com

📊 Funcionalidades del Panel

Dashboard

✅ Monitoreo de extensiones en tiempo real
✅ Estado de troncales con latencia
✅ Originar llamadas
✅ Colgar canales activos
✅ Eventos AMI vía SSE

Reportes CDR

✅ Tabla paginada de llamadas
✅ Filtros: fecha, origen, destino, disposición
✅ Exportación a CSV
✅ Visualización de grabaciones

Reportes CEL

✅ Eventos detallados de llamadas
✅ Correlación con CDR
✅ Timeline visual

Gestión de Usuarios

✅ CRUD completo
✅ Roles: superAdmin, admin, user
✅ Búsqueda y filtrado

🔧 Troubleshooting

Panel no conecta a AMI

# Verificar AMI
asterisk -rx "manager show connected"
netstat -tlnp | grep 5038

# Verificar logs
pm2 logs panel-asterisk | grep AMI

Error de base de datos

# Verificar conexión
psql -U asterisk -d panel_asterisk -h localhost

# Verificar tablas
\dt

# Recrear esquema
cd /opt/panel-admin-asterisk
pnpm db:push

Nginx 502 Bad Gateway

# Verificar PM2
pm2 status
pm2 restart panel-asterisk

# Verificar puerto 3000
netstat -tlnp | grep 3000

# Logs de Nginx
tail -f /var/log/nginx/panel-asterisk-error.log

🔐 Seguridad en Producción

✅ Firewall configurado (solo 80, 443, 22)
✅ AMI solo en localhost
✅ SSL con Let’s Encrypt
✅ Contraseñas fuertes
✅ Permisos restrictivos en .env
✅ Headers de seguridad en Nginx
✅ PM2 con límites de memoria
✅ Logs de auditoría activos

🚀 Próximos Pasos

Desarrollo Local

Para trabajar en el código localmente:

# En tu computadora
git clone https://github.com/giandiego/panel-admin-asterisk.git
cd panel-admin-asterisk
pnpm install

# Configurar .env apuntando a tu servidor
# Usar SSH tunnel para AMI:
ssh -L 5038:localhost:5038 user@servidor-asterisk

pnpm dev

Mejoras Futuras

Gestión de extensiones PJSIP desde el panel
Gestión de troncales SIP
Editor de dialplan visual
Gestión de colas (Queues)
Constructor de IVR
Reproductor de grabaciones
Notificaciones push
Dashboard de métricas avanzadas

¡Panel Web Profesional Operativo!

🎓 Presentación 8 - El Ecosistema Extendido

En la siguiente presentación exploraremos el ecosistema completo de Asterisk: Issabel, OmniLeads y el futuro de las comunicaciones unificadas.

👉 Ir a Presentación 8: Ecosistema Extendido