Categories
程式開發

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐


Serverless是當下炙手可熱的技術,被認為是雲計算發展的未來方向,擁有免運維、降低開發成本、按需自動擴展等諸多優點。尤其是在前端研發領域,使用 Node開發雲函數,可以讓前端工程師更加專注於業務邏輯,實現全棧工程師的角色轉變。但現有的開發模式、工具、腳手架已經標準化、流程化,存量業務正在線上穩定運行,如何將Serverless融入到現有開發模式和工具中?如何將Serverless和當前的業務進行結合落地?本文將嘗試給出解法,內容整理自騰訊Serverless技術專家王俊傑在GMTC 2019深圳站的演講。

前端與Serverless的不解之緣

目前很多前端同學都在學習Serverless,很多文章和教程對Serverless都有不同方式的解讀,今天我們首先來回顧三個問題:

  • 究竟什麼是Serverless?
  • Serverless是否等於FaaS加BaaS?
  • 我們所說的FaaS是什麼?

加州大學伯克利分校2019年3月份發表過一篇論文,名為《Cloud Programming Simplified: A Berkeley View on Serverless Computing》,文中對“Serverless是什麼”進行了一些描述:

Put simply,serverless computing = FaaS + BaaS.

簡單來理解,Faas+BaaS是Serverless的一種實現方式,這也是主流對Serverless的一種理解。那Serverless的真正概念是什麼呢?論文最核心的摘要部分,我們可以看到如下圖的一段話,它說出了Serverless真正內涵:

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 1

翻譯成中文就是:“無服務器雲計算(Serverless Computing)幾乎封裝了所有的底層資源管理和系統運維工作,使開發人員更容易使用雲基礎設施。它提供了一個方式,極大地簡化了基於雲服務的編程,猶如彙編語言到高級編程語言般的轉換。” 這段話中舉了一個例子非常生動:

Assembly Language to high-level programming Languages.

“Serverless給雲計算帶來的改變,就是相當於從彙編語言到高級語言”。彙編語言,計算機專業的學生都有了解過。寫彙編的話,首先需要了解CPU的結構,知道加法器、寄存器,需要自己管理內存、IO設備等一些底層資源。但開發者的目的並非如此,開發者應該是以業務為導向的。而高級語言提供了諸多能力和框架支持,可以令開發者專注於更快地完成業務上的事情,這才是高級語言所具備的優點,而不是讓開發者把精力浪費在底層資源管理。有此可見,Serverless的內涵就是對全部底層資源和運維工作的封裝,讓開發者專注於業務邏輯。

理解完Serverless的內涵,我們再來談一下FaaS(Function as a Service)的本質。一句話而言,FaaS就是至今為止最細粒度的算力分配方式,我們先理解下什麼叫算力分配方式。

當我們談論計算機應用科學的時候,共有三個維度:“算力、算法、數據” 。在“算力”又有兩個方向:一是如何讓算力更強,讓CPU運行的更快;二是如何讓算力分配的更合理。傳統計算機,從單任務實時操作系統到多任務分時操作系統,是解決算力的分配問題,雲計算誕生的初衷以及要解決問題,也是解決巨大算力資源的合理化分配。雲的算力分配方式主要是以什麼為粒度的呢?

答案是虛擬機。

比機器再降維一點的分配粒度是什麼?

答案是容器。

那比容器再降一級的功能是什麼?

答案是函數。

最早期的算力分配是物理機為單元,後來是虛擬機和容器。這個算力分配細化的過程,也基本是雲計算發展的過程。現在雲上可以函數作為一個計算單元,變成每一次業務執行分配一次資源,沒有業務就沒有資源分配。所以,FaaS是一個以函數(業務)為粒度的算力分配方式。

當我們理解了Serverless和 FaaS的內涵,我們在討論下這一切跟前端有什麼關係。

隨著Node的流行,前端工程師一直希望回歸Web工程師的角色,全棧工程師的也在各種場合和文章被提到,最近幾年大前端組織架構也成為超火話題。

第一,從前端工程師自身視角來講,希望擴大自己的業務範圍,進而才能有職業發展,僅僅做前台展現相關的東西,碰不到核心業務,價值得不到展現。

