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服务（建议使用***后端镜像）

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

参数名	描述	默认值	示例值
`API_URL`	后端API服务地址	`http://localhost:4200`	`[***]`
`PORT`	前端服务监听端口	`80`	`3000`
`HTTPS_ENABLED`	是否启用HTTPS协议	`false`	`true`
`HTTPS_CERT_PATH`	SSL证书文件路径（容器内）	`/secrets/ssl.cert`	`/app/certs/custom.crt`
`HTTPS_KEY_PATH`	SSL密钥文件路径（容器内）	`/secrets/ssl.key`	`/app/certs/custom.key`

Docker部署方案

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

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

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

bash
docker run -d \
  --name vrt-frontend-https \
  -p 443:443 \
  -e API_URL=[***] \
  -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=[***]  # 后端服务地址（与后端服务名对应）
      - 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