带你了解基于 Vue 的微服务解决方案 Genesis

前言

这几年，由于忙于业务，都不多在社区发言了，直到今年要重构整个 FOLLOWME5.0 网站，为了知足业务发展的须要，才设计了 Genesis ，顺势推出了基于 Vue 的微服务解决方案。

在设计之初，不是没有考虑过社区的一些解决方案，可是无一例外的都是基于客户端聚合的微前端解决方案，和咱们真正的需求还差之很远。

需求

• 国际化
  在 FOLLOWME5.0 以前，有不少项目都是采用 CSR 渲染的，致使页面被分享给外国网站或者APP时，页面的标题和描述，呈现出来的是中文的，致使在海外推广时，很是的不利于传播。
  因此，在这一点上，咱们都否认了基于客户端的微前端聚合方案，起点必须是立足于 SSR 的渲染，能够针对每个页面进行标题、描述的国际化。

• SEO
  在流量为王的时代，经过SEO的优化，仍然是一个获取免费流量重要的渠道。咱们内部也尝试过，去作一些SEO相关的项目，采用的技术就是最原始的那种后端模板渲染的方式，也取得了一些成绩，可是也带来了很高的维护成本。当时咱们有一个网站通用的头部，基于Vue的维护了一套，基于后端模板渲染的也维护了一套。
  因此，咱们须要有一个 Vue 的服务，能够提供一个网站的头部组件，由后端模板渲染的服务区调用它，嵌入到页面中。

• 老项目迁移
  不少老的项目，还停留在 Webpack2.0 的版本，跑起来常常出现各类问题，有 CSR 渲染的，也有 SSR 渲染的
  因此，咱们须要新的技术架构上，对老项目最好是无入侵的，支持 CSR 的渲染，能够解决部分 CSR 渲染页面的标题和描述的国际化问题。

• 无刷新跳转
  今年网站重构最大的目的之一，就是要解决以前架构的弊端，要作到页面与页面之间的无刷新跳转。这个问题看似很简单，只须要在一个项目中使用 vue-router 开发便可，可是 FOLLOWME 有成百上千个页面，若是只作到一个应用中，在基于 SSR 的前提下，只要有一个地方出现了故障或者内存泄漏，对于整站来讲都是一个不小的打击。或者只要每次发布，整站的那一瞬间都会挂掉
  因此，微服务的拆分，能够帮助咱们分散风险，一个服务挂了不能影响到另一个服务。

• 公共组件的使用
  在 FOLLOWME5.0 以前，有个公共的网站头部，每一个项目都是单独的导入到本身的项目中使用，随之而来的问题就是，每次导航有内容更新的时候，就不得不对十几个前端项目进行依赖的更新，从新构建镜像，而后发布。
  因此，咱们须要能够对其它服务的组件进行调用，不论是 CSR 仍是 SSR，对组件进行解耦，减小这种由于一个组件的更新，致使一大堆项目发布更新的问题。

总结：
咱们须要一个能够支持 SSR 和 CSR 渲染的微服务解决方案。

有哪些应用场景？

上面这张图，很好的诠释了 Genesis 微服务的工做原理，以及你使用 Genesis 能够作些什么。

• 单页应用
  经过 CSR 或 SSR 渲染的能力，你能够构建一个单页应用，等到你的项目复杂到必定程度时，能够再考虑拆分服务。

• 企业网站
  和使用后端渲染相比，你可使用 Genesis 快速的构建一个 SSR 的企业网站。

• 后端渲染的项目组件复用
  若是大家公司的技术栈是 Vue，为了 SEO 同时还存在着后端渲染的项目，部分页面须要组件复用时，你能够新增一个 SSR 服务，让后端渲染的项目去调用你的服务复用通用的组件。

• 后台管理系统
  随着业务的发展，后台管理系统的将会慢慢的演变成巨石应用，在不改动老项目的状况下，你能够考虑在新的业务中，拆分红微服务，由老项目中去调用新服务的页面。

• 大型的单页应用
  若是你的业务，达到和 FOLLOWME 同样的复杂程度，而且须要 SEO、国际化，那么 Genesis 应该你目前最好的解决方案了。

如何避免服务冲突？

样式的冲突，在 Vue 中能够经过 scoped 来解决，全局的变量之类的，就须要经过开发的规范对开发人员进行约束了。

路由管理

和平时普通的使用方式同样，没有什么差异。当你一个页面两个服务都使用了路由时，才须要使用 Genesis 包装后的 vue-router 解决历史模式时，产生屡次记录的bug。

付费分享

若是大家公司，对本套微服务解决方案感兴趣的话，在深圳地区，能够考虑到贵公司付费的分享一些在 FOLLOWME实践，GitHub能够联系到我。有钱，我想可让我更有动力把项目作得更好，毕竟深圳的房子仍是太贵了。

传送门

• Github
• 文档
• Vue 基于 Genesis + TS + Vuex 实现的 SSR demo
• 2020年，你可能须要基于Vue的微服务架构实践，在服务端或客户端聚合子服务