feat: Add nginx configuration for static frontend serving
All checks were successful
continuous-integration/drone/push Build is passing
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:
168
NGINX_SETUP.md
Normal file
168
NGINX_SETUP.md
Normal 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 в статике = максимальная производительность!** 🚀
|
||||
Reference in New Issue
Block a user