Установка Quant-UX в Docker
Давайте разберем, как установить Quant-UX на сервер с Debian 12 с использованием Docker. Quant-UX — это open-source инструмент для прототипирования и тестирования интерфейсов, и его можно удобно развернуть через Docker, что упрощает управление зависимостями и настройку. Я опишу пошаговый процесс установки, включая подготовку сервера, установку Docker и настройку Quant-UX.
Требования
Сервер с установленной Debian 12.
Доступ к пользователю с правами sudo.
Подключение к интернету для загрузки пакетов и Docker-образов.
(Опционально) SMTP-сервер для отправки писем (например, через Gmail или ваш почтовый сервер).
Шаг 1: Подготовка сервера и установка Docker
Обновите систему: Убедитесь, что все пакеты на сервере актуальны:
bash
sudo apt update && sudo apt upgrade -y
Установите необходимые зависимости: Установите пакеты, которые потребуются для добавления репозитория Docker:
bash
sudo apt install -y ca-certificates curl gnupg
Добавьте GPG-ключ Docker: Добавьте официальный ключ Docker для проверки подлинности пакетов:
bash
sudo install -m 0755 -d /etc/apt/keyrings
curl -fsSL https://download.docker.com/linux/debian/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg
sudo chmod a+r /etc/apt/keyrings/docker.gpg
Добавьте репозиторий Docker: Добавьте репозиторий Docker в список источников APT:
bash
echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian bookworm stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt update
Установите Docker и Docker Compose: Установите Docker Engine и плагин Docker Compose:
bash
sudo apt install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
Проверьте установку Docker: Запустите тестовый контейнер, чтобы убедиться, что Docker работает:
bash
sudo docker run hello-world
Вы должны увидеть сообщение "Hello from Docker!".
Добавьте пользователя в группу Docker (опционально): Чтобы запускать команды Docker без sudo, добавьте своего пользователя в группу docker:
bash
sudo usermod -aG docker $USER
newgrp docker
Шаг 2: Настройка Quant-UX через Docker
Quant-UX состоит из фронтенда (Vue.js), бэкенда (Java) и базы данных MongoDB. Проще всего использовать готовый docker-compose.yml от сообщества (например, от bmcgonag), который включает все компоненты.
Создайте директорию для проекта:
bash
mkdir quant-ux-docker && cd quant-ux-docker
Скачайте docker-compose.yml:
Используем готовый файл от bmcgonag/quant-ux-docker:
bash
wget https://raw.githubusercontent.com/bmcgonag/quant-ux-docker/main/docker-compose.yml
Настройте переменные окружения:
Отредактируйте docker-compose.yml с помощью текстового редактора (например, nano):
bash
nano docker-compose.yml
Найдите секцию environment для сервисов qux-fe (фронтенд) и qux-be (бэкенд) и настройте следующие ключевые переменные:
Для фронтенда (qux-fe):
QUX_PROXY_URL: Укажите URL вашего бэкенда, например, http://quant-ux-backend:8080 (по умолчанию внутри Docker-сети).
QUX_WS_URL: Укажите URL вебсокета, например, ws://ваш_IP:8086 (замените ваш_IP на внешний IP сервера).
Для бэкенда (qux-be):
QUX_HTTP_HOST: Укажите внешний URL фронтенда, например, http://ваш_IP:8082.
QUX_MAIL_USER: Ваш email для SMTP (например, user@example.com).
QUX_MAIL_PASSWORD: Пароль от email.
QUX_MAIL_HOST: SMTP-сервер (например, smtp.gmail.com).
QUX_JWT_PASSWORD: Длинный и надежный пароль (24+ символов, например, сгенерируйте на jwt.io).
TZ: Ваш часовой пояс (например, Europe/Moscow).
Пример изменений для qux-be:
yaml
environment:
- QUX_HTTP_HOST=http://192.168.1.100:8082
- QUX_MAIL_USER=user@gmail.com
- QUX_MAIL_PASSWORD=yourpassword
- QUX_MAIL_HOST=smtp.gmail.com
- QUX_JWT_PASSWORD=YourLongSecretPassword123!
- TZ=Europe/Moscow
Сохраните файл (Ctrl+O, затем Ctrl+X в nano).
Создайте директории для данных:
Quant-UX требует тома для хранения данных MongoDB и изображений:
bash
mkdir -p data quant-ux-data
Запустите Quant-UX:
Запустите все сервисы через Docker Compose:
bash
docker compose up -d
-d запускает контейнеры в фоновом режиме.
Docker загрузит образы (mongo, quant-ux-frontend, quant-ux-backend, quant-ux-websocket) и запустит их.
Проверьте статус:
Убедитесь, что все контейнеры работают:
bash
docker ps
Вы должны увидеть четыре контейнера: quant-ux-frontend, quant-ux-backend, quant-ux-websocket, quant-ux-mongo.
Шаг 3: Доступ к Quant-UX
Откройте браузер и перейдите по адресу:
text
http://ваш_IP:8082
Замените ваш_IP на IP-адрес вашего сервера (например, 192.168.1.100).
Зарегистрируйтесь или войдите:
Если QUX_USER_ALLOW_SIGNUP=true (по умолчанию), вы сможете создать учетную запись.
Используйте email и пароль, которые настроили для SMTP.
Шаг 4: Настройка безопасности (опционально)
Для продакшн-использования рекомендуется добавить обратный прокси (например, Nginx) с SSL:
Установите Nginx:
bash
sudo apt install -y nginx
Настройте конфигурацию /etc/nginx/sites-available/quant-ux:
nginx
server {
listen 80;
server_name ваш_домен;
location / {
proxy_pass http://localhost:8082;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
location /ws {
proxy_pass http://localhost:8086;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
Активируйте и перезапустите Nginx:
bash
sudo ln -s /etc/nginx/sites-available/quant-ux /etc/nginx/sites-enabled/
sudo systemctl restart nginx
Добавьте SSL через Certbot (опционально):
bash
sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d ваш_домен
Устранение неполадок
Логи: Проверьте логи контейнеров, если что-то не работает:
bash
docker logs quant-ux-frontend
docker logs quant-ux-backend
Порты заняты: Если порты 8082 или 8086 заняты, измените их в docker-compose.yml (например, 8083:8082).
SMTP не работает: Убедитесь, что данные SMTP верны. Для Gmail используйте App Password, если включена 2FA.
Итог
Теперь Quant-UX установлен на вашем Debian 12 сервере через Docker! Вы можете начать создавать прототипы интерфейсов, тестировать их и экспортировать код. Если нужны дополнительные настройки (например, интеграция с Keycloak или кастомные образы), дайте знать, и я помогу! Что дальше проверить?
Используйте email и пароль, которые настроили для SMTP.
================================
Какие там данные по умолчанию? Мне для теста на виотуальной машине на локалхосте
Понял, вы хотите протестировать Quant-UX на виртуальной машине локально (на localhost) и интересуетесь, какие данные по умолчанию используются для SMTP (email и пароль), чтобы не настраивать их вручную для теста. Давайте разберем это шаг за шагом.
Данные по умолчанию в Quant-UX
Quant-UX не имеет жестко заданных данных по умолчанию для email и пароля SMTP в стандартной конфигурации (например, в docker-compose.yml от bmcgonag). Вместо этого:
SMTP-настройки (email, пароль, хост) должны быть указаны в переменных окружения в docker-compose.yml для сервиса qux-be (бэкенд). Если они не заданы, Quant-UX попытается запуститься, но функции, зависящие от SMTP (например, регистрация новых пользователей), не будут работать без корректной конфигурации.
Регистрация: По умолчанию переменная QUX_USER_ALLOW_SIGNUP=true, что позволяет пользователям регистрироваться через интерфейс, но без SMTP вы не получите письма с подтверждением.
Для теста на локальной машине можно либо:
Настроить фиктивный SMTP (например, через Gmail с минимальными данными).
Отключить SMTP и использовать встроенного пользователя (если он предусмотрен).
Однако в стандартной сборке Quant-UX нет предустановленного пользователя или пароля — вам нужно либо указать SMTP, либо вручную добавить первого пользователя через MongoDB после запуска.
Упрощенный подход для теста на localhost
Для теста на виртуальной машине я предлагаю:
Использовать минимальную конфигурацию без SMTP (отключим отправку писем).
Добавить пользователя вручную через MongoDB.
Вот пошаговая инструкция для запуска Quant-UX на Debian 12 в Docker на localhost.
Шаг 1: Подготовка виртуальной машины
Предполагаю, что у вас уже есть Debian 12 на виртуальной машине (например, через VirtualBox или KVM). Убедитесь, что Docker установлен (см. предыдущий ответ, если нет).
Шаг 2: Создание docker-compose.yml
Создайте директорию и минимальный docker-compose.yml без SMTP:
bash
mkdir quant-ux-test && cd quant-ux-test
nano docker-compose.yml
Вставьте следующий код:
yaml
version: '3'
services:
quant-ux-mongo:
image: mongo:4.4
container_name: quant-ux-mongo
volumes:
- ./data:/data/db
ports:
- "27017:27017"
quant-ux-backend:
image: klausss/quant-ux-backend:latest
container_name: quant-ux-backend
depends_on:
- quant-ux-mongo
ports:
- "8080:8080"
environment:
- QUX_MONGO=mongodb://quant-ux-mongo:27017/quantux
- QUX_JWT_PASSWORD=YourSuperSecretPassword123! # Укажите свой пароль
- QUX_USER_ALLOW_SIGNUP=true # Разрешить регистрацию
- TZ=Europe/Moscow # Ваш часовой пояс
quant-ux-websocket:
image: klausss/quant-ux-websocket:latest
container_name: quant-ux-websocket
depends_on:
- quant-ux-backend
ports:
- "8086:8086"
quant-ux-frontend:
image: klausss/quant-ux-frontend:latest
container_name: quant-ux-frontend
depends_on:
- quant-ux-backend
- quant-ux-websocket
ports:
- "8082:8082"
environment:
- QUX_WS_URL=ws://localhost:8086
- QUX_PROXY_URL=http://quant-ux-backend:8080
volumes:
data:
Что здесь:
SMTP не настроен (нет QUX_MAIL_*), регистрация работать не будет без ручного добавления пользователя.
Порты открыты на localhost: 8082 (фронтенд), 8080 (бэкенд), 8086 (вебсокет), 27017 (MongoDB).
QUX_JWT_PASSWORD — произвольный длинный пароль (24+ символов), нужен для JWT-токенов.
Сохраните файл (Ctrl+O, затем Ctrl+X в nano).
Шаг 3: Создание директории для данных
Создайте папку для данных MongoDB:
bash
mkdir data
Шаг 4: Запуск Quant-UX
Запустите контейнеры:
bash
docker compose up -d
Проверьте статус:
bash
docker ps
Должны быть запущены четыре контейнера: quant-ux-frontend, quant-ux-backend, quant-ux-websocket, quant-ux-mongo.
Шаг 5: Добавление пользователя вручную (без SMTP)
Так как SMTP не настроен, регистрация через интерфейс не сработает без подтверждения email. Добавим тестового пользователя через MongoDB:
Подключитесь к MongoDB:
bash
docker exec -it quant-ux-mongo mongosh
Переключитесь на базу данных Quant-UX:
javascript
use quantux
Добавьте пользователя:
Вставьте следующую команду в консоль MongoDB (замените данные на свои):
javascript
db.users.insertOne({
"email": "test@localhost",
"password": "$2a$10$YOUR_HASHED_PASSWORD", // Хэш для "password123"
"name": "Test User",
"role": "admin",
"verified": true,
"created": new Date()
})
Чтобы сгенерировать хэш пароля (например, для "password123"), используйте онлайн-инструмент bcrypt (например, bcrypt-generator.com) или установите bcrypt локально:
bash
sudo apt install -y nodejs npm
npm install -g bcrypt
node -e "require('bcrypt').hash('password123', 10, function(err, hash) { console.log(hash); });"
Пример хэша: $2a$10$XURP1XU5g8gKz5g5f2j5fO9Qz7lP8z5Q8Kj5g5f2j5fO9Qz7lP8z5
После вставки выйдите из MongoDB:
javascript
exit
Шаг 6: Доступ к Quant-UX
Откройте браузер на виртуальной машине и перейдите:
text
http://localhost:8082
Логин: test@localhost
Пароль: password123 (или тот, что вы захешировали)
Вы попадете в интерфейс Quant-UX и сможете начать создавать прототипы.
Примечания для теста
Без SMTP: Регистрация новых пользователей через UI не работает, но существующий пользователь (добавленный вручную) может войти.
Локальный доступ: Работает только на localhost. Если нужно открыть с другой машины в локальной сети, замените localhost в QUX_WS_URL на IP виртуальной машины (например, ws://192.168.1.100:8086) и перезапустите:
bash
docker compose down && docker compose up -d
Логи: Если что-то не работает, проверьте:
bash
docker logs quant-ux-frontend
docker logs quant-ux-backend
Итог
Для теста на localhost мы обошлись без SMTP, добавив пользователя вручную через MongoDB. Данные по умолчанию для SMTP отсутствуют — их нужно задавать явно или обходиться без них, как в этом примере. Теперь Quant-UX готов к тестированию на вашей виртуальной машине!
Если хотите настроить SMTP (например, через Gmail) или что-то доработать, дайте знать, и я помогу! Что дальше? Хотите протестировать прототипирование или экспорт кода?
No Comments