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

2020 年 3 月 2 日
筆記

作者 | 王俊傑

整理 | 李俊辰

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 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 視角上來看問題的話，則會更關注技術對業務的貢獻，關注團隊的整體的執行效率、品質控制、角色合作這樣一些問題。大前端的開發模式，會提升業務的迭代效率。

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

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

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

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

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

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

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

Serverless 前端工程化的基本思路

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

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

組件化

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

標準化

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

Serverless 的原理與實現

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

https://github.com/serverless/serverless

Serverless Framework 的 CLI 就叫「serverless」，以命令行的形式提供了全部功能。

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

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

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

Serverless Now

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

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

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

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

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

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

第一步，通過 npm 安裝 serverless；

第二步，安裝 Express，然後創建 app.js 文件；

第三步，配置 serverless.yml，最簡單的配置如左圖，僅有四行程式碼（右邊是可選配置項）；

第四步，微信掃描二維碼進行授權註冊或登陸，然後執行 sls 命令（serverless 簡寫）進行部署；

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

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

總結

總結下來，本文主要分為四點：

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

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

作者介紹

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

文章轉載自公眾號：前端之巔

原文鏈接：

https://mp.weixin.qq.com/s/fWQkdXU-QMDYafHQjX1gcw

相關活動推薦

當突發情況來臨之時，挑戰往往是巨大的，如何快速搞定開發和部署，保障業務的及時落地應用？本周四（2月27日）晚 20:00-21:00，本文作者、騰訊雲 Serverless 技術專家王俊傑，將直播分享《應對突發需求，如何藉助 Serverless 快速上雲？》

可以掃描下圖二維碼或者點擊【閱讀原文】，提前預約直播！

免費上雲，就用 Serverless Framework

目前，Serverless Framework 服務暫時免費，且 Serverless Framework 服務用到雲函數 SCF、API 網關、對象存儲 COS 等產品，均提供免費額度。

具體免費詳情可查閱：

https://cloud.tencent.com/document/product/1154/38792

立即使用 Serverless，只需三步！

Serverless Framework 是構建和運維 Serverless 應用的框架，簡單三步，即可通過 Serverless Framework 快速實現服務部署。

1、創建本地應用

通過 npm 安裝 Serverless

$ npm install -g serverless

基於 tencent_nodejs 模板創建 hello_world

$ serverless create --template tencent-nodejs --path my-service

2、安裝相關依賴

執行 npm install 安裝相關依賴

$ cd my-service$ npm install

3. 部署

掃描微信二維碼一鍵登錄騰訊雲帳號，部署函數到雲端

$ serverless deploy

觸發雲函數

$ serverless invoke -f hello_world

部署完成後，即可在命令行中看到部署情況，也可以在騰訊雲控制台看到對應資源。