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

发布于:2021-04-15 作者:admin 浏览人数:
项目介绍
01
 
虽说是“H5 在线编辑器”,但它不是一个工具,不仅仅是编辑器,而是一个庞大的系统。
 
包括作品管理、编辑器、组件库、H5 发布和访问、统计服务、后台管理,以及为了研发提效开发的脚手架。
 
项目已经正式上线 www.imooc-lego ,请用 PC 浏览器访问。
 
项目源代码已经在 github 开源,大家可以去免费下载查看。
 
项目的架构设计
02
需求指导设计,设计指导开发。
 
上图是项目的架构设计图,从图上看项目还是比较复杂的,以为它是一个业务闭环的,全栈项目。
 
它是多个模块组成的一个完整系统,每个模块都有单独的代码仓库,我们分别介绍一下各个模块。
 
作品管理
03
B 端,主要有以下功能模块:
1.登录/注册
2.作品管理
创建作品,查看作品列表,查看模板列表查看单个作品的统计,分渠道统计(重要,否则无法业务闭环)
3.h5 网页编辑器(复杂度非常高,开发难度大)
编辑作品,保存作品预览、发布作品
作品管理是前后端分离的开发方式。前端用 Vue3 实现,后端用 nodejs + koa2 + mysql + mongodb + redis 实现。
 
而且,项目还用到了单元测试、接口测试,用 github actions 和 travis 实现 CI/CD 自动检查并部署测试机。
 
即,无论是框架还是研发流程,都进行过精心的设计和实现。
作品H5页面
04
H5 页面,即 C 端。上文的 B 端(作品管理)编辑器中,编辑页面,预览或发布,即可在手机上查看 H5 页效果。
 
下图是两个真正发布出来的效果图,可以那手机扫码看一下。
 
H5 页面不是前后端分离开发的,是通过 Vue3 SSR 开发的。
 
考虑到 C 端需要极致的性能,所以使用 SSR 比较合适。PS:并不是所有的项目都适合用 SSR 。
 
业务组件库
05
B 端画布编辑画布,需要用一个一个的组件拼接渲染,发布之后的 H5 页渲染也是同样的组件和渲染方法。因为编辑器画布的样子,和发布出来的 H5 页的样子,应该是一模一样才对。
 
所以,既然两个模块都使用同样的组件,同样的渲染逻辑,那就适合把所有组件都抽离出来,作为一个单独的第三方的组件库,供 B 端和 C 端使用。
 
 
组件平台
06
组件平台是一个内部管理和提效的工具,能很方便的创建组件、发布组件,并让使用者在线查看预览组件效果。
 
类似于一个内部的 npm 系统(但不完全一样)。
 
统计服务
07
 
用户在 B 端创建作品,发布作品,最后肯定想要看到作品的最终浏览数据。有进有出,这样才可以实现业务闭环。
 
而且,还要能支持分渠道统计。如一个 H5 页发布之后被分别投放到了微信、支付宝和头条,一周之后到底哪个流量大,哪个流量小,这都必须要能统计出来。
 
统计服务的需求比较特殊,我们没有找到合适的第三方服务(调研过百度统计、友盟、阿里 Arms 等),所以干脆自研了一个。技术栈使用 nginx + nodejs + koa2 + mongodb 。
 
PS:这种统计功能,还是首先建议去选择一个第三方服务(或公司内部已有的服务),实在没有合适的,再去自研。
 
管理后台
08
每个系统,都需要有至少有一个管理后台,类似 CMS 的这种系统,管理系统的用户和主要内容。
 
这里的管理后台,可以查看系统的一些统计数据,如用户注册量、作品创建和发布量、作品浏览量等。
 
还可以管理:
用户 - 如冻结非法用户
作品 - 如强制下线非法作品
模板 - 如将漂亮的模板置顶、排序等
 
脚手架
09
内部提效工具,可快速创建项目和发布项目。
现在脚手架已经是前端工程师必备的技能,在企业中也有大量的应用,特别是大厂。
 
项目涉及的所有知识点
10
全栈项目,还有脚手架,所以知识点非常丰富,几乎涵盖了 Web 前端常用的所有知识。
 
 
正式上线,需要哪些云服务?
11
首先,我们选择了阿里云平台,这里虽然价格贵一点,但功能和服务都很全,而且服务稳定。
 
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 元就能买到的。
 
为何要正式上线、运维
12
软件生命周期的核心是运行生命周期(即项目的运维、迭代流程)和用户访问生命周期(即项目核心功能)。软件运维是最核心的生命周期,而运维的核心生命周期是预警!即,哪个能保证软件稳定运行和增长,哪个就最核心。—— 《聊聊架构》
看到这里,有些同学肯定会问:为何非要正式上线呢?设计开发出来不就行了吗,就已经证明了我们程序员的价值了呀? 下面我们就来解答这个问题。
 
有一次和一位知名的慕课网老师打电话,我们聊了一个多小时,我们都承认,现在的实战课,都是 demo ,远远达不到生产环境的级别要求。
 
线上项目和 demo 虽然功能看似一样,但实则完全不同。随随便便就能说出很多方面:
 
demo 没有线上环境,如域名,服务器,数据库等
demo 没有上线、回滚的流程
demo 没有运维监控和报警,这些在实际工作中都是重点
demo 没有统计、分享等正式的业务场景
demo 不用考虑安全、攻击、敏感内容过滤等
demo 不用担心万一半夜出 bug 该怎么办?
还有很多 ……
 
可以换位思考一下,如果你是一位老板,你是否需要一名技术人才?他能把项目的设计、开发、上线、运维全部都管理起来,保证系统运行的稳定和安全。
 
如果老板需要,那你就应该励志成长为这样的角色 —— 前端架构师/前端技术负责人。这才是最有竞争力的角色。

 

返回顶部