# Настройка с 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 в статике = максимальная производительность!** 🚀