【开源实践】从 0 到 1 搞定官网开发

417次阅读  |  发布于1年以前

目的

内容

文章主要介绍以下内容：

需求

给开源项目 Monibuca 换官网，包含以下功能：

Monibuca 是什么？

Monibuca 是开源 Go 语言流媒体服务器开发框架。如下图所示：

ui 设计

ui 这块， 有团队中的设计朋友在帮忙设计官网 pc 首页，其他的如文档教程页、移动端自适应等功能，则自行开发实现。

设计稿如下图所示：

主要设计内容如下：

这期间，我们和设计师保持沟通，首页 ui 的设计，是一个不断沟通和调整的过程。

自适应方案

pc 的自适应方案不只一种，浏览了一些主流官网，最终确定的自适应方案如下：

提个问题， 为什么 PC 页面基本都不用 rem ？

实现思路

实现思路体现着平衡哲学。

这里有一个前置考虑，那就是实现的代价，主要代价如下：

非全职维护开源项目，既自由，又不自由，这里不自由主要体现在时间和精力的投入有限，所以综合考虑下，选择代价小的方案。

随后，我有目的的浏览了一些官网，在综合比较下，感觉 vue 的官网整体不错。随后阅读了 vue 官网的源码，结合实现代价，定下了实现思路：

技术选型

实现思路确定后，整体技术选型也随之确定，即如下：

技术选型 = pnpm + turbo + vue3 + ts + vite + vitepress + 服务端(node | go) + vercel

处了服务端，上述选型和 vue 官网的选型保持一致（整体理由），下面我会简要介绍各技术选型理由：

pnpm + turbo

目前的 monorepo 生态百花齐放，正确的实践方法应该是集大成法，也就是取各家之长，目前的趋势也是如此，各开源 monorepo 工具达成默契，专注自己擅长的能力。

如 pnpm 擅长依赖管理， turbo 擅长构建任务编排。遂在 monorepo 技术选型上，我选择了 pnpm 和 turbo 。

pnpm 理由如下：

相比于 vue 官网，在使用 pnpm 上，我加了 workspace 。

turbo 理由如下：

vue3 + ts

vue3 理由如下：

ts 理由如下：

vite

大家已不陌生。

理由如下：

vitepress

理由如下：

我赞同 vitepress 的设计理念，目前 Monibuca 官网主题的实现方案是：

fork``@vue/theme 源码 并用 pnpm 进行管理和二次开发，然后慢慢演化成属于 Monibuca 的主题。

vitepress 官网：vitepress.vuejs.org/[1]

服务端 node | go

node 理由如下：

go 理由如下

这里我使用的 vercel 提供的 serverless api ，方便快速。

技术选型总结

至此，技术选型就介绍完了，上面阐述的技术选型，既有主流成熟、也有前沿趋势，整体上是一个不错的方案。

当前构建过程，技术选型的趋势是什么？

笔者认为，目前前端的构建工具链已经在快速被 Rust 和 Go 接管。如 swc 、 vite 、 vitest 、 turbo , 速度之快，令人惊叹。这也对前端工程师提出了更高的要求，激励我们学无止境。

技术选型确定后，已经开发并维护一段时间，还可以对技术选型进行调整吗？

当然可以，自信点，把吗字去掉。

在架构设计中，有一个原则叫演化原则，演化优于一步到位，好的软件，一定会不断的进行演化，这和人类的演化，地球的演化，宇宙的演化都是一脉相承的。自然法则，大道至简。

提到架构，那下面我将阐述官网的技术架构，请跟我一起往下看。

技术架构

三个原则

架构设计有以下三个重要原则：

也就是说，大家在做架构设计的时候，要有意识的让架构符合这三个原则，这样会保证你的架构设计至少在大方向上是保持正确的。

常用软件架构

这里提下常用的 4 种软件架构：

分层架构是最常用的软件架构，有点递归的感觉，先分大的层，在大的每一层，还可以分小的层。此外插件架构也非常常用，前端层面，一般多使用分层架构和插件架构。

俗语所说：麻雀虽小、五脏俱全。开发官网虽然很容易，但依然可以拥有优秀的架构思想，下面将介绍我对官网进行的架构设计。

官网架构

官网的软件架构图如下所示：

采用的是分层架构设计， 具体介绍如下：

上面的架构图不一定完全满足分层架构，这个不重要，重要的是符合架构的设计原则。下面进行简单阐述：

技术架构总结

上文提到的常用软件架构不是独立存在的，他们可能是交叉并存的，这些软件架构本身就遵循着合适、简单、演化等原则。我们要做的就是在软件的生命周期中，运用架构设计来让这个软件发挥更大的价值，承载更多的使命。

构建部署

构建

核心就是使用 pnpm + turbo 进行构建，大致介绍如下：

构建过程如下图：

可以看到图中 build 时间，用时非常少，构建速度极快。

具体使用方法请查阅官方文档和 github 开源案例。

部署

核心就是：使用 vercel 进行自动化构建部署。

关于 vercel 的使用，大家自行搜索，这里我阐述下部署流程，如下所示：

  1. 官网代码提交到 github 仓库
  2. 使用 github 登录 vercel ， 绑定项目
  3. 进行域名设置，绑定官网域名
  4. 在 vercel 上填写构建配置，这里我贴一下目前官网在 vercel 上的构建配置，如下图所示：

只需要对 Output Directory 进行设置即可，其他不动 5. 保存构建配置，然后进行构建部署、发布对外 6. 后续官网只要提交代码到 github 上，就会自动触发构建部署

部署采坑：

官网使用了 pnpm workspace 和 turbo ， 在使用 vercel 进行构建部署时，遇到了本地成功，但在 vercel 构建就无法成功的问题，具体原因不祥， vercel 官网文档内容非常简单， github issue 和 discussion 上也没看到有用的信息，最后谷歌搜到了一个 youtube 视频，是关于用 vercel 构建部署 pnpm workspace + turbo + nextjs 。遂看完视频，再结合自身理解，打通了这块流程。

预览与源码

预览：直接访问官网 m7s.live/[2] 和上文设计图基本一致

源码地址：github.com/godkun/webs…[3]

源码目录如下图所示：

有需要的可以自行下载查看，此处不再做源码内容相关介绍。

开源实践总结

附

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8