第二,如果從組織或是技術leader視角上來看問題的話,則會更關注技術對業務的貢獻,關注團隊的整體的執行效率、質量控制、角色合作這樣一些問題。大前端的開發模式,會提升業務的迭代效率。

  1. 前端和後端都使用JavasScript,技術棧是統一的。從寫代碼,到編譯、打包、腳手架、組件化、包管理,再到CICD,採用同一套都不是問題。
  2. Client Side JavaScript和Server Side JavaScript本身就有很多可服用的代碼,例如現在行業裡有很多同構代碼的CSR和SSR解決方案。
  3. 優化研發組織結構。大前端的開發模式,讓接口定義、接口聯調、環境模擬等,原來需要兩種不同技術能力棧的工程師互相協作的模式,變為同一種技術技術能力棧的工程師獨立完成的模式,讓溝通和推動的成本降到最低。

想法很美好,但是實話實說,大前端這條路一直走的不是很順暢。我個人認為,其中主要的原因還是對Full-Stack的理解問題,在Google上搜full-stack有很多圖示,其中大多數長成下面這樣子:

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 2

這個理解是建立在業務功能實現層面的,好像有了前端+後端+數據庫,基本業務就能做出來了。而實際上真實情況往往與之相差甚遠!真正能夠支撐業務的full-stack架構,至少分為四層。

  • 第一層,是核心業務邏輯,前、後端功能、API、數據
  • 第二層,是業務架構,具體包括應用框架、技術架構、數據庫等
  • 第三層:是業務運維,包括日誌、監控告警、擴展性、負載均衡等
  • 第四層:是底層架構,包括計算資源、系統及網絡安全、災備等

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 3

越往上層,對業務價值的驅動力更高,因為聚焦業務邏輯;而越往底層,往往技術難度越大,對於人員的技術能力要求越高。繼續分析,我們就可以的發現:

  • 第一層:全棧工程師們想做的東西
  • 第二層到第四層:Serverless可以解決的問題

在Serverless的賦能下,前端工程師依舊只需要關注核心的業務邏輯,而底層的技術架構、計算資源、穩定性、系統運維工作,則可以完全由Serverless進行支撐。即實現了從前端到真全棧的可能。這也就回答了我們的主題,Serverless為何與前端有不解之緣。

Serverless前端工程化的基本思路

當今的前端研發,組件化、工程化都有比較好的解決方案。那麼我們要問的是,對於Serverless開發有沒有比較好的解決方案呢?那麼我們到底要不要用一個框架?前端開發者最喜歡用框架了。因為框架能解決很多問題:代碼重用、統一規範、降低門檻、專注業務邏輯、社區優勢、易於維護、提升效率…好處多的猶如一段相聲貫口。

那麼一個好的Serverless框架應該是什麼樣子?我覺得需要滿足兩個要求。

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 4

  • 組件化

利用組件機制,以業務功能為單元,進行代碼的組織和管理,可以在業務內部、跨業務或跨公司進行重複使用,達到易於維護、提升效率的目的,好處很多,不在贅述。

  • 標準化

對於開發者提供一套標準的接口和使用方式,屏蔽底層雲的異構系統之間的差異。就好比前端工程師熟悉的JQuery或者Polyfill,它們不用關注瀏覽器的差異,直接用就完了。 Serverless的框架也應該做到這點。

Serverless的原理與實現

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 5

Serverless Framework就是這樣的一款標準化、組件化的框架。在底層,提供了針對開發者的基礎支持,包括開發、部署、調試、監控,這些支持針對雲廠商接口進行了封裝,開發者完全不用關注云計算平台的差異;在上層,每一個業務場景、業務框架都以組件化的方式進行封裝,以更好的進行維護和復用。 Serverless Framework是一個擁有34.5K star的開源框架,如下:

https://github.com/serverless/serverless

Serverless  Framework的CLI就叫“serverless”,以命令行的形式提供了全部功能。

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 6

Serverless Framework 有一個很重要的機制就是Component機制。

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 7

