云效是阿里云提供的一站式 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 权限策略

通过以上步骤，你可以在云效平台配置一个完整的前端部署流水线，实现代码提交后自动构建、测试和部署，大大提高开发效率和部署质量。