天天看點

Serverless 時代前端避坑指南

作者 | 張挺
Serverless 時代前端避坑指南

每個時代,從來不缺機會。

雲原生的浪潮席卷而來,從 14 年到現在,上雲的聲音就沒有停歇過,而如今到了 2020,雲廠商都已經準備好了,而前端,是否也準備好踏入這紛争的領域,去擁抱時代給予的蜜糖,亦或者是帶刺的玫瑰?

大家都或多或少的在現在的雲戰場上接收到資訊,也不免的去學習,對比各家雲平台的功能,甚至還會實際調研,考慮用在自己的産品或者業務中,而阿裡在内部經過一年的實踐和總結,将 Serverless 和現有架構有機的整合到了一起,同時,希望能簡化現有社群的雲函數開發。

本篇文章就是交給大家如何避(快)免(速)踩(上)坑(手)。

PS.文末福利大放送,7天玩轉雲端開發,免費開發還有多重好禮!

避坑第一招

而 Web 棧開發架構, 阿裡的 Midway 體系也早早在去年就開始了新的嘗試。從傳統 Web 到 Serverless 體系的轉換,沒有那麼容易,看起來很幹淨整潔的代碼,在 Severless 體系中甚至變為了加鎖,步步桎梏。

俗話說,聚是一團火,散是滿天星,就拿簡單的 Web 請求來說,大家想的是,我一個接口變為一個函數,非常簡單。我一個應用,根據路由,可能會分為 1,2,3,4 ... 100 個接口吧。而事實是,一個 Web 請求,從接到資料的那一刻,坑就已經挖好了,等着跳呢。

第一個坑來了,我該選擇哪個平台呢?打開搜尋引擎,各家雲平台的廣告接踵而至,為了避免提前選擇平台,midway faas 使用的是固定的模闆代碼,要使用它,需要安裝我們的 CLI 工具。

Serverless 時代前端避坑指南

midway faas 的 CLI "f" 也是 Node.js 寫的,大部分前端開發者第一次使用 Serverless 即将從它開始。同時還內建了阿裡雲、騰訊雲等衆多雲廠商雲服務釋出,并支援的開發、調試、部署等能力。

我們可以用 "f" 建立我們的第一個函數示例。

Serverless 時代前端避坑指南

它的 CLI 也是 Node.js 寫的,是以很可能大部分前端開發者第一次使用 Serverless 都從它開始。

Serverless 時代前端避坑指南

midway faas 的代碼檔案是以 class 的形式,這樣所有的方法都可以是一個可複用的函數,并且還可以享受到傳統 OO 的能力。

避坑第二招

各個雲平台如下的代碼宣傳深入人心。

Serverless 時代前端避坑指南

這些簡單的宣傳函數,相似又有着細微的不同(不建議大家去嘗試了), hello world 基本上是通過 callback 或者标準的格式來傳回(還有 HTTP response)。

對于前端來說,前後端分離,到 DevOPS,到全棧開發的洗禮,已經相對比較熟悉類似 Koa/Egg 等這一套 Web 開發的套路,到了 Serverless 下,我的代碼怎麼辦呢?

别急,midway faas 已經做好了一切。

Serverless 時代前端避坑指南

大家會發現,整個寫法和傳統的 koa 接口一模一樣,隻要你會 koa,那麼,在瞬間即可上手。用上你熟悉的 API,快速的進入開發節奏。

除此之外,你可以用上大部分 Midway Web 開發的裝飾器,甚至直接把業務代碼拷貝過來即可,整個 midway faas 架構會幫你完成整合和運作。

避坑第三招

這個時候,我們的代碼寫完了,按照 Serverless 傳統的開發模式,要麼本地裝一個 Docker,按照平台的方式去測試,要麼直接打包釋出到平台去測試和調試。

