如何设计开发了一个 H5 在线编辑器，并正式上线运维

项目介绍

虽说是“H5 在线编辑器”，但它不是一个工具，不仅仅是编辑器，而是一个庞大的系统。
包括作品管理、编辑器、组件库、H5 发布和访问、统计服务、后台管理，以及为了研发提效开发的脚手架。

项目已经正式上线 www.imooc-lego ，请用 PC 浏览器访问。
项目源代码已经在 github 开源，大家可以去免费下载查看。

项目的架构设计

需求指导设计，设计指导开发。

上图是项目的架构设计图，从图上看项目还是比较复杂的，以为它是一个业务闭环的，全栈项目。
它是多个模块组成的一个完整系统，每个模块都有单独的代码仓库，我们分别介绍一下各个模块：

作品管理

B 端，主要有以下功能模块：

• 登录/注册
• 作品管理
  • 创建作品，查看作品列表，查看模板列表
  • 查看单个作品的统计，分渠道统计（重要，否则无法业务闭环）
• h5 网页编辑器（复杂度非常高，开发难度大）
  • 编辑作品，保存作品
  • 预览、发布作品

作品管理是前后端分离的开发方式。前端用 Vue3 实现，后端用 nodejs + koa2 + mysql + mongodb + redis 实现。
而且，项目还用到了单元测试、接口测试，用 github actions 和 travis 实现 CI/CD 自动检查并部署测试机。
即，无论是框架还是研发流程，都进行过精心的设计和实现。

作品 H5 页面

H5 页面，即 C 端。上文的 B 端（作品管理）编辑器中，编辑页面，预览或发布，即可在手机上查看 H5 页效果。

下图是两个真正发布出来的效果图，可以那手机扫码看一下。

H5 页面不是前后端分离开发的，是通过 Vue3 SSR 开发的。
考虑到 C 端需要极致的性能，所以使用 SSR 比较合适。PS：并不是所有的项目都适合用 SSR 。

业务组件库

B 端画布编辑画布，需要用一个一个的组件拼接渲染，发布之后的 H5 页渲染也是同样的组件和渲染方法。因为编辑器画布的样子，和发布出来的 H5 页的样子，应该是一模一样才对。

所以，既然两个模块都使用同样的组件，同样的渲染逻辑，那就适合把所有组件都抽离出来，作为一个单独的第三方的组件库，供 B 端和 C 端使用。

组件平台

组件平台是一个内部管理和提效的工具，能很方便的创建组件、发布组件，并让使用者在线查看预览组件效果。
类似于一个内部的 npm 系统（但不完全一样）。

统计服务

用户在 B 端创建作品，发布作品，最后肯定想要看到作品的最终浏览数据。有进有出，这样才可以实现业务闭环。
而且，还要能支持分渠道统计。如一个 H5 页发布之后被分别投放到了微信、支付宝和头条，一周之后到底哪个流量大，哪个流量小，这都必须要能统计出来。

统计服务的需求比较特殊，我们没有找到合适的第三方服务（调研过百度统计、友盟、阿里 Arms 等），所以干脆自研了一个。技术栈使用 nginx + nodejs + koa2 + mongodb 。

PS：这种统计功能，还是首先建议去选择一个第三方服务（或公司内部已有的服务），实在没有合适的，再去自研。

管理后台

每个系统，都需要有至少有一个管理后台，类似 CMS 的这种系统，管理系统的用户和主要内容。
这里的管理后台，可以查看系统的一些统计数据，如用户注册量、作品创建和发布量、作品浏览量等。
还可以管理：

• 用户 - 如冻结非法用户
• 作品 - 如强制下线非法作品
• 模板 - 如将漂亮的模板置顶、排序等

脚手架

内部提效工具，可快速创建项目和发布项目。
现在脚手架已经是前端工程师必备的技能，在企业中也有大量的应用，特别是大厂。

项目涉及的所有知识点

全栈项目，还有脚手架，所以知识点非常丰富，几乎涵盖了 Web 前端常用的所有知识。

正式上线，需要哪些云服务？

首先，我们选择了阿里云平台，这里虽然价格贵一点，但功能和服务都很全，而且服务稳定。
PS：无论在哪个领域，要花钱买时间，时间才是最大的成本！

另外，为何要说“购买/申请”呢，因为有些服务目前是免费的，或者免费试用的量很大。
我们先暂时不说多少钱，先整理一下，我们需要哪些云服务。

域名相关

注册域名，然后备案。
正式的线上项目，保证安全，都需要 https 协议，所以需要购买 https 证书。

测试机

为了方便多人协作开发，前后端联调，需要有一个统一的测试环境。
所以，购买两台测试机，一台给前端，一台给后端。

