Blue鲸二次开发

背景

Blue鲸产品生态做的好，Leader看的很巴适。追求又快又好的准则，开始Blue鲸二次开发，有的功能改造适配、没有的功能开发，一种拆散重组式缝合怪诞生了。

基座

开源基座社区版 TencentBlueKing，使用最新的稳定版本。

开发策略

• 通用系统功能按照自身产品规划裁减 + 重组
• 不满足规划部分改造 + 新开发
• 打通认证体系融合自身其它产品，形成自身产品生态(纵向产品链)

牛马操刀

回到前端技术实现方面，BK产品族很多，虽然前端架构、打包部署开发上大体相同但还是存在大量差异化。

前端架构

技术选型

vue2 + bk-magic-vue架构，在vue2.0使用上差异却不尽相同

• vue2.0 + js
• vue2.0 + ts
• vue2.0 + ts + Composition API

node依赖

对node版本的依赖也存在差异，总共引入三个版本的node，同样npm也使用了三个。其中node-v18.20.2，又同步安装了pnpm

 nvm ls
    18.20.2
    16.16.0
  * 14.17.6 (Currently using 64-bit executable)

综合分析来看，有个项目技术选型上比较激进，例如在使用vue2的情况下又引入部分vue3的特性Composition API，有的项目技术选型或升级上比较中规中矩。对于一个产品簇来说，在开发、部署、升级多方面造成比较大的麻烦。

本地开发

每个项目的本地启动代理方式也存在较大差异，使用方式总结：

• 使用webpack，将配置核心提出local_settings.js文件进行配置
• 使用webpack，将配置剥离成多层依赖文件配置
• 使用webpack，代理Proxy能力开发node中间件进行承载
• 使用webpack，代理Proxy能力使用document.domain

认证打通

Cookie中bk_token作为必要令牌，有些项目需要更多一些eg：X-CSRFToken、完整的Cookie，最好屏蔽掉项目中token认证不通过跳转登录页面的逻辑，本地开发需完全掌握页面行为。

本地打包

各个项目打包指令不尽相同，打包目标路径更不相同，为避免build完找不到目录，认真做好笔记。部分项目build不能更新之前生产包，建议先删掉之前打的包再进行build。

生产部署

如果沿用社区版部署方式，前端服务部署方式差异也比较大。

• 生产包全部放置在规划的目录
• 生产包把资源css/js/assets和入口文件index.html拆开分别放置在两个规划目录

生产包放置完成后，还存在是否重启web服务的问题

• 需重启web服务承载的容器docker restart bk_xx
• 需重启web服务systemctl restart bk-xx-web.service
• 不重启，放置完生产包即生效

资源对接

把自身产品的资源通过云账号对接、新建任务发现方式同步到BK管理。将运维、监控、资源管理、告警事件、工单等应用场景拉通，为服务平台提供下层产品支撑。

Web项目

项目	产品定位	node版本
bk-monitor	监控	v18.20.2
bk-cmdb	资源管理	v14.17.6
bk-iam-saas	权限管理	v14.17.6
bk-itsm	工单管理	v16.16.0
bk-nodeman	节点管理	v14.17.6
bk-sops	运维	v14.17.6
bk-user	用户管理	v14.17.6

业务重组

以bk-monitor为业务基座，裁减部分功能，通过iframe方式组织其它6个项目嵌入在bk-monitor上，处理风格差异和布局问题完成重组。

风格问题

bk-magic-vue支持两种风格dark、light，嵌入项目统一成light风格。

布局问题

布局问题主要是：

• 嵌入项目存在顶部导航、框架项目也有顶部导航。框架项目中新建路由及导航作为嵌入页面入口。

// 判断是否嵌入在iframe中来决定是否屏蔽顶部导航
window.parent === window.self

• 调整高度计算方式来避免纵向滚动条或显示不全的问题

.inframe {
    height:100vh;
}
// 计算上减去导航高度50px
.noframe {
    height:calc(100vh - 50px);
}

复用问题

场景×：本身资源拓扑只存在某个节点上，只会绘制出本身资源关联的其它节点。无法全局看清整个资源拓扑。新开发页面来实现全局拓扑，迁移过程中发现部分功能页面可以复用，然而复用会带来页面无法访问或操作失效问题。bk前端对每个路由界面进行了标记，从而控制了界面的访问及功能操作。新建路由无法完成对复用页面的访问或操作，如下所示：

// 非业务拓扑主页面不触发设置节点选中等，防止查询条件非预期的被清除
if (![MENU_BUSINESS_HOST_AND_SERVICE, MENU_RESOURCE_BUSINESS_DETAILS].includes(this.$route.name)) {
  return
}

为规避防不胜防的约束，新开功能页面时，路由新建、页面新建、梳理业务，避免复用。

总结

一套操作下来就初具雏形，开发文档、Readme只说了90%、说对99%，社区版还是有所保留，得自身进行摸索。