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