云效是阿里云提供的一站式 DevOps 平台，可帮助团队实现代码管理、构建、测试、部署的自动化。下面是配置前端部署流水线的详细步骤：
一、准备工作
1. 账号与权限
- 拥有阿里云账号并开通云效服务
- 项目代码已托管在代码仓库（如阿里云 Codeup、GitHub、GitLab 等）
- 具备项目管理员权限或流水线创建权限
2. 前置条件
- 前端项目需包含 package.json 文件
- 已配置构建命令（如 npm run build）
- 确定部署目标环境（测试环境/生产环境）
- 准备好部署所需的服务器或容器资源
二、创建流水线
1. 进入云效平台
- 登录 阿里云云效
- 选择「流水线」服务
2. 创建流水线
- 点击「创建流水线」按钮
- 选择「空白模板」或「前端项目模板」（推荐空白模板，更灵活）
- 输入流水线名称（如 web-fe-deploy）
- 选择代码源：连接代码仓库（如 Codeup、GitHub）
- 选择代码分支（如 main 或 master）
三、配置流水线任务
1. 初始化阶段
添加「检出代码」任务：
- 选择代码源和分支
- 配置代码检出路径（默认即可）
2. 依赖安装阶段
添加「执行命令」任务：
- 任务名称：安装依赖
- 执行环境：选择 Node.js 环境（如 Node.js 16.x）
- 执行命令：npm install –registry=https://registry.npmmirror.com
（使用国内镜像加速依赖安装）
3. 代码检查阶段（可选）
添加「执行命令」任务：
- 任务名称：代码检查
- 执行命令：npm run lint
（需在 package.json 中配置 lint 脚本）
4. 单元测试阶段（可选）
添加「执行命令」任务：
- 任务名称：单元测试
- 执行命令：npm run test
（需配置测试框架如 Jest、Mocha 等）
5. 构建阶段
添加「执行命令」任务：
- 任务名称：构建应用
- 执行命令：npm run build
（需在 package.json 中配置 build 脚本，如 vue-cli-service build 或 react-scripts build）
6. 构建产物归档
添加「归档构建产物」任务：
- 选择需要归档的文件或目录（如 dist 目录）
- 设置产物名称（如 web-fe-build）
四、配置部署任务
下载路径：这个下载路径可以自定义，只需要注意记住就是，后面的部署脚本需要填写这个配置，记住需要对应上。
部署脚本：由于前面阿里云已经构建完成，在下载路径会有对应的package.tar的压缩包，所以部署脚本存在的目的，就是解压这个压缩包到指定路径，我的部署脚本如下：
#删除原dist文件
rm –rf /www/wwwroot/yuanchangliang/dist
#重新创建dist文件
mkdir /www/wwwroot/yuanchangliang/dist
#解压构建的dist压缩包到指定目录
tar zxvf /home/admin/app/vue–yuanchangliang–dist.tgz –C /www/wwwroot/yuanchangliang/dist
#删除dist压缩包
rm –rf /home/admin/app/vue–yuanchangliang–dist.tgz
1. 部署到测试环境
添加「ECS 部署」任务（以阿里云 ECS 为例）：
- 选择服务器：添加目标 ECS 服务器（需提前配置 SSH 密钥）
- 部署方式：选择「上传文件并执行命令」
- 上传文件：选择之前归档的构建产物
- 目标路径：指定服务器上的部署路径（如 /var/www/html）
- 执行命令：部署后执行的命令（如重启服务）：# 示例：重新加载 Nginx
sudo systemctl reload nginx
2. 部署到生产环境（需审批）
添加「人工卡点」任务：
- 配置审批人员（确保只有授权人员可触发生产部署）
添加「ECS 部署」任务（与测试环境类似，但目标服务器不同）
五、配置触发规则
1. 代码提交触发
- 选择「代码变更触发」
- 配置触发分支（如 main、release/*）
- 选择触发事件（如「代码推送」、「合并请求」）
2. 定时触发（可选）
- 选择「定时触发」
- 配置触发时间（如每天凌晨 2 点）
六、配置环境变量
添加环境变量（如 API 地址、密钥等）：
- 在流水线设置中选择「环境变量」
- 添加变量（如 API_URL、APP_KEY）
- 在构建命令中引用变量（如 process.env.API_URL）
七、保存并运行流水线
1. 保存流水线
- 点击「保存」按钮保存配置
2. 手动触发测试
- 点击「运行」按钮手动触发流水线
- 查看各阶段执行情况和日志
- 检查部署结果
八、高级配置
1. 缓存依赖
在依赖安装阶段前添加「缓存」任务：
- 缓存路径：~/.npm
- 缓存键：npm-cache-${{ hashFiles('package-lock.json') }}
2. 多环境部署
- 复制流水线创建不同环境的部署流水线（如 staging、production）
- 在流水线中使用环境变量区分不同环境配置
3. 部署回滚
添加「部署回滚」任务：
- 选择历史构建版本
- 执行与部署相同的操作，但使用历史构建产物
九、常见问题与解决方案
1. 依赖安装失败
- 检查网络连接
- 使用国内镜像源（如 npmmirror.com）
- 确保 package.json 和 package-lock.json 文件正确
2. 构建失败
- 检查构建命令是否正确
- 查看构建日志定位错误
- 确保项目在本地可正常构建
3. 部署失败
- 检查服务器连接是否正常（SSH 密钥是否正确）
- 确保目标路径有写入权限
- 检查部署后执行的命令是否正确
4. 权限问题
- 确保云效服务角色有访问代码仓库和服务器的权限
- 配置合适的 IAM 权限策略
通过以上步骤，你可以在云效平台配置一个完整的前端部署流水线，实现代码提交后自动构建、测试和部署，大大提高开发效率和部署质量。
