帶你瞭解基於 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的微服務架構實踐，在服務端或客戶端聚合子服務