《可视化搭建系统》“星空”整体架构（一）

背景

初次相逢

2018 年下半年，当时在蘑菇街实习，接触到运营搭建系统，当时内部叫“魔方”，印象中做的第一个前端需求是写一个 H5 页面，用来预测高考能上什么大学（当时高考刚结束不久）。

需求比较简单，顶部轮播图用来引流，内容区域展示表单，提交后页面随机出现预测的大学名称，类似下面这样。

然后我就接触到了“魔方”，运营告知我，这个需求不需要再重复写轮播图了，只用写下面的表单就可以。得益于“魔方”，我写完表单物料，推送到物料仓库后，运营直接在“魔方”搭建页面进行预览、发布，一个简单的 H5 活动页面，就这样上线了。

缘分就这样产生了，奈何自己当初太菜（哦，其实现在也菜，只是菜的不像当初那么明显），一直想学习下“魔方”的实现，但直到离职，也木有去学习过魔方的代码，只是看过一点点“魔方”的分享 ppt，但是分享也只是停留在使用、操作层面，没有讲实现。

再次相遇

2020，从蘑菇街离职后，去了一家创业公司，典型的电商公司，运营活动需求频繁。我入职的时候，内部已经有了一套类似“魔方”的搭建系统，叫“乐高”。

使用下来，系统虽相对简单（相比“魔方”，毕竟“魔方”在蘑菇街迭代了很多年了），但能用，并且支撑了线上 100+ 页面的运营，当时，就决定这次一定要学习一下系统的实现。

后面也确实看了“乐高”的实现，但也存在一些问题，比如物料跟运营后台耦合，且物料没有版本号等问题。当时我们几个小伙伴，也在商量“乐高2.0”的改版。但好景不长，2.0 还没开始做，就离职了。虽然没干多久，但也是一段难得的经历。

最终决定

2021，从创业公司离职后，就到了现在的公司。一直想自己写一个“简版魔方”，但迟迟没有行动。一方面确实挺忙，其次思路上也没那么清晰。

直到一次偶然，我接到了一个开发者的需求，需要把 WebRTC 拉流组件，提供给外部开发者，且开发者环境存在多个（react、vue 都有），当时调研下来，采用了 webcomponents 的方案，用来抹平框架之间的差异性，我们这边也只需要维护一份代码。

做完这个需求，我再次想到了“魔方”，很多搭建系统的实现方式都是 ssr，且物料要么是 vue 的，要么是 react 的。我当时就在想，那假如采用 webcomponents 来进行搭建，本质上我就是在操作一堆 dom，对 dom 进行拼接。

有了想法之后，找到了好朋友 ty，我向他表达了我的想法，然后开始画架构图，抽空余时间开始写自己的“简版魔方”，后面我给自搭建系统，取了一个名字 —— “星空”。

“星空”架构

两步走

简单来说，核心的就两个步，首先前端进行物料的开发，其次运营在搭建平台使用物料搭建页面。

ok，明确了核心的两步，我们开始对这核心的两步进行拆解。

拆解一 物料开发

既然要进行物料开发，就引申出两个问题：

• 开发环境
• 物料存储

开发环境采用 cli 的形式，核心的功能需要包含：

• 模板选择、环境初始化
• 打包物料、发布物料

物料存储采用 nginx 容器，docker 进行管理。

拆解二 运营后台

运营后台提供给运营搭建页面使用，核心功能包含：

• 物料搜索，选择
• 页面搭建、物料数据配置、页面数据配置
• 页面预览、发布

结合拆解一、二

结合上面的拆解一二，会发现少了必要的一环，server 服务端。

server 服务端主要用来管理数据，核心功能包含：

• 管理物料数据，如物料版本控制
• 管理页面数据，如当前页面由哪些物料组成，顺序是怎样的，是否已发布等
• 管理配置数据，如当前页面的物料，运营配置的数据是怎样的
• 管理页面跟物料的版本数据，如当前页面的物料，当前的版本号是多少

因此，可以总结出，一共需要 4 个部分（cli、服务端、静态容器、搭建后台），下面是简易的流程图：

上述只是使用上的简易流程图，具体每个部分的技术细节会在后续的章节中逐一详解。（比如，物料模板怎么设计，怎么跟搭建后台的表单配置相关联。再比如，如何做页面物料版本的管控等等细节）

系列规划

抽空余时间，“星空”写的差不多了，准备分享、开源出来，给需要的小伙伴一些参考。

计划一共写 7 个章节：

• 第一章节：“星空”整体简单架构，也就是本文
  • 对“星空”有一个大体的认知，知道是干嘛的即可
• 第二章节：webcomponents 介绍，magic-microservices 源码解析
  • “星空”物料转 webcomponents 基于 magic-microservices 实现，后续三、四、五章节，都会用到
• 第三章节：“星空”服务端实现
  • 服务端可以拉通后台，物料管理等相关逻辑，所以放到物料跟搭建后台前面
• 第四章节：物料模板设计，脚手架实现
  • 包括 react-template、vue-template，以及物料的打包、发布等
• 第五章节：“星空”搭建后台实现
  • 包括后台跟服务端的联调，物料的渲染，页面的发布等核心功能
• 第六章节：docker、nginx 环境详解
  • “星空” 使用到的 mysql、nginx 均由 docker 进行管理
• 第七章节：“星空”代码开源，本地启动流程详解

小结

“星空”大概长这样，logo 跟配色是好朋友设计的，必须给个赞！

很多企业都有自己的搭建系统，“星空”大同小异，也有一些自己的亮点，比如基于 webcomponents，物料既支持 react，又支持 vue。希望分享出来，可以跟大家一起学习，讨论，进步。

更新频率计划是一个星期一篇，希望计划可以赶上变化，冲！！！