visualregressiontracker/ui

Visual Regression Tracker 前端镜像

镜像概述和主要用途

该镜像为Visual Regression Tracker的官方前端应用容器化版本，提供Web可视化界面，用于管理视觉回归测试全流程。主要功能包括测试项目管理、测试用例对比、视觉差异可视化及测试报告查看，是Visual Regression Tracker视觉回归测试工具链的核心交互入口。

核心功能和特性

• 测试项目管理：支持创建、编辑、删除测试项目，配置项目基线版本与测试环境
• 视觉差异对比：提供基线图与测试图的像素级对比，支持差异高亮、透明度调节及区域选择
• 测试结果追踪：记录测试历史数据，生成趋势分析图表，支持版本间结果比对
• 多环境适配：兼容HTTP/HTTPS协议，支持自定义端口与后端API地址配置
• 轻量化交互：响应式UI设计，适配桌面与平板设备，支持批量操作与筛选

使用场景和适用范围

适用团队

• 前端开发团队（验证UI迭代兼容性）
• UI/UX设计团队（确认设计稿与实现一致性）
• QA测试团队（自动化视觉回归测试流程管理）

典型场景

• 前端持续集成/持续部署（CI/CD）流程中的视觉测试结果可视化
• 组件库升级或UI框架迁移时的视觉一致性验证
• 跨浏览器/跨设备兼容性测试的结果集中管理

详细使用方法和配置说明

环境依赖

• Docker引擎 20.10+
• 需配合Visual Regression Tracker后端API服务（建议使用官方后端镜像）

核心配置参数（环境变量）

Docker部署方案

1. 基础Docker Run部署（HTTP模式）

bash
docker run -d \
  --name vrt-frontend \
  -p 80:80 \
  -e API_URL=http://vrt-backend:4200 \  # 后端API地址（需与后端网络互通）
  visual-regression-tracker/frontend:latest

2. HTTPS模式部署（需挂载证书）

bash
docker run -d \
  --name vrt-frontend-https \
  -p 443:443 \
  -e API_URL=https://vrt-backend:4200 \
  -e HTTPS_ENABLED=true \
  -v /host/path/to/secrets:/secrets \  # 挂载本地证书目录至容器/secrets
  visual-regression-tracker/frontend:latest

3. Docker Compose集成部署

创建docker-compose.yml配置文件：

yaml
version: '3.8'
services:
  vrt-frontend:
    image: visual-regression-tracker/frontend:latest
    container_name: vrt-frontend
    ports:
      - "443:443"  # HTTPS端口（HTTP模式替换为"80:80"）
    environment:
      - API_URL=https://vrt-backend:4200  # 后端服务地址（与后端服务名对应）
      - PORT=443
      - HTTPS_ENABLED=true
    volumes:
      - ./secrets:/secrets  # 本地证书目录（HTTPS模式必填）
    depends_on:
      - vrt-backend  # 依赖后端服务启动
    networks:
      - vrt-network

  vrt-backend:
    image: visual-regression-tracker/backend:latest  # 后端镜像
    # 后端配置（参考后端文档，如数据库连接、端口等）
    networks:
      - vrt-network

networks:
  vrt-network:
    driver: bridge

本地开发环境配置（非Docker）

如需本地开发调试（非容器化环境），步骤如下：

1. 克隆仓库：git clone https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker.git
2. 进入前端目录：cd Visual-Regression-Tracker/frontend
3. 安装依赖：npm install
4. 配置环境变量：复制.env.example为.env，修改API_URL（后端地址）等参数
5. 启动开发服务：npm run start（默认端口3000，热重载模式）

SSL证书配置说明

启用HTTPS时，需确保证书文件满足：

• 证书文件命名：ssl.cert（公钥）和ssl.key（私钥）
• 存放路径：Docker部署时通过-v挂载至容器内/secrets目录（或通过HTTPS_CERT_PATH/HTTPS_KEY_PATH自定义路径）
• 证书格式：支持PEM格式（推荐通过自签名证书工具生成测试证书）

注意事项

• 后端依赖：前端服务需与Visual Regression Tracker后端API保持版本兼容，建议使用相同版本的前后端镜像
• 网络互通：Docker部署时，通过自定义网络（如示例中的vrt-network）确保前后端容器互通，避免使用localhost作为后端地址
• 权限设置：挂载的证书目录需确保容器内用户（通常为node）有读取权限，建议设置目录权限为755