Build CI/CD pipelines with Yunxiao Flow and ESA CLI

更新时间:
复制 MD 格式

Automate ESA deployments by integrating ESA CLI into your Yunxiao Flow pipeline.

Overview

Yunxiao Flow is a CI/CD service that automates builds, tests, and deployments. ESA CLI is a command-line tool from ESA for creating Pages projects, uploading files, and managing versions.

Integrating ESA CLI into Yunxiao Flow automates the following:

  • A code push triggers the pipeline build and deployment.

  • The pipeline uploads build artifacts to ESA via ESA CLI, generating a new site version.

  • The new version is automatically deployed and published.

Prerequisites

Prepare an AccessKey

Creating Pages with the CLI requires an AccessKey to authorize site operations on your ESA account. Because an Alibaba Cloud account AccessKey grants full access to all resources, we recommend creating a RAM user with only the minimum required permissions to reduce security risk.

  1. Log on to the RAM console with a RAM administrator account.

  2. In the left-side navigation pane, choose Identities > Users. On the Users page, click Create User.image

  3. Enter a logon name for the RAM user, such as esa-cli. Select Use permanent AccessKey to access to automatically create an AccessKey. Click OK.image

  4. Click Copy to save the AccessKey ID and AccessKey Secret of the RAM user.image

  5. On the Users page, find the new RAM user and click Add Permissions in the Actions column to grant the RAM user permissions for ESA.image

  6. On the Grant Permissions panel, search for ESA in the policy list. Select AliyunESAFullAccess from the results and click Grant permissions.image

Enable Yunxiao Flow

  1. Go to the Flow console .

  2. On first use, follow the prompts to enable the service.

Configure ESA CLI in Yunxiao Flow

Create a Node.js pipeline

  1. Go to the Flow console .

  2. Click Create Pipeline, select the Node.js template, and then click Create with the default Visual Editor option (Node.js · Test and Build) in the right panel.

Add a pipeline source

  1. On the Process Configuration page, click Add Pipeline Source under the Build sub-step.

  2. Select GitHub as the code source in the right-side panel, and then click Add Service Connection.

  3. On the Create Service Connection page, click Create. You are redirected to the GitHub login page. Sign in and click Authorize Alicloud-DevOps.

  4. After authorization, select your code repository and click Add.

Configure the Node.js environment

  1. On the Process Configuration page, click Node.js Build under the Build sub-step.

  2. In the right panel, click Edit > Task Steps > Install Node Environment and set the Node.js version for your project.

  3. In the right panel, click Edit > Task Steps > Upload Build Artifact, and then click the Delete button on the right to remove this step.

Configure build commands

  1. In the right panel, click Edit > Task Steps > Run Commands and enter the following commands in the Run Commands field:

    npm install && npm run build
    npm i esa-cli@latest -g
    esa-cli login
    esa-cli deploy --name project_name --assets ./dist  # ./dist is an example. Replace it with the actual static artifact directory for your framework
  2. In the right panel, click Edit > Task Steps > Run Commands, click Add next to Environment Variables, and then select Custom Parameter.

  3. Add the following two environment variables:

  4. Click Run and Save.

Complete CI/CD workflow

Once configured, the workflow runs as follows:

  1. Push code: Push code changes to the target branch in your Yunxiao repository.

  2. Trigger pipeline: Yunxiao Flow detects the push and runs the pipeline.

  3. Build stage: The pipeline runs the build commands and generates artifacts in the output directory.

  4. Deploy stage: The pipeline installs and logs in to ESA CLI and deploys the artifacts to your ESA site.

Verify the deployment

After deployment, verify the result:

  1. On the Yunxiao Flow pipeline homepage, check the latest run. A green build icon indicates success.

  2. Click the pipeline name to open the pipeline details, and then click Logs on the build component.

  3. In the log details, select Run Commands from the dropdown to find the temporary access URL generated by a successful build. Open it to verify the deployed content.

    Note

    This link expires after one hour. Bind a custom domain for production use.

    Temporary URL details

Troubleshooting

ESA CLI login fails with an authentication error

Possible causes:

  • The AccessKey ID or AccessKey Secret is incorrect. Verify the credentials.

  • The RAM user lacks the AliyunESAFullAccess policy. Verify permissions in the RAM console.

  • The AccessKey is disabled or deleted. Check its status in the RAM console.

Resolution: Reconfigure the AccessKey in Yunxiao credential management. Ensure the RAM user has the required ESA permissions.

Deployment fails because the site is not found or permissions are insufficient

Possible causes:

  • The RAM user has only read permissions and lacks deployment permissions. Grant the AliyunESAFullAccess policy or a custom policy with version management and deployment permissions.

Build stage fails

Troubleshooting steps:

  1. Check the build logs in the pipeline run details to identify the specific step that failed.

  2. Verify the nodeVersion matches your project's Node.js version requirement.

  3. Verify the build artifact path (./dist) matches your project's output directory. Default directories vary by framework — Vue uses dist/, Angular uses dist/<project-name>/.