17 KiB
17 KiB
Архитектура системы управления серверами
Общая схема
┌─────────────────────────────────────────────────────────────┐
│ FRONTEND │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ ServerPanel Component │ │
│ │ ┌─────────┬─────────┬─────────┬──────────────┐ │ │
│ │ │ Обзор │ Консоль │ Статис- │ Управление │ │ │
│ │ │ │ │ тика │ │ │ │
│ │ └─────────┴─────────┴─────────┴──────────────┘ │ │
│ │ ┌─────────┬─────────┬─────────┐ │ │
│ │ │ Снэп- │ Конфигу-│ Безопас-│ │ │
│ │ │ шоты │ рация │ ность │ │ │
│ │ └─────────┴─────────┴─────────┘ │ │
│ │ │ │
│ │ Components: │ │
│ │ • ConsoleSection (noVNC) │ │
│ │ • ResizeModal (CPU/RAM/Disk) │ │
│ │ • SnapshotsSection (Create/Restore/Delete) │ │
│ │ • Stats Charts (Recharts LineChart) │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ WebSocket Hook (useSocket) │ │
│ │ • Real-time stats updates │ │
│ │ • Alert notifications │ │
│ │ • Connection status │ │
│ └─────────────────────────────────────────────────────┘ │
└──────────────────────┬──────────────────────────────────────┘
│ HTTP REST API + WebSocket
│
┌──────────────────────┴──────────────────────────────────────┐
│ BACKEND SERVER │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Express.js + Socket.IO Server │ │
│ │ • CORS: localhost:3000, localhost:5173 │ │
│ │ • Port: 5000 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ API Routes (/api/server) │ │
│ │ • GET / - List servers │ │
│ │ • GET /:id - Get server │ │
│ │ • GET /:id/status - Get stats │ │
│ │ • POST /create - Create server │ │
│ │ • POST /:id/start - Start │ │
│ │ • POST /:id/stop - Stop │ │
│ │ • POST /:id/restart - Restart │ │
│ │ • DELETE /:id - Delete │ │
│ │ • POST /:id/password - Change password │ │
│ │ • PUT /:id/resize - Resize config │ │
│ │ • POST /:id/snapshots - Create snapshot │ │
│ │ • GET /:id/snapshots - List snapshots │ │
│ │ • POST /:id/snapshots/rollback - Restore │ │
│ │ • DELETE /:id/snapshots - Delete snapshot │ │
│ │ • POST /console - Get console URL │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ MonitoringService (WebSocket) │ │
│ │ • Interval: 30 seconds │ │
│ │ • Check all active servers │ │
│ │ • Update database metrics │ │
│ │ • Broadcast to subscribed clients │ │
│ │ • Check resource limits (>90%) │ │
│ │ • Send alerts via WebSocket │ │
│ │ • Send email notifications │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Email Service (Nodemailer) │ │
│ │ • SMTP configuration │ │
│ │ • Resource alerts │ │
│ │ • Server created notifications │ │
│ │ • Payment reminders │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Proxmox API Integration │ │
│ │ • createLXContainer() │ │
│ │ • controlContainer() - start/stop/restart │ │
│ │ • getContainerStats() - CPU/RAM/Disk/Network │ │
│ │ • getContainerIP() │ │
│ │ • resizeContainer() - CPU/RAM/Disk │ │
│ │ • createSnapshot() │ │
│ │ • listSnapshots() │ │
│ │ • rollbackSnapshot() │ │
│ │ • deleteSnapshot() │ │
│ │ • changeRootPassword() │ │
│ │ • getConsoleURL() │ │
│ │ • deleteContainer() │ │
│ └─────────────────────────────────────────────────────┘ │
└──────────────────────┬──────────────────────────────────────┘
│ Proxmox API
│ Token: PROXMOX_TOKEN_ID + SECRET
┌──────────────────────┴──────────────────────────────────────┐
│ PROXMOX VE SERVER │
│ • LXC Containers │
│ • VNC Console Access │
│ • Resource Management │
│ • Snapshot Management │
└──────────────────────┬──────────────────────────────────────┘
│
┌──────────────────────┴──────────────────────────────────────┐
│ MYSQL/MARIADB DATABASE │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Prisma Schema │ │
│ │ • User (auth, balance) │ │
│ │ • Server (status, metrics, proxmoxId) │ │
│ │ • Tariff (price, resources) │ │
│ │ • OperatingSystem (template, type) │ │
│ │ • Ticket (support system) │ │
│ │ • Check (payment verification) │ │
│ │ • Notification (user alerts) │ │
│ └─────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
Поток данных Real-Time мониторинга
┌──────────────┐ 30s interval ┌──────────────┐
│ Monitoring │ ───────────────────────>│ Proxmox │
│ Service │<───────────────────────│ VE API │
└──────┬───────┘ getContainerStats() └──────────────┘
│
│ Update metrics
│
▼
┌──────────────┐
│ Database │
│ (Server │
│ metrics) │
└──────┬───────┘
│
│ Broadcast via WebSocket
│
▼
┌──────────────┐ socket.emit() ┌──────────────┐
│ Socket.IO │ ───────────────────────>│ Frontend │
│ Server │ 'server-stats' │ Clients │
│ │ 'server-alerts' │ │
└──────────────┘ └──────────────┘
Структура компонентов Frontend
ServerPanel (Main Component)
├── State Management
│ ├── server: Server | null
│ ├── stats: ServerStats | null
│ ├── activeTab: string
│ ├── showResizeModal: boolean
│ └── WebSocket hook: useServerStats(serverId)
│ ├── stats (real-time)
│ ├── alerts (real-time)
│ └── connected (status)
│
├── Tabs Navigation
│ ├── overview
│ ├── console
│ ├── stats
│ ├── manage
│ ├── snapshots
│ ├── resize
│ └── security
│
└── Tab Content
├── Overview Tab
│ └── Server info (status, tariff, OS, IP, dates)
│
├── Console Tab
│ └── ConsoleSection
│ ├── Open console button
│ └── Embedded iframe (noVNC)
│
├── Stats Tab
│ ├── WebSocket connection indicator
│ ├── Alerts display (if any)
│ ├── Stats cards (CPU, RAM, Disk)
│ ├── LineChart (history)
│ └── Detailed stats grid
│
├── Manage Tab
│ └── Action buttons (start, restart, stop)
│
├── Snapshots Tab
│ └── SnapshotsSection
│ ├── Create snapshot form
│ └── Snapshots list
│ ├── Restore button
│ └── Delete button
│
├── Resize Tab
│ └── Open modal button
│ └── ResizeModal (CPU, RAM, Disk inputs)
│
└── Security Tab
├── Generate password button
└── New password display
Технологический стек
Backend Dependencies
express: ^4.21.2 - HTTP сервер
socket.io: ^4.8.1 - WebSocket
@prisma/client: ^6.16.2 - ORM
axios: ^1.12.2 - HTTP клиент
nodemailer: ^6.9.16 - Email
bcrypt: ^6.0.0 - Хеширование
jsonwebtoken: ^9.0.2 - JWT
multer: ^2.0.2 - Загрузка файлов
cors: ^2.8.5 - CORS
dotenv: ^16.4.5 - Env vars
Frontend Dependencies
react: ^19.1.1 - UI библиотека
socket.io-client: ^4.8.1 - WebSocket клиент
recharts: ^2.15.0 - Графики
axios: ^1.12.2 - HTTP клиент
react-router-dom: ^7.9.1 - Роутинг
tailwindcss: ^3.3.3 - CSS фреймворк
vite: ^7.1.2 - Build tool
typescript: ^5.8.3 - Type safety
Конфигурация окружения (.env)
# Database
DATABASE_URL="mysql://user:pass@localhost:3306/ospabhost"
# Proxmox
PROXMOX_API_URL="https://proxmox.example.com:8006/api2/json"
PROXMOX_TOKEN_ID="user@pam!token-id"
PROXMOX_TOKEN_SECRET="secret"
PROXMOX_NODE="proxmox"
PROXMOX_WEB_URL="https://proxmox.example.com:8006"
# Server
PORT=5000
JWT_SECRET="secret-key"
# Email (optional)
SMTP_HOST="smtp.gmail.com"
SMTP_PORT=587
SMTP_USER="email@gmail.com"
SMTP_PASS="app-password"
Основные метрики производительности
- Мониторинг интервал: 30 секунд
- WebSocket latency: < 100ms
- API response time: < 500ms
- Database queries: Optimized with Prisma
- Concurrent connections: Поддержка множества клиентов
Безопасность
- Аутентификация: JWT tokens
- API доступ: Bearer tokens
- Proxmox: API tokens (не пароли)
- Пароли: Bcrypt хеширование
- CORS: Ограниченные origins
- WebSocket: Authenticated connections
- SQL injection: Prisma ORM защита
Масштабируемость
- Горизонтальное: Можно запустить несколько инстансов backend
- Database: MySQL поддерживает репликацию
- WebSocket: Socket.IO поддерживает Redis adapter
- Кэширование: Можно добавить Redis для кэша
- Load balancing: Nginx/HAProxy совместимы
Мониторинг и логирование
- Console.log для всех критических событий
- Error tracking для ошибок Proxmox API
- Database логи метрик каждые 30 секунд
- Email алерты для критических событий
- WebSocket connection/disconnection логи