前端時空前端網紅集結號，傳遞一線全棧技術，帶你穿越前端時空。

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 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 有很多圖示，其中大多數長成下面這樣子：

這個理解是建立在業務功能實現層面的，好像有了前端 + 後端 + 數據庫，基本業務就能做出來了。而實際上真實情況往往與之相差甚遠！真正能夠支撐業務的 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 前端技術專家，十餘年互聯網研發經驗。負責 Tencent Serverless 技術在全棧應用開發的方案設計工作。主要研究 Serverless 與傳統開發語言及開發框架相結合、Serverless 全棧應用開發模式、傳統業務 Serverless 上雲方法實踐，Cloud Native App 的 Serverless 開發方法。曾擔任百度搜索技術經理，負責搜索前端技術研發。

閱讀更多 前端時空 的文章

關鍵字: 中央處理器 雲計算