Serverless 时代前端避坑指南
作者 | 張挺
每個(gè)時(shí)代，從來不缺機(jī)會。
云原生的浪潮席卷而來，從 14 年到現(xiàn)在，上云的聲音就沒有停歇過，而如今到了 2020，云廠商都已經(jīng)準(zhǔn)備好了，而前端，是否也準(zhǔn)備好踏入這紛爭的領(lǐng)域，去擁抱時(shí)代給予的蜜糖，亦或者是帶刺的玫瑰？
大家都或多或少的在現(xiàn)在的云戰(zhàn)場上接收到信息，也不免的去學(xué)習(xí)，對比各家云平臺的功能，甚至還會實(shí)際調(diào)研，考慮用在自己的產(chǎn)品或者業(yè)務(wù)中，而阿里在內(nèi)部經(jīng)過一年的實(shí)踐和總結(jié)，將 Serverless 和現(xiàn)有框架有機(jī)的整合到了一起，同時(shí)，希望能簡化現(xiàn)有社區(qū)的云函數(shù)開發(fā)。
本篇文章就是交給大家如何避（快）免（速）踩（上）坑（手）。
PS.文末福利大放送，7天玩轉(zhuǎn)云端開發(fā)，免費(fèi)開發(fā)還有多重好禮！
避坑第一招
而 Web 棧開發(fā)框架， 阿里的 Midway 體系也早早在去年就開始了新的嘗試。從傳統(tǒng) Web 到 Serverless 體系的轉(zhuǎn)換，沒有那么容易，看起來很干凈整潔的代碼，在 Severless 體系中甚至變?yōu)榱思渔i，步步桎梏。
俗話說，聚是一團(tuán)火，散是滿天星，就拿簡單的 Web 請求來說，大家想的是，我一個(gè)接口變?yōu)橐粋€(gè)函數(shù)，非常簡單。我一個(gè)應(yīng)用，根據(jù)路由，可能會分為 1，2，3，4 ... 100 個(gè)接口吧。而事實(shí)是，一個(gè) Web 請求，從接到數(shù)據(jù)的那一刻，坑就已經(jīng)挖好了，等著跳呢。
第一個(gè)坑來了，我該選擇哪個(gè)平臺呢？打開搜索引擎，各家云平臺的廣告接踵而至，為了避免提前選擇平臺，midway faas 使用的是固定的模板代碼，要使用它，需要安裝我們的 CLI 工具。
midway faas 的 CLI "f" 也是 Node.js 寫的，大部分前端開發(fā)者第一次使用 Serverless 即將從它開始。同時(shí)還集成了阿里云、騰訊云等眾多云廠商云服務(wù)發(fā)布，并支持的開發(fā)、調(diào)試、部署等能力。
我們可以用 "f" 創(chuàng)建我們的第一個(gè)函數(shù)示例。
它的 CLI 也是 Node.js 寫的，所以很可能大部分前端開發(fā)者第一次使用 Serverless 都從它開始。
midway faas 的代碼文件是以 class 的形式，這樣所有的方法都可以是一個(gè)可復(fù)用的函數(shù)，并且還可以享受到傳統(tǒng) OO 的能力。
避坑第二招
各個(gè)云平臺如下的代碼宣傳深入人心。
這些簡單的宣傳函數(shù)，相似又有著細(xì)微的不同（不建議大家去嘗試了）， hello world 基本上是通過 callback 或者標(biāo)準(zhǔn)的格式來返回（還有 HTTP response）。
對于前端來說，前后端分離，到 DevOPS，到全棧開發(fā)的洗禮，已經(jīng)相對比較熟悉類似 Koa/Egg 等這一套 Web 開發(fā)的套路，到了 Serverless 下，我的代碼怎么辦呢？
別急，midway faas 已經(jīng)做好了一切。
大家會發(fā)現(xiàn)，整個(gè)寫法和傳統(tǒng)的 koa 接口一模一樣，只要你會 koa，那么，在瞬間即可上手。用上你熟悉的 API，快速的進(jìn)入開發(fā)節(jié)奏。
除此之外，你可以用上大部分 Midway Web 開發(fā)的裝飾器，甚至直接把業(yè)務(wù)代碼拷貝過來即可，整個(gè) midway faas 框架會幫你完成整合和運(yùn)行。
避坑第三招
這個(gè)時(shí)候，我們的代碼寫完了，按照 Serverless 傳統(tǒng)的開發(fā)模式，要么本地裝一個(gè) Docker，按照平臺的方式去測試，要么直接打包發(fā)布到平臺去測試和調(diào)試。
在我們的調(diào)研中，本地裝 Docker 對前端來說太不友好了，每當(dāng)我們提出要通過 Docker 做一點(diǎn)事情，試用方就會提出能不能輕量一些，開發(fā) Web 能不能像之前的傳統(tǒng)開發(fā)一樣啟動服務(wù)，刷新瀏覽器。
為此我們的回答是“能”，通過 invoke 命令，既可以直接調(diào)用，也可以啟動服務(wù)。
你熟悉的 http://127.1:3000 已經(jīng)啟動，開發(fā)和調(diào)試，一切都隨你心意。
點(diǎn)擊查看midway 操作示意圖視頻
避坑第四招
代碼開發(fā)完成，也測試完成，我們就可以發(fā)布到平臺啦，這個(gè)時(shí)候，阿里云，騰訊云，其實(shí)就看你喜好啦。
你想發(fā)布到哪個(gè)平臺，直接配置即可。
然后執(zhí)行部署。
我們廣告看的非常多，無運(yùn)維，按請求收費(fèi)，低成本，簡化邏輯，讓 Serverless 走進(jìn)千家萬戶。本質(zhì)和傳統(tǒng)應(yīng)用開發(fā)是有 Gap 的，Serverless 通過 yml 配置聚合資源，由平臺提供資源服務(wù)，而業(yè)務(wù)只需要編寫單一的邏輯代碼，而由于邏輯的簡化之后，不再需要考慮復(fù)用，迭代，乃至維護(hù)和管理。
雖然我們的代碼可以在編寫時(shí)不需要考慮多個(gè)接口了，但是還有最開始的那個(gè)問題沒有回答， “接口多了發(fā)布、管理怎么辦？”。
midway faas 采用的是接口自定義聚合的模式，根據(jù)流量模型，用戶可以自己決定部署模式，我們的 f.yml 中可以進(jìn)行自由配置，你可以決定將所有接口匯聚到一起，部署到一個(gè)函數(shù)容器中享受整體的擴(kuò)縮，也可以將熱點(diǎn)的接口隨意移出單獨(dú)部署，這一切都不需要修改代碼，只需要動 yml 配置文件即可。
點(diǎn)擊查看視頻
最后的指南
我們總結(jié)了下，避坑指南告訴了你幾個(gè)事情：
就這樣，最后我們避開了各種坑，也沒有花特別額外的錢（16塊買了個(gè)域名），就完成了一些簡單的 Web 接口（應(yīng)用），降低了成本（走上了褥社會主義平臺羊毛的道路）。
midway faas 是一個(gè)幫前端入門 Serverless 的框架，也是未來能力協(xié)同，生產(chǎn)上云的框架，這些避坑的處理只是其中的一小部分，他的完整能力其實(shí)更強(qiáng)，提供了更多傳統(tǒng)的依賴注入，裝飾器自定義，業(yè)務(wù)配置管理，組件化等能力，甚至還有自定義運(yùn)行時(shí)，私有化部署等方案，未來也將一一展現(xiàn)給大家。
我們希望 "Midway will always be with you"。
倉庫：https://github.com/midwayjs/midway-faas <-- 戳戳 Star
文檔：https://www.yuque.com/midwayjs/faas
最近阿里云云工作臺已經(jīng)將 midway faas 的一些示例做成了云上版本，也對開發(fā)進(jìn)行了深度定制，既有 Web 棧應(yīng)用，也有 SSR 示例，都只需要點(diǎn)選即可搭建完成，用傳統(tǒng)方式開發(fā)，支持?jǐn)U展能力，又有函數(shù)接口的靈活，還不花錢，大家還在等什么呢。
文末福利
玩轉(zhuǎn)云端開發(fā) 7 天訓(xùn)練營
提前享受云時(shí)代的原生開發(fā)環(huán)境，Serverless 研發(fā)從入門到精通，連續(xù) 7 天，每天一個(gè)直播，阿里專家手把手教你利用阿里云云開發(fā)平臺 get 云端開發(fā)新技能。0 門檻打開瀏覽器就可以開發(fā)，最快 1 分鐘搭建個(gè)人網(wǎng)站，免費(fèi)開發(fā)還送代金券、天貓精靈等多重好禮！
識別下方二維碼馬上入群學(xué)習(xí)，或點(diǎn)擊鏈接馬上參加：
等等，福利還沒停！關(guān)注下方公眾號轉(zhuǎn)發(fā)文章即參與抽取天貓精靈！
關(guān)注「Alibaba F2E」
把握阿里巴巴前端新動向
總結(jié)
以上是生活随笔為你收集整理的Serverless 时代前端避坑指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 技术详解：基于人脸识别的 AI 弹幕
- 下一篇： 前端之未来