NeveTimePanel/NGINX_SETUP.md

Настройка с 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 контейнер для копирования статики

Запуск

Подготовка

# 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 (обновленный)

Запуск

# Остановить старые контейнеры
docker compose down

# Запустить с nginx
docker compose -f docker-compose-nginx.yml up --build -d

Проверка

# Статус контейнеров
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 не запускается

# Проверить конфигурацию
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 не загружается

# Проверить статические файлы
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 не работает

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