开源原型设计测试平台Quant-UX，Docker极简部署，内网穿透远程访问，数据驱动设计决策

项目介绍

Quant-UX 是一个强大的原型设计、用户测试和学习平台，专为设计师和产品经理打造。它集原型设计、可用性测试和数据分析于一身，让你能够快速验证设计方案并获得数据驱动的用户洞察。

无论你是在进行用户研究、原型测试还是收集设计反馈，Quant-UX 都能为你提供一个完整的解决方案。通过这个平台，你可以创建交互式原型、进行用户测试、收集定量和定性数据，从而做出更明智的设计决策。项目采用现代化的技术栈构建，提供了开箱即用的 Docker 部署方案，让部署变得简单快捷。

项目地址：点我跳转

部署安装

如果你需要在公网环境下访问你的 Quant-UX 实例，建议配置内网穿透服务。推荐使用帕斯内网穿透，先注册账号以备后用。具体的配置步骤可以参考这份详细的上手指南，支持全平台操作。

使用 Docker Compose 快速部署

这是最推荐的部署方式，只需复制配置文件即可。

第一步：创建 docker-compose 配置文件

复制下列的配置内容到你的 `docker-compose.yml` 文件中：

1version: '3'
2
3services:
4  mongo:
5    restart: always
6    container_name: quant-ux-mongo
7    image: mongo
8    volumes:
9      - ./data:/data/db
10
11  qux-fe:
12    restart: always
13    container_name: quant-ux-frontend
14    image: klausenschaefersinho/quant-ux
15    environment:
16      - QUX_PROXY_URL=http://quant-ux-backend:8080
17      - QUX_AUTH=qux
18      - QUX_KEYCLOAK_REALM=
19      - QUX_KEYCLOAK_CLIENT=
20      - QUX_KEYCLOAK_URL=
21      - QUX_WS_URL=ws://127.0.0.1:8086
22    links:
23      - mongo
24      - qux-be
25    ports:
26      - 8082:8082
27    depends_on:
28      - qux-be
29
30  qux-be:
31    restart: always
32    container_name: quant-ux-backend
33    image: klausenschaefersinho/quant-ux-backend
34    volumes:
35      - ./quant-ux-data:/app-data
36    environment:
37      - QUX_HTTP_HOST=http://quant-ux-frontend:8082
38      - QUX_HTTP_PORT=8080
39      - QUX_MONGO_DB_NAME=quantux
40      - QUX_MONGO_TABLE_PREFIX=quantux
41      - QUX_MONGO_CONNECTION_STRING=mongodb://quant-ux-mongo:27017
42      - QUX_MAIL_USER=mail_admin@example.com
43      - QUX_MAIL_PASSWORD=sTr0ngPa55w0Rd
44      - QUX_MAIL_HOST=mail.example.com
45      - QUX_JWT_PASSWORD=your-secure-jwt-secret-string
46      - QUX_IMAGE_FOLDER_USER=/app-data/qux-images
47      - QUX_IMAGE_FOLDER_APPS=/app-data/qux-image-apps
48      - TZ=Asia/Shanghai
49      - QUX_AUTH_SERVICE=qux
50      - QUX_USER_ALLOW_SIGNUP=true
51      - QUX_USER_ALLOWED_DOMAINS=*
52    depends_on:
53      - mongo
54
55  qux-ws:
56    restart: always
57    container_name: quant-ux-websocket-server
58    image: klausenschaefersinho/quant-ux-websocket
59    environment:
60      - QUX_SERVER=http://quant-ux-backend:8080/
61      - QUX_SERVER_PORT=8086
62    ports:
63      - 8086:8086
64    links:
65      - qux-be
66    depends_on:
67      - qux-be

第二步：配置环境变量

在启动前，你需要根据实际情况修改以下关键环境变量：

必须设置：

QUX_MAIL_USER：你的 SMTP 邮箱地址（用于发送密码重置邮件）

QUX_MAIL_PASSWORD：SMTP 邮箱密码

QUX_MAIL_HOST：SMTP 服务器地址（如 smtp.gmail.com）

QUX_JWT_PASSWORD：JWT 密钥，建议设置为一个较长的随机字符串，确保系统安全性

可选设置：

TZ：时区设置，默认为 America/Chicago，可改为 Asia/Shanghai 等

QUX_USER_ALLOW_SIGNUP：是否允许用户注册，默认为 true

QUX_USER_ALLOWED_DOMAINS：允许注册的域名列表，* 表示允许所有域名

第三步：调整端口配置

如果你的主机已经占用了 8082 或 8086 端口，可以修改配置中的左侧端口号。例如，如果要将前端端口改为 8888，只需修改：

1ports:
2  - 8888:8082  # 8888 是主机端口，8082 是容器内端口

第四步：创建数据存储目录

在你的项目目录下创建一个 `quant-ux-data` 文件夹，用于持久化存储用户上传的图片和应用数据：

1mkdir quant-ux-data

第五步：启动服务

在包含 `docker-compose.yml` 文件的目录下执行以下命令：

1docker-compose up -d

等待所有容器启动完成（通常需要 1-2 分钟）。

第六步：访问应用

打开浏览器，访问 `http://你的服务器IP:8082` 即可进入 Quant-UX 应用。

如果一切正常，你会看到 Quant-UX 的登录界面。首次使用时，你可以注册一个新账户开始体验。

查看运行状态

如果想查看容器运行状态，可以执行：

1docker-compose ps

如果想查看日志，可以执行：

1docker-compose logs -f

停止服务

需要停止服务时，执行：

1docker-compose down

总结

通过上述步骤，你已经成功部署了一个完整的 Quant-UX 系统，包括前端、后端、数据库和 WebSocket 服务器。现在你可以开始创建原型、进行用户测试，并收集宝贵的设计反馈数据。如有任何问题，可以参考官方文档或查看 Docker 日志进行排查。

本篇教程结束。