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

背景

去年，我和几个小伙伴一起开发了一个 h5 网页编辑器（请用 PC 浏览器访问），no-code 平台，全栈项目。
可以创建、编辑、发布一个 h5 网页，分享到微信，最后还可查看网页的访问统计数据，包括分渠道统计。实现业务闭环。

项目上线至今，已稳定运行，并且监控正常。
而且，源代码已经在 github 开源，大家可以去免费下载查看。

因为这是一个正式的线上项目，需要域名、https 证书、服务器、数据库、存储、CDN 等，还需要一些运维、监控、报警等服务。而这些钱，也都是我们（目前尚未投资人，哈哈）自己花的。

虽然尽量节省成本，精打细算，最后也是花了不少钱。
所以，今天就来分享一下，我们到底花了多少钱，以及都是怎么花的。

项目的架构设计

要知道项目花费多少钱，肯定要从功能和架构设计看起，因为我们要基于功能、业务和架构设计，来购买服务。即，从需求触发，按需购买。

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

作品管理

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 元就能买到的。

开发的项目 vs 正式上线的项目

我们日常的工作都是如何设计、如何开发、如何实现。很少会有人关注如何上线，如何运维和监控。

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

通过开发这个项目，让我们深刻体会到了这一点。要想从开发人员成长为一名技术负责人，也必须深刻意识到这一点才行。
就拿日常来说，如果网站没有运维、监控和报警，我们睡觉都不踏实。因为啥时候会出 bug ，自己都心里没底。

所以说，没有从 0 开始经历一个大型的、业务复杂的、正式上线项目的全流程，你就没法承担起一名技术负责人的角色！

你也可以参与到这个项目中

上述项目的所有设计过程、开发过程、所有经验、所有代码和文档的产出，我们都详细记录并总结到《Web 前端架构师课》课程中。即，这门课程，就是从 0 开发这个项目的完整过程。

《Web 前端架构师》课程，也是目前慕课网乃至全网所有前端课程中，业务、技术、流程复杂度的天花板课程。
如果你想突破技术瓶颈，成长为技术负责人，这将是最快捷的方式。

当然，你不用花费 1.5w 元去购买各种服务器，那样的话成本太高了。你只需要购买一个域名、一个低配置服务器即可，非常便宜，请相信我。具体操作课程里会介绍。

最后送大家一句我在书里面看到的一句话：遇到困难是常态，只管一直努力下去，多半都会成功，因为光“坚持”这件事，就足以打败 99% 的对手！