使用云效结合 ESA CLI 构建CI/CD流程

更新时间:
复制为 MD 格式

本文面向将代码托管在云效的开发者,介绍如何通过云效流水线(Flow)结合 ESA CLI,实现从代码推送到构建部署的全自动化 CI/CD 流程。

概述

云效流水线(Flow)是阿里云提供的一站式持续集成和持续交付(CI/CD)服务,支持自动化构建、测试和部署。ESA CLI 是ESA提供的命令行工具,可用于快速创建 Pages 项目、上传文件和管理版本。

ESA CLI 集成到云效流水线中,可以实现以下自动化流程:

  • 代码推送到云效代码库后,自动触发流水线执行构建和部署

  • 构建产物通过 ESA CLI 自动上传至 ESA,生成新版本

  • 新版本自动完成部署发布

前提条件

准备 AccessKey

通过CLI工具进行Pages创建时,需要以AccessKey为您的服务器进行ESA站点操作的授权,因此需要先获取对应的AccessKey信息。由于阿里云账号(主账号)拥有资源的所有权限,其AccessKey一旦泄露风险巨大,所以建议您创建并授权以满足最小化权限需求的RAM用户。

  1. 使用RAM管理员账号登录RAM控制台

  2. 在左侧导航栏选择身份管理 > 用户,在用户页面单击创建用户image

  3. 填写RAM用户的登录名称,如esa-cli,勾选使用永久 AccessKey 访问用以自动创建AccessKey信息,单击确定即可。image

  4. 单击复制按钮保存当前RAM用户的AccessKey IDAccessKey Secretimage

  5. 用户页面,在新建的RAM用户右侧配置项单击添加权限,为RAM用户配置可操作ESA的权限。image

  6. 新增授权页面,搜索权限策略关键词ESA,在搜索结果中勾选AliyunESAFullAccess,单击确认新增授权即可。image

开通云效 Flow 服务

  1. 登录云效 Flow 控制台

  2. 如首次使用,按页面引导完成服务开通。

在云效流水线中配置 ESA CLI

创建Node.js模板

  1. 登录云效 Flow 控制台

  2. 单击新建流水线,选择模板为Node.js,然后在右侧使用默认选项可视化编排下的Node.js · 测试、构建,单击创建

添加流水线源

  1. 流程配置步骤,单击选择子步骤构建下的添加流水线源。image

  2. 在右侧配置项中选择代码源为Github,单击添加服务连接。image

  3. 在新建服务连接页面处单击新建,自动跳转至Github登录页面,完成登录后,单击Authorize Alicloud-DevOps允许授权云效流水线。imageimage

  4. 完成Github授权后,根据业务代码所在仓库进行配置后单击添加即可。image

配置Node环境

  1. 流程配置步骤,单击选择子步骤构建下的Node.js 构建image

  2. 单击右侧 编辑 > 任务步骤 > 安装Node环境,按照您的业务需要配置Node环境。image

  3. 单击右侧 编辑 > 任务步骤 > 构建物上传,单击右侧的image按钮,删除该步骤。image

配置构建命令

  1. 单击右侧 编辑 > 任务步骤 > 执行命令,可参考下述示例代码在执行命令处进行填写:

    npm install && npm run build
    npm i esa-cli@latest -g
    esa-cli login
    esa-cli deploy --name project_name --assets ./dist  # ./dist为例举的静态产物目录,按照您实际的框架进行填写

    image

  2. 单击右侧 编辑 > 任务步骤 > 执行命令,单击环境变量右侧的添加按钮,单击自定义参数image

  3. 添加两个环境变量:

  4. 单击运行并保存即可。

完整的 CI/CD 流程

完成上述配置后,完整的自动化部署流程如下:

  1. 代码推送:开发者将代码变更推送到云效代码库的指定分支。

  2. 触发流水线:云效 Flow 检测到代码推送,自动触发流水线运行。

  3. 构建阶段:流水线执行构建指令,生成构建产物到指定的静态产物目录。

  4. 部署阶段:流水线安装并登录 ESA CLI,将指定的静态产物目录中的构建产物部署到 ESA 站点。

验证部署成功

部署完成后,可通过以下方式确认部署是否成功:

  1. 在云效流水线首页查看最近运行阶段,构建为绿色图标则表示自动构建成功。image

  2. 点击流水线名称进入流水线详情,单击构建组件的日志按钮。image

  3. 在日志详情中选择执行命令,下拉即可找到构建成功的临时访问URL。访问URL即可查看效果。

    说明

    临时链接有效期为1小时,您绑定自定义域名进行生产使用。

    imageimage

常见问题排查

ESA CLI 登录失败,提示认证错误

可能原因:

  • AccessKey ID 或 AccessKey Secret 不正确。请检查凭据配置是否正确。

  • RAM 用户未被授予 AliyunESAFullAccess 权限。请在 RAM 控制台中确认权限配置。

  • AccessKey 已被禁用或删除。请检查 RAM 用户的 AccessKey 状态。

解决方法:重新在云效凭据管理中配置正确的 AccessKey,确保 RAM 用户拥有 ESA 相关权限。

部署失败,提示找不到站点或权限不足

可能原因:

  • RAM 用户仅有只读权限,缺少部署相关权限。请确认已授予 AliyunESAFullAccess 或包含版本管理和部署操作权限的自定义策略。

构建阶段失败

排查步骤:

  1. 在流水线运行详情中查看构建日志,定位失败的具体步骤。

  2. 确认 nodeVersion 配置与项目要求的 Node.js 版本兼容。

  3. 确认构建产物路径(./dist)与项目实际的输出目录一致。不同前端框架的构建输出目录可能不同,如 Vue 默认为 dist/,Angular 默认为 dist/<project-name>/