Egg.js+Antd 撸个简易版阿里云CS控制台?

1,356 阅读1分钟
原文链接: zhuanlan.zhihu.com
CI/CD 流程的自动部署部分

1. 预览

镜像列表:

集群列表:

应用列表:

2. 数据表

2.1 clusters 集群

// {root}/app/model/cluster.js
'use strict';

module.exports = app => {
  const { STRING, TEXT } = app.Sequelize;
  const Cluster = app.model.define('cluster', {
    name: STRING,
    region: STRING,
    masterUrl: STRING(1024),
    ca: TEXT,
    key: TEXT,
    cert: TEXT,
  });
  return Cluster;
};

2.2 images/image_tags 镜像/镜像版本

// {root}/app/model/image.js
'use strict';

module.exports = app => {
  const { STRING } = app.Sequelize;
  const Image = app.model.define('image', {
    namespace: STRING(512),
    region: STRING,
    name: STRING,
    repo_full_name: STRING(1024),
  });
  Image.associate = function() {
    app.model.Image.hasMany(app.model.ImageTag, { as: 'tags', foreignKey: 'image_id' });
  };
  return Image;
};

// {root}/app/model/image_tags.js
'use strict';

module.exports = app => {
  const { STRING, DATE } = app.Sequelize;
  const Tag = app.model.define('image_tag', {
    digest: STRING,
    tag: STRING,
    pushed_at: DATE,
  }, {
    createdAt: false,
    updatedAt: false,
  });
  Tag.associate = function() {
    app.model.ImageTag.belongsTo(app.model.Image, { as: 'tags', foreignKey: 'image_id' });
  };
  return Tag;
};

2.3 hooks webhook

'use strict';

module.exports = app => {
  const { STRING } = app.Sequelize;
  const Hook = app.model.define('hook', {
    name: STRING,
    callbackUrl: STRING(1024),
    accessToken: STRING(1024),
  });
  return Hook;
};

3. Controls/Services

3.1 CURD

3.2 Hooks

需要验证 accessToken,callbackUrl 用于向后传递信息(比如发送钉钉通知)

// https://open-doc.dingtalk.com/docs/doc.htm?spm=a219a.7629140.0.0.karFPe&treeId=257&articleId=105735&docType=1
const { data } = yield axios.post(callbackUrl,
  {
    msgtype: 'markdown',
    markdown: {
      title: '#Image Pushed',
      text: `#### 镜像:${newImage.get('name')} \n\n> 版本:${newImageTag.get('tag')}
      `,
    },
  });

截图:

3.3 Clusters 集群信息

// https://help.aliyun.com/document_detail/26065.html?spm=5176.doc26063.6.883.YpbfjI

const axios = require('axios');
const https = require('https');

try {
  const { ca, key, cert, masterUrl } = cluster;
  const agent = new https.Agent({
    ca,
    key,
    cert,
  });
  const { data } = yield axios.get(`${masterUrl}/projects/`, {
    httpsAgent: agent,
  });
  this.ctx.body = data;
} catch (error) {
  this.ctx.throw(500, '#cluster: request info failed');  
}

4. UI (React + Mobx + Antd)

4.1 packages

  • react
  • react-helmet
  • react-router-v4
  • mobx
  • mobx-persist
  • mobx-decorators
  • root-import

4.2 demo/source

数据是公司私有数据,就不放源码了,和下面项目基本一样。