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

文章主要介绍以下内容：

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

Monibuca 是什么？

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

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

设计稿如下图所示：

主要设计内容如下：

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

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

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

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

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

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

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

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

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

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

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

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

pnpm 理由如下：

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

turbo 理由如下：

vue3 理由如下：

ts 理由如下：

大家已不陌生。

理由如下：

理由如下：

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

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

vitepress 官网： vitepress.vuejs.org/

node 理由如下：

go 理由如下

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

构建过程如下图：

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

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

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

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

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

部署采坑：

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

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

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

源码目录如下图所示：

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