每個component都是一個NPM模塊。它使用一個YML的配置文件,用來描述該component如何使用和分配雲平台上面的資源。上圖是一個Express Component的架構圖,它由包括了Tencent API gateway、Tencent SCF和Tencent PostgreSQL。

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 8

Component代碼結構非常清晰,遵循NPM module標準。一個非常值得提起的特性 —— 組件支持嵌套使用。例如一個 Serverless Full-stack Application 包括了Express Component用於處理服務端邏輯,還包括一個Website Component組件用於管理靜態文件和資源。而這兩個組件又分別包括了他們的子組件。

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 9

Serverless Now

理解完Serverless Framework的基礎結構之後,我今天要給大家展示一個Servereless Hexo博客的demo,讓大家對Serverless Framework有一些感覺。這個Demo是團隊一個MM做的。她不是學計算機的,其次她沒有任何代碼經驗,沒寫過前端JavaScript,我們需要讓她來用Serverless  Framework和Website組件完成一個靜態博客的部署。

這個三分鐘的video demo,不僅是完成了Hexo發布代碼的上傳,還包括了以下云資源的申請和配置。這說明我們的產品是非常有彈性的。所謂技術產品的彈性,就是可選配置特別多,但是默認必填項特別少。如果你富有經驗,技術功底很深,讓你自由的去編寫每一個配置,以達到你想要的效果;反之,如果你跟這位MM一樣是一名初學者,你也可以快速上手,再幾分鐘內用起來。

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 10

除了Website組件,下面整個圖中都是Serverless Framework 現在已經支持的組件,包括了Node、Python、PHP語言的各種框架。

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 11

如果你對Serverless Express感興趣可以關注這個Github網址:

https://github.com/serverless-components/tencent-express

如果你已經有一個Express的項目,你現在就可以利用Serverless framework將它部署上雲,具體的操作步驟也可以訪問上面的Github.

  • 第一步,通過npm安裝 serverless;

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 12

  • 第二步,安裝Express,然後創建app.js文件;

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 12

  • 第三步,配置serverless.yml,最簡單的配置如左圖,僅有四行代碼(右邊是可選配置項)

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 14

  • 第四步,微信掃描二維碼進行授權註冊或登陸,然後執行sls命令(serverless簡寫)進行部署。

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 15

  • 第五步,使用remove刪掉這個項目,同時清理雲資源。

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 16

對於前端開發者來講,你甚至不需要了解什麼是雲,做了哪些事情。這一切都有Serverless framework給你做好了。除了Express.js,Koa和Eggjs同樣由社區開發者貢獻支持。

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 17

總結

總結下來,本文主要分為四點:

  • 前端和Serverless的確是不解之緣,只有Serverless能夠真正讓一個前端工程師去挑大樑,full-stack完成一個產品;
  • Serverless前端工程化的基本思路,直接在雲廠商的雲函數上自己去做,還是基於現有的Serverless Framework;
  • 講了一些Serverless Framework的原理,包括底層以標準化方式對雲廠商接口的支撐,上層是利用Serverless的組件化,進行業務復用,提升效率;
  • 最後通過視頻,演示了一位從未學過編程的女生的第一個 Serverless Demo。

前端如何真正晉級成全棧:騰訊Serverless前端落地與實踐 18

結束之前展示一張照片,最右邊是《Serverless架構》的作者劉宇,中間是Austen Collins,他是 Serverless.com的CEO和Founder,也是Serverless Framework的作者。我希望用他一段話來結束今天的演講:Serverless是雲的未來。 Serverless就是我們開發者的一個非常有利的力量,我們相信未來Serverless 一定能夠賦能開發者。尤其對端開發者而言,從前端工程師的角色升級為全棧工程師,獨立完成整個應用的從0到1。

作者介紹:

王俊傑,騰訊雲 Serverless 前端技術專家,十餘年互聯網研發經驗。負責 Tencent Serverless 技術在全棧應用開發的方案設計工作。主要研究 Serverless 與傳統開發語言及開發框架相結合、Serverless 全棧應用開發模式、傳統業務 Serverless 上雲方法實踐,Cloud Native App 的 Serverless 開發方法。曾擔任百度搜索技術經理,負責搜索前端技術研發。