为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 如何设计开发了一个 H5 在线编辑器,并正式上线运维

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

2021.03.30 22:04 4048浏览

项目介绍

图片描述

虽说是“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 老师,主要负责脚手架、提效工具的设计和开发
  • 张轩老师,主要负责前端、编辑器、组件库的设计和开发

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

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

10人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1.4万
获赞与收藏
4416

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

142篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消