在我們的調研中,本地裝 Docker 對前端來說太不友好了,每當我們提出要通過 Docker 做一點事情,試用方就會提出能不能輕量一些,開發 Web 能不能像之前的傳統開發一樣啟動服務,重新整理浏覽器。

為此我們的回答是“能”,通過 invoke 指令,既可以直接調用,也可以啟動服務。

Serverless 時代前端避坑指南

你熟悉的

http://127.1:3000

已經啟動,開發和調試,一切都随你心意。

點選檢視midway 操作示意圖視訊

避坑第四招

代碼開發完成,也測試完成,我們就可以釋出到平台啦,這個時候,阿裡雲,騰訊雲,其實就看你喜好啦。

你想釋出到哪個平台,直接配置即可。

Serverless 時代前端避坑指南

然後執行部署。

Serverless 時代前端避坑指南

我們廣告看的非常多,無運維,按請求收費,低成本,簡化邏輯,讓 Serverless 走進千家萬戶。本質和傳統應用開發是有 Gap 的,Serverless 通過 yml 配置聚合資源,由平台提供資源服務,而業務隻需要編寫單一的邏輯代碼,而由于邏輯的簡化之後,不再需要考慮複用,疊代,乃至維護和管理。

雖然我們的代碼可以在編寫時不需要考慮多個接口了,但是還有最開始的那個問題沒有回答, “接口多了釋出、管理怎麼辦?”。

Serverless 時代前端避坑指南

midway faas 采用的是接口自定義聚合的模式,根據流量模型,使用者可以自己決定部署模式,我們的

f.yml

中可以進行自由配置,你可以決定将所有接口彙聚到一起,部署到一個函數容器中享受整體的擴縮,也可以将熱點的接口随意移出單獨部署,這一切都不需要修改代碼,隻需要動 yml 配置檔案即可。

點選檢視視訊

最後的指南

我們總結了下,避坑指南告訴了你幾個事情:

  1. 避免提前選擇平台,專注于開發
  2. 避免新造輪子,複用傳統能力
  3. 避免平台測試,提前本地調試
  4. 避免額外收費,盡可能使用免費方案

就這樣,最後我們避開了各種坑,也沒有花特别額外的錢(16塊買了個域名),就完成了一些簡單的 Web 接口(應用),降低了成本(走上了褥社會主義平台羊毛的道路)。

midway faas 是一個幫前端入門 Serverless 的架構,也是未來能力協同,生産上雲的架構,這些避坑的處理隻是其中的一小部分,他的完整能力其實更強,提供了更多傳統的依賴注入,裝飾器自定義,業務配置管理,元件化等能力,甚至還有自定義運作時,私有化部署等方案,未來也将一一展現給大家。

我們希望 "Midway will always be with you"。

倉庫:

https://github.com/midwayjs/midway-faas

<-- 戳戳 Star

文檔:

https://www.yuque.com/midwayjs/faas

最近阿裡雲雲工作台已經将 midway faas 的一些示例做成了雲上版本,也對開發進行了深度定制,既有 Web 棧應用,也有 SSR 示例,都隻需要點選即可搭建完成,用傳統方式開發,支援擴充能力,又有函數接口的靈活,還不花錢,大家還在等什麼呢。

Serverless 時代前端避坑指南

文末福利

玩轉雲端開發 7 天訓練營

提前享受雲時代的原生開發環境,Serverless 研發從入門到精通,連續 7 天,每天一個直播,阿裡專家手把手教你利用阿裡雲雲開發平台 get 雲端開發新技能。0 門檻打開浏覽器就可以開發,最快 1 分鐘搭建個人網站,免費開發還送代金券、天貓精靈等多重好禮!

識别下方二維碼馬上入群學習,或點選

連結

馬上參加:

Serverless 時代前端避坑指南

等等,福利還沒停!關注下方公衆号轉發文章即參與抽取天貓精靈!

Serverless 時代前端避坑指南

關注「Alibaba F2E」

把握阿裡巴巴前端新動向