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 部落格](https://china.serverless.com/best-practice/2019-12-4-Quickly-build-personal-blog/)的 demo，讓大家對 Serverless Framework 有一些感覺。這個 demo 是團隊一個 MM 做的。她不是學計算機的，也沒有任何程式碼經驗，沒寫過前端 JavaScript，我們需要讓她來用 Serverless Framework 和 Website 元件完成一個靜態部落格的部署。 這個三分鐘的 [video demo](https://china.serverless.com/best-practice/2019-12-4-Quickly-build-personal-blog/), 不僅是完成了 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 架構》](https://china.serverless.com/blog/2019-11-19-anycodes-book/)的作者劉宇，中間是 Austen Collins，他是 Serverless.com 的 CEO 和 Founder，也是 Serverless Framework 的作者。 我希望用他一段話來結束今天的演講：**Serverless 是雲的未來。Serverless 就是我們開發者的一個非常有利的力量，我們相信未來 Serverless 一定能夠賦能開發者。** 尤其對端開發者而言，從前端工程師的角色升級為全棧工程師，獨立完成整個應用的從 0 到 1。 > **傳送門：** > > - GitHub: [github.com/serverless](https://github.com/serverless/serverless/blob/master/README_CN.md) > - 官網：[serverless.com](https://serverless.com/) 歡迎訪問：[Serverless 中文網](https://china.serverless.com/)，您可以在 [最佳實踐](https://serverlesscloud.cn/best-practice) 裡體驗更多關於 Serverless 應用的