- Add Next.js app structure with base configs, linting, and formatting - Implement LiveKit Meet page, types, and utility functions - Add Docker, Compose, and deployment scripts for backend and token server - Provide E2E and smoke test scaffolding with Puppeteer and Playwright helpers - Include CSS modules and global styles for UI - Add postMessage and studio integration utilities - Update package.json with dependencies and scripts for development and testing
83 lines
3.1 KiB
Markdown
83 lines
3.1 KiB
Markdown
# broadcast-panel - Proxy / Nginx & Studio flow
|
|
|
|
Este README explica cómo configurar el proxy (Nginx) para que las rutas de API de tokens (`/api/session`) se enruten al `backend-api` (token server), cómo probar el flujo "Entrar al estudio" y cómo ejecutar la automatización de prueba (Playwright / browserMCP).
|
|
|
|
Archivo de ejemplo de Nginx
|
|
- El archivo `packages/broadcast-panel/nginx.conf` ya contiene una ubicación para `/api/session`:
|
|
|
|
```nginx
|
|
location ~ ^/api/session(/.*)?$ {
|
|
proxy_pass http://backend-api:4000$request_uri;
|
|
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_connect_timeout 5s;
|
|
proxy_read_timeout 20s;
|
|
}
|
|
```
|
|
|
|
Importante:
|
|
- Ese `proxy_pass` funciona si Nginx se ejecuta en la misma red Docker y `backend-api` es resolvible como nombre de servicio. En el proxy público (easypanel/traefik/nginx del host) debes apuntar a `http://127.0.0.1:4000` o al host/IP donde corre `backend-api`.
|
|
|
|
Ejemplo de bloque `server` para proxy público (host):
|
|
|
|
```nginx
|
|
upstream backend_api {
|
|
server 127.0.0.1:4000; # o la IP/host real del token server
|
|
}
|
|
|
|
server {
|
|
listen 80;
|
|
server_name avanzacast-servertokens.bfzqqk.easypanel.host;
|
|
|
|
location ~ ^/api(/.*)?$ {
|
|
proxy_pass http://backend_api$request_uri;
|
|
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;
|
|
}
|
|
|
|
location / {
|
|
try_files $uri $uri/ /index.html;
|
|
}
|
|
}
|
|
```
|
|
|
|
Probar el flujo del estudio (manualmente)
|
|
1. Crear sesión en token server:
|
|
|
|
```bash
|
|
curl -v -X POST 'https://avanzacast-servertokens.bfzqqk.easypanel.host/api/session' \
|
|
-H 'Content-Type: application/json' \
|
|
-d '{"room":"studio-live","username":"mcp-runner","ttl":300}' --max-time 15
|
|
```
|
|
|
|
2. Debes recibir JSON con `studioUrl` (o `id` + `token`). Copia la `studioUrl` y ábrela en un navegador.
|
|
3. En la UI del broadcast-panel, en la ventana del estudio, debería aparecer "Esperando token..." y cuando el postMessage/auto-connect se realice, verás "Token recibido desde Broadcast Panel" y/o "Conectado".
|
|
|
|
Automatizar con browserMCP / Playwright
|
|
- Usa el script `run_studio_flow.mjs` (puedo generarlo y ejecutarlo) que:
|
|
- Llama por POST al token-server para crear sesión,
|
|
- Abre la `studioUrl` y pulsa los botones "Conectar" / "Entrar" / "Ir en vivo" según sea necesario,
|
|
- Espera la confirmación en el DOM y devuelve screenshot + logs.
|
|
|
|
Script Playwright (resumen):
|
|
```javascript
|
|
// POST /api/session -> parse JSON
|
|
// goto(studioUrl)
|
|
// click('text=Conectar' | 'text=Entrar al estudio' | ...)
|
|
// wait 2s
|
|
// get document.body.innerText
|
|
// screenshot
|
|
```
|
|
|
|
¿Quieres que cree y ejecute el script Playwright ahora?
|
|
- Si confirmas: ejecutaré el POST y el flujo en browserMCP y te devolveré screenshot + logs.
|
|
|
|
Notas finales
|
|
- Si `curl` devuelve HTML en vez de JSON es señal de que el proxy público no enruta `/api` al token server. Revisa la configuración del proxy y aplica las reglas mostradas en este README.
|
|
|
|
|