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

▎本文由 Serverless 技術專家王俊傑在 GMTC 2019 深圳站的演講整理而成，感謝 infoQ 對講稿的整理和編輯，原文同步首發於前端之巔。作者 | 王俊傑；整理 | 李俊辰

前端與 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運行的更快；二是如何讓算力分配的更合理。

傳統計算機，從單任務實時操作系統到多任務分時操作系統，是解決算力的分配問題，雲計算誕生的初衷以及要解決問題，也是解決巨大算力資源的合理化分配。雲的算力分配方式主要是以什麼為粒度的呢？

答案是虛擬機。

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

答案是容器。

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

答案是函數。

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

當我們理解了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，他是 https://serverless.com 的CEO和Founder，也是Serverless Framework的作者。

我希望用他一段話來結束今天的演講：Serverless是雲的未來。Serverless就是我們開發者的一個非常有利的力量，我們相信未來Serverless一定能夠賦能開發者。尤其對端開發者而言，從前端工程師的角色升級為全棧工程師，獨立完成整個應用的從0到1。

閱讀更多 Serverless 的文章

關鍵字: 電腦 中央處理器