feat: Add nginx configuration for static frontend serving
All checks were successful
continuous-integration/drone/push Build is passing

- Update docker-compose.yml to use nginx for static file serving
- Configure nginx to serve frontend static files and proxy API requests
- Add frontend-init container to copy static files to nginx volume
- Update nginx/default.conf with proper static file handling and gzip compression
- Add NGINX_SETUP.md documentation for nginx deployment
- Improve performance by separating static files from backend API

Changes:
- Frontend static files now served by nginx (better performance)
- Backend only handles API requests (port 8000, internal)
- Gzip compression and caching for static assets
- WebSocket support for console functionality
- Health check endpoint for monitoring
This commit is contained in:
2026-01-17 11:18:21 +06:00
parent 2d77f99e93
commit b781407334
4 changed files with 288 additions and 29 deletions

168
NGINX_SETUP.md Normal file
View File

@@ -0,0 +1,168 @@
# Настройка с Nginx + Frontend
## Архитектура
```
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Browser │───▶│ Nginx │───▶│ MC Panel │
│ │ │ │ │ (API only) │
└─────────────┘ └─────────────┘ └─────────────┘
┌─────────────┐
│ Frontend │
│ (Static) │
└─────────────┘
```
- **Nginx**: Раздает статические файлы frontend + проксирует API запросы
- **MC Panel**: Только API backend (порт 8000, внутренний)
- **Frontend**: Собирается в Docker и копируется в nginx
## Файлы
### 1. ✅ Dockerfile
Уже настроен для многоэтапной сборки:
- Stage 1: Собирает frontend (`npm run build`)
- Stage 2: Python backend + статические файлы
### 2. ✅ nginx/default.conf
Полная nginx конфигурация:
- Раздача статических файлов из `/usr/share/nginx/html`
- Проксирование `/api/*` на backend
- WebSocket поддержка для `/ws/*`
- Gzip сжатие
- Кэширование статики
### 3. ✅ docker-compose-nginx.yml
- `mc-panel`: Backend API (внутренний порт 8000)
- `nginx`: Статика + reverse proxy (порт 80)
- `frontend-init`: Init контейнер для копирования статики
## Запуск
### Подготовка
```bash
# 1. Создать папку data
mkdir -p data
cat > data/users.json << 'EOF'
{"admin":{"username":"admin","password":"$2b$12$PAaomoUWn3Ip5ov.S/uYPeTIRiDMq7DbA57ahyYQnw3QHT2zuYMlG","role":"owner","servers":[],"permissions":{"manage_users":true,"manage_roles":true,"manage_servers":true,"manage_tickets":true,"manage_files":true,"delete_users":true,"view_all_resources":true},"resource_access":{"servers":[],"tickets":[],"files":[]}}}
EOF
echo '{}' > data/tickets.json
echo '{}' > data/daemons.json
# 2. Скопировать файлы:
# - docker-compose-nginx.yml
# - nginx/default.conf (обновленный)
# - backend/daemons.py (обновленный)
```
### Запуск
```bash
# Остановить старые контейнеры
docker compose down
# Запустить с nginx
docker compose -f docker-compose-nginx.yml up --build -d
```
### Проверка
```bash
# Статус контейнеров
docker compose -f docker-compose-nginx.yml ps
# Логи
docker compose -f docker-compose-nginx.yml logs nginx
docker compose -f docker-compose-nginx.yml logs mc-panel
# Проверка API
curl http://localhost/api/auth/oidc/providers
# Проверка frontend
curl http://localhost/
```
## Что происходит
1. **Сборка**:
- Frontend собирается в `/app/frontend/dist`
- Backend копируется в `/app/backend`
2. **Инициализация**:
- `frontend-init` копирует статику в volume `frontend-static`
- Завершается после копирования
3. **Nginx**:
- Монтирует volume `frontend-static` в `/usr/share/nginx/html`
- Раздает статические файлы
- Проксирует `/api/*` на `mc-panel:8000`
4. **Backend**:
- Запускается на внутреннем порту 8000
- Доступен только через nginx
## Преимущества
**Производительность**: Nginx раздает статику быстрее
**Кэширование**: Статические файлы кэшируются
**Сжатие**: Gzip для всех файлов
**Безопасность**: Backend недоступен извне
**Масштабируемость**: Можно добавить SSL, балансировку
## Отладка
### Nginx не запускается
```bash
# Проверить конфигурацию
docker compose -f docker-compose-nginx.yml exec nginx nginx -t
# Проверить файлы
docker compose -f docker-compose-nginx.yml exec nginx ls -la /usr/share/nginx/html
```
### Frontend не загружается
```bash
# Проверить статические файлы
docker compose -f docker-compose-nginx.yml exec nginx ls -la /usr/share/nginx/html
# Проверить логи init контейнера
docker compose -f docker-compose-nginx.yml logs frontend-init
```
### API не работает
```bash
# Проверить backend
docker compose -f docker-compose-nginx.yml exec mc-panel curl http://localhost:8000/api/auth/oidc/providers
# Проверить проксирование
curl -v http://localhost/api/auth/oidc/providers
```
## Альтернативные варианты
### Вариант 1: Простой (без nginx)
Используйте `docker-compose-linux.yml` - backend раздает всё сам
### Вариант 2: Nginx + внешняя сборка
Соберите frontend локально и монтируйте папку `dist`
### Вариант 3: Отдельные контейнеры
Frontend и backend в разных контейнерах
## Результат
После успешного запуска:
- **Frontend**: `http://IP_СЕРВЕРА/`
- **API**: `http://IP_СЕРВЕРА/api/`
- **WebSocket**: `ws://IP_СЕРВЕРА/ws/`
- **Логин**: `admin` / `Admin`
---
**Nginx + Frontend в статике = максимальная производительность!** 🚀