背景：项目组每周一个版本需要发布，在发布之前需要把当周的版本部署到测试服务器上给测试同学进行回归，每周出的包（客户端包 + 服务器包）都需要手动进行部署，整个过程耗时在 20+min，希望可以做一个通过上传包体，来达到自动部署的效果，有前辈给指点下思路吗
「原创声明：保留所有权利，禁止转载」
CICD 自动构建不就好了吗？为什么还要手动部署？
自动部署可视化窗口设计方案
1. 项目背景
现状痛点
- 每周版本发布前需要手动部署到测试服务器
- 部署过程包含客户端包和服务器包两个部分
- 手动操作效率低，容易出错
- 缺乏部署状态的实时监控
- 测试团队无法及时了解部署进度
目标
- 实现一键自动化部署
- 提供直观的可视化界面
- 实时监控部署状态和进度
- 支持部署历史记录和回滚
- 减少人工干预，提高效率
2. 系统架构设计
2.1 整体架构
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 前端界面 │ │ 后端API服务 │ │ 部署执行器 │
│ (Vue/React) │◄──►│ (Node.js) │◄──►│ (Shell/CI) │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │ │
└───────────────────────┼───────────────────────┘
▼
┌─────────────────┐
│ 数据库存储 │
│ (MongoDB/MySQL)│
└─────────────────┘
2.2 核心模块
- 用户界面层 - 可视化部署控制台
- 业务逻辑层 - 部署流程管理
- 执行引擎层 - 具体部署操作
- 数据存储层 - 配置和日志存储
3. 功能设计
3.1 主要功能模块
3.1.1 部署控制台
- 一键部署按钮：选择版本一键触发部署
- 实时状态显示：部署进度条、当前步骤、执行日志
- 环境选择：开发/测试/预生产环境切换
- 版本管理：版本列表、版本对比、回滚功能
3.1.2 配置管理
- 服务器配置：目标服务器信息管理
- 部署策略：蓝绿部署、灰度发布等策略配置
- 通知设置：邮件、微信、钉钉等通知渠道
- 权限管理：用户角色和操作权限控制
3.1.3 监控告警
- 部署状态监控：成功/失败/进行中状态跟踪
- 性能监控：部署耗时、资源使用情况
- 异常告警：部署失败自动通知相关人员
- 日志管理：详细部署日志查看和搜索
3.2 界面设计
3.2.1 主控制台界面
┌─────────────────────────────────────────────────────────────────┐
│ 🚀 自动部署控制台 用户：张三 │
├─────────────────────────────────────────────────────────────────┤
│ 环境：[测试环境 ▼] 版本：[v1.2.3 ▼] [🔄 刷新] [⚙️ 设置] │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ 客户端部署 │ │ 服务器部署 │ │ 数据库迁移 │ │
│ │ ✅ 已完成 │ │ 🔄 进行中 │ │ ⏳ 等待中 │ │
│ │ 耗时: 2分30秒 │ │ 进度: 65% │ │ │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ 部署进度：████████████████████████░░░░░░░░ 75% │
│ │
│ 📝 实时日志： │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ [14:32:01] 开始客户端包部署... │ │
│ │ [14:32:15] 上传客户端包到服务器... │ │
│ │ [14:34:31] ✅ 客户端部署完成 │ │
│ │ [14:34:32] 开始服务器包部署... │ │
│ │ [14:34:45] 正在停止旧服务... │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
│ [🚀 开始部署] [⏸️ 暂停] [⏹️ 停止] [🔙 回滚到上一版本] │
└─────────────────────────────────────────────────────────────────┘
3.2.2 历史记录界面
┌─────────────────────────────────────────────────────────────────┐
│ 📊 部署历史记录 │
├─────────────────────────────────────────────────────────────────┤
│ 时间范围：[最近7天 ▼] 状态：[全部 ▼] [🔍 搜索框] │
├──────┬─────────┬──────────┬────────┬─────────┬──────────────────┤
│ 状态 │ 版本 │ 部署时间 │ 耗时 │ 操作人 │ 操作 │
├──────┼─────────┼──────────┼────────┼─────────┼──────────────────┤
│ ✅ │ v1.2.3 │ 14:30 │ 8分钟 │ 张三 │ [查看日志][回滚] │
│ ❌ │ v1.2.2 │ 10:15 │ 失败 │ 李四 │ [查看日志][重试] │
│ ✅ │ v1.2.1 │ 昨天 │ 6分钟 │ 王五 │ [查看日志] │
└──────┴─────────┴──────────┴────────┴─────────┴──────────────────┘
4. 技术实现方案
4.1 前端技术栈
// 推荐技术栈
- 框架：Vue 3 + TypeScript 或 React + TypeScript
- UI库：Element Plus / Ant Design
- 状态管理：Pinia / Redux Toolkit
- 实时通信：WebSocket / Socket.io
- 图表库：ECharts / Chart.js
- 构建工具：Vite / Webpack
4.2 后端技术栈
// 推荐技术栈
- 运行时：Node.js + Express 或 Python + FastAPI
- 数据库：MongoDB / PostgreSQL
- 消息队列：Redis / RabbitMQ
- 任务调度：Bull Queue / Celery
- 容器化：Docker + Docker Compose
- CI/CD：Jenkins / GitLab CI / GitHub Actions
4.3 部署执行器设计
#!/bin/bash
# deploy.sh - 部署脚本示例
# 配置参数
VERSION=$1
ENVIRONMENT=$2
CLIENT_PACKAGE_URL=$3
SERVER_PACKAGE_URL=$4
# 1. 前置检查
echo "开始部署检查..."
check_environment
check_dependencies
# 2. 下载部署包
echo "下载客户端包..."
download_package $CLIENT_PACKAGE_URL "client"
echo "下载服务器包..."
download_package $SERVER_PACKAGE_URL "server"
# 3. 备份当前版本
echo "备份当前版本..."
backup_current_version
# 4. 部署客户端
echo "部署客户端..."
deploy_client
# 5. 部署服务器
echo "部署服务器..."
deploy_server
# 6. 健康检查
echo "执行健康检查..."
health_check
# 7. 清理临时文件
echo "清理临时文件..."
cleanup
echo "✅ 部署完成！"
4.4 API 接口设计
// 部署相关接口
interface DeployAPI {
// 触发部署
POST /api/deploy {
version: string;
environment: string;
packages: {
client: string;
server: string;
};
}
// 获取部署状态
GET /api/deploy/status/:deployId
// 获取部署日志
GET /api/deploy/logs/:deployId
// 停止部署
POST /api/deploy/stop/:deployId
// 回滚版本
POST /api/deploy/rollback {
fromVersion: string;
toVersion: string;
}
// 获取部署历史
GET /api/deploy/history?page=1&limit=10&status=all
}
5. 实施步骤
阶段 1：MVP 版本（2 周）
- [ ] 基础界面框架搭建
- [ ] 简单的部署触发功能
- [ ] 基本的状态显示
- [ ] 部署日志查看
阶段 2：核心功能（3 周）
- [ ] 完整的部署流程实现
- [ ] 实时状态更新
- [ ] 错误处理和回滚
- [ ] 用户权限管理
阶段 3：高级功能（2 周）
- [ ] 部署策略配置
- [ ] 监控告警系统
- [ ] 性能优化
- [ ] 移动端适配
阶段 4：优化迭代（持续）
- [ ] 用户体验优化
- [ ] 性能监控完善
- [ ] 自动化测试
- [ ] 文档完善
6. 关键技术点
6.1 实时状态更新
// WebSocket 实现实时更新
const socket = io('/deploy');
socket.on('deploy-progress', (data) => {
updateProgress(data.percentage);
updateCurrentStep(data.step);
appendLog(data.log);
});
socket.on('deploy-complete', (data) => {
showNotification('部署完成', data.result);
refreshDeployHistory();
});
6.2 部署状态机
// 部署状态管理
const DeployStates = {
PENDING: 'pending',
DOWNLOADING: 'downloading',
DEPLOYING_CLIENT: 'deploying_client',
DEPLOYING_SERVER: 'deploying_server',
HEALTH_CHECK: 'health_check',
SUCCESS: 'success',
FAILED: 'failed',
ROLLBACK: 'rollback'
};
class DeploymentStateMachine {
transition(currentState, action) {
// 状态转换逻辑
}
}
6.3 错误处理和重试机制
// 重试机制
async function deployWithRetry(config, maxRetries = 3) {
for (let i = 0; i < maxRetries; i++) {
try {
return await executeDeploy(config);
} catch (error) {
if (i === maxRetries - 1) throw error;
await delay(Math.pow(2, i) * 1000); // 指数退避
}
}
}
7. 预期效果
7.1 效率提升
- 部署时间从平均 30 分钟降低到 8 分钟
- 减少人工操作错误率 90%
- 提高部署成功率到 99%
7.2 用户体验
- 可视化界面直观易用
- 实时状态反馈减少等待焦虑
- 历史记录便于问题追踪
7.3 团队协作
- 测试团队可及时了解部署状态
- 开发团队减少重复性工作
- 运维团队获得完整的部署监控
8. 风险控制
8.1 技术风险
- 网络异常：实现断点续传和重试机制
- 服务器故障：多服务器部署和故障转移
- 版本冲突：严格的版本管理和回滚策略
8.2 操作风险
- 误操作：关键操作二次确认
- 权限滥用：细粒度权限控制
- 数据丢失：定期备份和恢复测试
9. 后续扩展
9.1 功能扩展
- 多环境管理（开发/测试/预生产/生产）
- A/B 测试支持
- 自动化测试集成
- 性能监控集成
9.2 技术扩展
- 容器化部署支持
- 云原生架构迁移
- AI 辅助故障诊断
- 移动端 APP 开发
这个方案提供了一个完整的自动部署可视化窗口设计思路，您可以根据实际情况调整技术栈和功能范围。建议先实现 MVP 版本验证可行性，再逐步完善功能。
线上上线是如何操作的？不会也是手动部署？应该都是 jenkins + salt 部署？线上部署那一套在测试服部署一下就 OK。客户端包可以直接部署一个 Nginx，让前端同学开发完之后直接放到 nginx 配置对应的目录，然后在通知群发提测通知带上对应的链接就可以了。
把打包流程转移到 Jenkins 上应该就可以了