Cesar Mendivil
543d6bc6af
- Changed development port for studio-panel from 3001 to 3020 in package.json and vite.config.ts. - Refactored Studio component in studio-panel to improve token handling and error diagnostics. - Added utility functions for token validation and JWT decoding in Studio component. - Enhanced error handling and user feedback in Studio component when token is invalid. - Implemented sessionStorage management for token and server URL in Studio component. - Created Docker setup for broadcast-panel including Dockerfile, Dockerfile.dev, and docker-compose.yml. - Added Nginx configuration for serving the broadcast-panel as a Single Page Application. - Introduced Banner component in broadcast-panel for displaying messages and actions. - Added start-docker.sh script for easy Docker management of broadcast-panel. - Implemented Playwright E2E tests for token handling and UI interactions between broadcast-panel and studio-panel. - Included SSL certificates for local development in studio-panel.
202 lines
4.1 KiB
Markdown
202 lines
4.1 KiB
Markdown
# 🐳 Docker Setup - Broadcast Panel
|
|
|
|
## Archivos Docker Creados
|
|
|
|
- **Dockerfile**: Imagen de producción con Nginx
|
|
- **Dockerfile.dev**: Imagen de desarrollo con Vite HMR
|
|
- **docker-compose.yml**: Orquestación de contenedores
|
|
- **nginx.conf**: Configuración de Nginx para SPA
|
|
- **.dockerignore**: Archivos excluidos del build
|
|
- **start-docker.sh**: Script de inicio rápido
|
|
|
|
## 🚀 Inicio Rápido
|
|
|
|
### Modo Desarrollo (Recomendado para trabajar)
|
|
```bash
|
|
cd packages/broadcast-panel
|
|
chmod +x start-docker.sh
|
|
./start-docker.sh dev
|
|
```
|
|
|
|
Accede a: **http://localhost:5173**
|
|
|
|
### Modo Producción
|
|
```bash
|
|
./start-docker.sh prod
|
|
```
|
|
|
|
Accede a: **http://localhost:8080**
|
|
|
|
## 📦 Comandos Manuales
|
|
|
|
### Desarrollo
|
|
```bash
|
|
# Build
|
|
docker-compose build broadcast-panel-dev
|
|
|
|
# Iniciar
|
|
docker-compose up broadcast-panel-dev
|
|
|
|
# Iniciar en background
|
|
docker-compose up -d broadcast-panel-dev
|
|
|
|
# Ver logs
|
|
docker-compose logs -f broadcast-panel-dev
|
|
|
|
# Detener
|
|
docker-compose down
|
|
```
|
|
|
|
### Producción
|
|
```bash
|
|
# Build
|
|
docker-compose --profile production build broadcast-panel-prod
|
|
|
|
# Iniciar
|
|
docker-compose --profile production up broadcast-panel-prod
|
|
|
|
# Iniciar en background
|
|
docker-compose --profile production up -d broadcast-panel-prod
|
|
```
|
|
|
|
## 🔧 Configuración
|
|
|
|
### Variables de Entorno
|
|
|
|
Copia `.env.example` a `.env` y ajusta las variables:
|
|
|
|
```env
|
|
VITE_LIVEKIT_WS_URL=wss://livekit-server.bfzqqk.easypanel.host
|
|
VITE_TOKEN_SERVER_URL=http://localhost:3010
|
|
```
|
|
|
|
### Puertos
|
|
|
|
- **5173**: Vite Dev Server (desarrollo)
|
|
- **8080**: Nginx (producción)
|
|
|
|
## 🌐 Conexión con LiveKit
|
|
|
|
El broadcast-panel se conectará a:
|
|
|
|
1. **Servidor LiveKit**: `wss://livekit-server.bfzqqk.easypanel.host`
|
|
2. **Token Server**: `http://localhost:3010` (Docker en tu máquina)
|
|
|
|
### Token Server
|
|
|
|
Asegúrate de que el token server esté corriendo:
|
|
|
|
```bash
|
|
cd packages/backend-api
|
|
docker-compose up -d
|
|
```
|
|
|
|
O si ya está corriendo con Docker, verifica:
|
|
|
|
```bash
|
|
docker ps | grep token-server
|
|
curl http://localhost:3010/api/token?room=test&username=demo
|
|
```
|
|
|
|
## 🔄 Hot Reload (Modo Desarrollo)
|
|
|
|
Los cambios en estos archivos se reflejan automáticamente:
|
|
- `src/**/*`
|
|
- `public/**/*`
|
|
- `index.html`
|
|
- `vite.config.ts`
|
|
- `tsconfig.json`
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### Error: No se puede conectar al token server
|
|
|
|
```bash
|
|
# Verifica que el token server esté corriendo
|
|
docker ps
|
|
|
|
# Verifica la URL en .env
|
|
cat .env | grep TOKEN_SERVER
|
|
```
|
|
|
|
### Error: No se puede conectar a LiveKit
|
|
|
|
```bash
|
|
# Verifica la URL de LiveKit en .env
|
|
cat .env | grep LIVEKIT
|
|
|
|
# Prueba la conexión
|
|
curl -I https://livekit-server.bfzqqk.easypanel.host
|
|
```
|
|
|
|
### Rebuild completo
|
|
|
|
```bash
|
|
# Detener y eliminar contenedores
|
|
docker-compose down
|
|
|
|
# Eliminar imágenes
|
|
docker-compose rm -f
|
|
|
|
# Rebuild desde cero
|
|
docker-compose build --no-cache broadcast-panel-dev
|
|
docker-compose up broadcast-panel-dev
|
|
```
|
|
|
|
## 📊 Logs
|
|
|
|
```bash
|
|
# Ver logs en tiempo real
|
|
docker-compose logs -f broadcast-panel-dev
|
|
|
|
# Ver últimas 100 líneas
|
|
docker-compose logs --tail=100 broadcast-panel-dev
|
|
```
|
|
|
|
## 🧹 Limpieza
|
|
|
|
```bash
|
|
# Detener contenedores
|
|
docker-compose down
|
|
|
|
# Eliminar volúmenes (cuidado, borra datos)
|
|
docker-compose down -v
|
|
|
|
# Eliminar imágenes
|
|
docker rmi avanzacast-broadcast-panel-dev
|
|
docker rmi avanzacast-broadcast-panel-prod
|
|
```
|
|
|
|
## 🔗 Integración con Studio-Panel
|
|
|
|
Para que **studio-panel** se conecte con **broadcast-panel**:
|
|
|
|
1. Inicia broadcast-panel en Docker:
|
|
```bash
|
|
./start-docker.sh dev
|
|
```
|
|
|
|
2. En studio-panel, asegúrate de que esté en modo real (no demo):
|
|
- El token server debe estar accesible en `localhost:3010`
|
|
- Studio-panel intentará obtener un token real
|
|
- Se conectará a LiveKit
|
|
|
|
3. Abre ambos:
|
|
- Broadcast Panel: http://localhost:5173
|
|
- Studio Panel: http://localhost:3001
|
|
|
|
4. Desde broadcast-panel, crea una sala y genera un link de invitación
|
|
5. Abre ese link en studio-panel para unirte a la sala
|
|
|
|
## 🎯 Siguiente Paso
|
|
|
|
Una vez que broadcast-panel esté corriendo en Docker, podrás:
|
|
|
|
1. ✅ Crear salas en broadcast-panel
|
|
2. ✅ Generar tokens de invitación
|
|
3. ✅ Conectar studio-panel a esas salas
|
|
4. ✅ Ver video/audio en tiempo real entre ambos
|
|
5. ✅ Probar todas las funcionalidades de LiveKit
|
|
|
|
¡Disfruta tu streaming en vivo! 🎥
|