backstage-plugin-aliyun-devops

Backstage 阿里云 DevOps 插件

基于阿里云 DevOps API 的 Backstage 插件，提供流水线触发和状态展示功能。

功能特性

• DevopsPipelineCard: 展示流水线构建状态和执行日志
• DevopsTriggerButton: 一键触发流水线构建
• 实时状态更新和日志查看
• 支持自定义构建参数和环境变量

安装

环境要求

• Node.js 18-21 (推荐使用 18.x 或 20.x LTS)
• Yarn 1.22+

# 在 Backstage 应用根目录下
yarn add @internal/backstage-plugin-aliyun-devops

重要提示：

• Node.js 21.7.3 用户: 请查看 Node.js 21 快速开始指南
• 遇到安装问题？ 请查看 安装故障排除指南
• 版本兼容性: 请查看 Node.js 兼容性说明

配置

1. 前端集成

在 packages/app/src/App.tsx 中注册插件：

import { aliyunDevopsPlugin } from '@internal/backstage-plugin-aliyun-devops';

const app = createApp({
  apis,
  plugins: [
    // ... 其他插件
    aliyunDevopsPlugin,
  ],
});

2. 插件配置

安装插件后，访问插件页面并点击"配置"按钮进行设置：

1. 个人访问令牌: 在云效控制台生成的个人访问令牌
2. 组织 ID: 云效组织的唯一标识符
3. 项目 ID: 默认项目的唯一标识符
4. API 端点: 云效 API 服务端点（可选，默认为杭州区域）

配置信息会安全地存储在浏览器本地存储中。

使用方法

方式一：使用自动配置组件（推荐）

import React from 'react';
import { Grid } from '@material-ui/core';
import { 
  DevopsPipelineCardWithConfig, 
  DevopsTriggerButtonWithConfig 
} from '@internal/backstage-plugin-aliyun-devops';

export const EntityDevOpsContent = () => {
  return (
    <Grid container spacing={3}>
      <Grid item xs={12} md={8}>
        <DevopsPipelineCardWithConfig
          pipelineId="your-pipeline-id"
          title="构建状态"
        />
      </Grid>
      
      <Grid item xs={12} md={4}>
        <DevopsTriggerButtonWithConfig
          pipelineId="your-pipeline-id"
          buttonText="部署到生产环境"
          onTriggerSuccess={(runId) => {
            console.log('部署触发成功:', runId);
          }}
        />
      </Grid>
    </Grid>
  );
};

方式二：手动指定参数

import React from 'react';
import { Grid } from '@material-ui/core';
import { 
  DevopsPipelineCard, 
  DevopsTriggerButton 
} from '@internal/backstage-plugin-aliyun-devops';

export const EntityDevOpsContent = () => {
  return (
    <Grid container spacing={3}>
      <Grid item xs={12} md={8}>
        <DevopsPipelineCard
          organizationId="your-org-id"
          projectId="your-project-id"
          pipelineId="your-pipeline-id"
          title="构建状态"
        />
      </Grid>
      
      <Grid item xs={12} md={4}>
        <DevopsTriggerButton
          organizationId="your-org-id"
          projectId="your-project-id"
          pipelineId="your-pipeline-id"
          buttonText="部署到生产环境"
          onTriggerSuccess={(runId) => {
            console.log('部署触发成功:', runId);
          }}
        />
      </Grid>
    </Grid>
  );
};

在 catalog-info.yaml 中添加注解

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: my-service
  annotations:
    aliyun.com/devops-organization-id: "your-organization-id"
    aliyun.com/devops-project-id: "your-project-id"  
    aliyun.com/devops-pipeline-id: "your-pipeline-id"
spec:
  type: service
  lifecycle: production
  owner: team-a

API 参考

DevopsPipelineCard Props

属性	类型	必需	描述
organizationId	string	✓	阿里云组织ID
projectId	string	✓	项目ID
pipelineId	string	✓	流水线ID
title	string		卡片标题

DevopsTriggerButton Props

属性	类型	必需	描述
organizationId	string	✓	阿里云组织ID
projectId	string	✓	项目ID
pipelineId	string	✓	流水线ID
buttonText	string		按钮文本
variant	string		按钮样式
color	string		按钮颜色
disabled	boolean		是否禁用
onTriggerSuccess	function		触发成功回调
onTriggerError	function		触发失败回调

开发

# 安装依赖
yarn install

# 启动开发服务器
yarn start

# 构建
yarn build

# 运行测试
yarn test

# 代码检查
yarn lint

许可证

Apache-2.0