PS：一般情况下，测试环境和线上环境是要分离的，所以测试机和线上服务器不要混用。

线上服务器

由于模块较多，所有购买两台线上服务器，一台用于 B 端，一台用于 C 端。

数据库

项目所用到的数据库比较多，涵盖了常用的 mysql mongodb redis 三种数据库，都需要去购买。

存储

制作 H5 网页时，有时需要上传图片，所以要用到文件存储。需要购买阿里云 OSS 存储。

CDN

H5 的静态资源需要发布到 CDN ，以最大化提高性能。需要购买阿里云 CDN 服务。

通知服务

项目登录/注册时，是用手机号 + 短信验证码的形式，这样用户体验最好。所以需要购买短信服务。

项目的一些系统通知（如错误报警），是以邮件的形式来通知，所以要申请邮件服务，这是免费的。

运维和监控

为了防止网络攻击，我们购买了阿里云网络防火墙 WAF 。

后端使用 nodejs ，所以我们申请了阿里云 alinode 做服务器的运维和监控。alinode 目前（2021年春）是免费的。

其他

作为一个正式的线上项目，需要对用户发布的内容负责，所以每次发布项目时，都要进行内容安全检查。
使用了百度云的内容检查服务，目前还在免费试用阶段，它的试用量比较大。

另外，还有些常规统计，用到了阿里云 Arms 和百度统计，这俩都是用的免费功能。

总共花费多少钱

汇总一下上面的服务：

• 域名（备案）
• https 证书
• 测试机 * 2
• 线上服务器 * 2
• 数据库
  • mysql
  • mongodb
  • redis
• OSS
• CDN
• 短信服务
• 邮件通知服务（免费）
• WAF
• alinode（免费）
• 百度云内容审查（试用阶段）
• 第三方统计（仅试用免费功能）
  • 阿里云 Arms
  • 百度统计

除了购买上述服务之外，我们还请了 UI 设计师帮我们设计 UI 图，花费 1200 元。

最后算来总的花费大约 1.5w 元。
PS：云服务器的租期一般是一年，一年之后还得继续付费。

其实，在我看来，我们花费的最大成本是时间成本，而不是这 1.5w 元。
我们从设计、开发到上线，总共花费了半年多的时间。这可不是 1.5w 元就能买到的。

为何要正式上线、运维

软件生命周期的核心是运行生命周期（即项目的运维、迭代流程）和用户访问生命周期（即项目核心功能）。软件运维是最核心的生命周期，而运维的核心生命周期是预警！即，哪个能保证软件稳定运行和增长，哪个就最核心。—— 《聊聊架构》

看到这里，有些同学肯定会问：为何非要正式上线呢？设计开发出来不就行了吗，就已经证明了我们程序员的价值了呀？ 下面我们就来解答这个问题。

有一次和一位知名的慕课网老师打电话，我们聊了一个多小时，我们都承认，现在的实战课，都是 demo ，远远达不到生产环境的级别要求。

线上项目和 demo 虽然功能看似一样，但实则完全不同。随随便便就能说出很多方面：

• demo 没有线上环境，如域名，服务器，数据库等
• demo 没有上线、回滚的流程
• demo 没有运维监控和报警，这些在实际工作中都是重点
• demo 没有统计、分享等正式的业务场景
• demo 不用考虑安全、攻击、敏感内容过滤等
• demo 不用担心万一半夜出 bug 该怎么办？
• 还有很多 ……

可以换位思考一下，如果你是一位老板，你是否需要一名技术人才？他能把项目的设计、开发、上线、运维全部都管理起来，保证系统运行的稳定和安全。
如果老板需要，那你就应该励志成长为这样的角色 —— 前端架构师/前端技术负责人。这才是最有竞争力的角色。

如何成为 前端架构师/前端技术负责人

我们基于上述这个 H5 编辑器项目 慕课乐高 ，花费近 1 年时间，制作了《Web 前端架构师课》课程 —— 旨在培养前端架构师、前端 Leader 、前端项目负责人。

课程有两大特点

• 慕课乐高 项目的业务复杂度、技术复杂度足够高。只要高复杂度，才能撑得起架构师的角色和职责（简单项目就不需要架构师了）。
• 慕课乐高 项目是一个正式上线、运维的项目（上文已详细提到）。企业需要全流程的技术负责人，而不仅仅是纯开发人员。

课程是由三位慕课网金牌讲师联合打造：

• 双越老师，主要负责服务端设计和开发
• Sam 老师，主要负责脚手架、提效工具的设计和开发
• 张轩老师，主要负责前端、编辑器、组件库的设计和开发

现在已有几百名学院加入学习，而且学完之后记录学习笔记。