javascript
EdgeRoutine技术专家教你把JS代码跑到CDN边缘
4月27日CDN云課堂中，阿里云智能技術(shù)專家洪曉龍?jiān)诰€分享《阿里云CDN輕量編程環(huán)境》，對EdgeRoutine的背景、功能、案例實(shí)踐介紹并在線進(jìn)行上手操作演示，希望更多用戶能夠使用CDN輕量編程環(huán)境服務(wù)自主編程、快速落地實(shí)際線上業(yè)務(wù)。本文為直播分享全文。
云原生與邊緣計(jì)算概念火熱
以云原生為理念的基礎(chǔ)服務(wù)快速增長
近年來，“云原生”概念在技術(shù)領(lǐng)域大熱，企業(yè)上云意愿越來越強(qiáng)烈。不管在國內(nèi)還是全球，云原生技術(shù)在公共云和私有云的使用量一路領(lǐng)先增長，Gartner等多家行業(yè)機(jī)構(gòu)已經(jīng)預(yù)測云原生即將進(jìn)入爆發(fā)階段。
而同屬云原生陣營， Serverless&FaaS年增長率這一點(diǎn)上已經(jīng)逐漸趕上甚至超過以容器形態(tài)提供服務(wù)的使用量。Serverless&FaaS已經(jīng)證明了其擁有巨大的技術(shù)優(yōu)勢和商業(yè)價(jià)值潛力。
5G引爆邊緣計(jì)算的概念
除了“云原生”，“邊緣計(jì)算”也是近年來最熱門的技術(shù)領(lǐng)域之一。CDN其實(shí)就是邊緣生態(tài)的重要一環(huán)，在CDN遍布全球的邊緣節(jié)點(diǎn)上提供計(jì)算服務(wù)是目前“邊緣計(jì)算”概念快速落地的最大助力。邊緣計(jì)算的最大特性低時(shí)延，Gartner甚至預(yù)測到2025年，超過75%的云服務(wù)將外遷到邊緣。目前，邊緣計(jì)算的應(yīng)用場景已經(jīng)陸續(xù)覆蓋到交通、醫(yī)療、娛樂等各行業(yè)各領(lǐng)域，離大眾生活越來越近。
云原生和邊緣計(jì)算的組合碰撞能夠催生出什么樣的技術(shù)和產(chǎn)品？
傳統(tǒng)的IaaS是抽象物理機(jī)資源來提供服務(wù)，如虛擬機(jī)ECS、彈性容器ECI，再到更上層的Serverless和FaaS服務(wù)形態(tài)，整個(gè)服務(wù)邊界一直在上移，資源隔離開銷越來越小，給云的客戶帶來更靈活的按需付費(fèi)和彈性伸縮能力。阿里云CDN在全球部署了超過2800個(gè)邊緣節(jié)點(diǎn)，兼具了“云原生”和“邊緣計(jì)算”兩大最熱門的技術(shù)理念和業(yè)務(wù)場景，當(dāng)真正將Serverless落地到邊緣，將給客戶帶來什么樣的技術(shù)和產(chǎn)品服務(wù)？
這就是今天洪曉龍為大家介紹的產(chǎn)品：阿里云CDN輕量編程環(huán)境-EdgeRoutine。
顧名思義它是一個(gè)邊緣程序，屬于邊緣Serverless服務(wù)范疇，主要特性是超低時(shí)延、按需付費(fèi)和無需運(yùn)維。
從物理機(jī)走向云原生，我們可以在多個(gè)能力矩陣上作對比：在延遲方面，數(shù)據(jù)中心的網(wǎng)絡(luò)帶寬和地域限制決定了它的平均時(shí)延會(huì)比較高，Serverless更輕量遷移成本更低，在region選擇時(shí)相對可以做到中延時(shí)，而依賴邊緣節(jié)點(diǎn)能力的邊緣Serverless則可以實(shí)現(xiàn)更低的延時(shí)；在計(jì)算能力方面，因?yàn)檫吘壒?jié)點(diǎn)資源有限，提供的更多是輕量級計(jì)算服務(wù)，對比更下層的容器、虛擬機(jī)、物理機(jī)等，資源隔離開銷更小，彈性能力更強(qiáng)；在成本方面，從物理機(jī)、虛擬機(jī)、彈性容器到Serverless，價(jià)格越來越低，而邊緣Serverless基于CDN資源復(fù)用的場景，它的價(jià)格將做到更低，滿足業(yè)務(wù)對于邊緣節(jié)點(diǎn)的總體規(guī)劃和預(yù)期。
因?yàn)镋dgeRoutine(ER) 是依托于阿里云CDN去提供服務(wù)的，所以它的很大的一個(gè)優(yōu)勢是覆蓋了全球6大洲70多個(gè)國家，基本上在全球做到了所有邊緣節(jié)點(diǎn)的覆蓋。
阿里云CDN輕量編程環(huán)境-EdgeRoutine是什么？
EdgeRoutine(ER) 是阿里云CDN團(tuán)隊(duì)開發(fā)的邊緣Serverless計(jì)算環(huán)境，支持在CDN邊緣執(zhí)行客戶編寫/編譯的JavaScript或者WebAssembly代碼（未來會(huì)推出）?？蛻魺o需關(guān)心實(shí)際機(jī)器、部署region、調(diào)度和伸縮性。一經(jīng)上傳，全球部署，全球執(zhí)行！EdgeRoutine主要具有以下四個(gè)特征：
一、輕量級
? 簡單代碼片段
? 單個(gè)文件最大1M，當(dāng)項(xiàng)目比較復(fù)雜時(shí)候，支持webpack打包生成JS文件再上傳
? 支持多種事件觸發(fā)，fetch、chrome、set
二、延遲低
? 冷啟動(dòng)5-10ms，當(dāng)代碼在全球已經(jīng)部署完成之后，客戶請求進(jìn)來縮短冷啟動(dòng)時(shí)間，直接提供服務(wù)
? 邊緣部署，就近接入
? 代碼check完成之后，下發(fā)到全球秒級生效，修改配置秒級刷新
? DCDN全站加速幫助客戶回源加速
三、限制高
? 內(nèi)存128M、CPU時(shí)間5ms，5ms可以支持絕大部分客戶的業(yè)務(wù)，隨著計(jì)算復(fù)雜度升高可付費(fèi)升級，動(dòng)態(tài)可配
? 因?yàn)槭禽p量級針對網(wǎng)絡(luò)帶寬流量為主，對文件、進(jìn)程、Socket進(jìn)行了限制，網(wǎng)絡(luò)限于HTTP/HTTPS
? 敏感信息不建議放入，后續(xù)將支持邊緣KV/cache讓客戶能實(shí)現(xiàn)計(jì)算、存儲等業(yè)務(wù)場景
四、功能靈活
? 提供完整JavaScript環(huán)境，支持ES6語法
? Web標(biāo)準(zhǔn)Service Worker API支持，前端應(yīng)用無需更改即可適配
? 與CDN融合，可配置擴(kuò)展任意CDN邏輯，做到CDN可編程
EdgeRoutine的技術(shù)原理
很多了解CDN的人都知道CDN是一個(gè)多級緩存的架構(gòu)，CDN加速靜態(tài)資源時(shí)，將源站上的資源緩存到距離客戶端最近的CDN節(jié)點(diǎn)上。當(dāng)您訪問該靜態(tài)資源時(shí)，直接從緩存中獲取，避免通過較長的鏈路回源，提高訪問效率。且阿里云CDN支持多級緩存架構(gòu)（默認(rèn)為兩級），可以有效提高資源命中率，大大減少回源請求數(shù)量。
EdgeRoutine(ER) 是依托阿里云CDN這套多級緩存架構(gòu)，處在邊緣節(jié)點(diǎn)這樣一個(gè)位置，和邊緣網(wǎng)關(guān)邊緣緩存都處在同一層，它是一個(gè)獨(dú)立的組件，提供了一個(gè)獨(dú)立的JS runtime。
當(dāng)邊緣環(huán)境、邊緣網(wǎng)關(guān)收到客戶請求之后，它可以智能識別，如果客戶配置了邊緣代碼，邊緣網(wǎng)關(guān)會(huì)將這個(gè)請求直接透明代理到EdgeRoutine(ER)。EdgeRoutine(ER)完全接管這個(gè)請求去執(zhí)行客戶部署的邊緣代碼，實(shí)際上是客戶用邊緣代碼去直接接管了請求的生命周期。
在請求的生命周期里面，支持去執(zhí)行一些輕量級的計(jì)算，同時(shí)依然可以使用CDN相關(guān)的業(yè)務(wù)功能，在函數(shù)中利用cdnproxy:true這樣的參數(shù)去將請求代理給邊緣網(wǎng)關(guān)，然后再走CDN多級緩存架構(gòu)，同樣可以利用到CDN高命中率的這個(gè)特點(diǎn)。
EdgeRoutine(ER)其實(shí)也是支持Serverless或者再重新發(fā)起一個(gè)fetch請求，這個(gè)fetch請求和主請求無關(guān)，完全是在代碼里由客戶生成的子請求，子請求可以直接訪問其它任意互聯(lián)網(wǎng)域名，也可以繼續(xù)使用cdnproxy代理到阿里云CDN。如果中小站長，僅僅是簡單的靜態(tài)頁面的話，完全可以直接托管在邊緣，不再需要購買額外云服務(wù)，既可以享受Serverless的便利，也可以享受CDN的邊緣內(nèi)容分發(fā)優(yōu)勢。
EdgeRoutine適用場景
第一個(gè)場景是針對CDN本身提供的一些功能：包括攔截請求、限流限速、內(nèi)容生成、多源合并、異步鑒權(quán)等等，這些完全是可以通過EdgeRoutine(ER) 自主編程實(shí)現(xiàn)，代碼基本上可以隨時(shí)隨地的去進(jìn)行更改測試、灰度發(fā)布、上線，EdgeRoutine(ER)將CDN相關(guān)功能可編程化，無論大型企業(yè)還是中小企業(yè)，都可以自由定制組合，無需提工單提需求，作為開發(fā)者幫助業(yè)務(wù)快速實(shí)現(xiàn)落地；
第二個(gè)場景針對前端網(wǎng)頁這一塊，支持web API、網(wǎng)頁加速、HTML解析、ESI、邊緣渲染、邊緣SSR等，然后當(dāng)然也可以實(shí)現(xiàn)一個(gè)簡單的邊緣API網(wǎng)關(guān)去實(shí)現(xiàn)業(yè)務(wù)中轉(zhuǎn)。前端是EdgeRoutine(ER)一個(gè)非常創(chuàng)新的場景，前端同學(xué)往往非常關(guān)注網(wǎng)頁如何優(yōu)化渲染和提高終端客戶體驗(yàn)，前端技術(shù)也是近些年變革最快創(chuàng)新不斷的領(lǐng)域，CDN的靜態(tài)內(nèi)容分發(fā)技術(shù)針對css、js、圖片、視頻等各類靜態(tài)資源的加速也正是基于前端體驗(yàn)不斷的追求而持續(xù)迭代的。EdgeRoutine(ER)為前端優(yōu)化在端和云之間開辟了一個(gè)新的方向-“邊”（邊緣），云邊端協(xié)同，為瀏覽器/APP客戶端減壓，在邊緣上實(shí)現(xiàn)部分前端業(yè)務(wù)和輕量計(jì)算，可以是“微前端”概念的一個(gè)探索方向；
第三個(gè)場景，當(dāng)在寫代碼或者發(fā)版的時(shí)候，可以通過一個(gè)AB測試的這樣的功能灰度發(fā)布灰度上線，增加穩(wěn)定性的同時(shí)也可以逐步的去觀察自己新功能的受眾率和期望轉(zhuǎn)化率，實(shí)現(xiàn)逐步優(yōu)化或及時(shí)調(diào)頭。比如：通過代碼中使用Geo地域信息，CDN完全支持在國家/省市/區(qū)縣等更細(xì)粒度如浙江區(qū)域或者廣東區(qū)域去灰度不同的功能；
第四個(gè)場景，IoT的設(shè)備網(wǎng)關(guān)在進(jìn)行數(shù)據(jù)生成之后，期望把這些數(shù)據(jù)分析后記錄到中心，可能需要一些簡單的邊緣合并、分析，再把匯總好的數(shù)據(jù)，回傳回中心，邊緣可以在端的基礎(chǔ)上再加一層收集分析匯總，將海量數(shù)據(jù)的流式/離線計(jì)算壓力分散到邊緣節(jié)點(diǎn)，保障低時(shí)延的同時(shí)可以有效減輕端和源站壓力。
除此之外還有網(wǎng)站托管、小程序等，可以參考下面的大圖：
開發(fā)者能用EdgeRoutine（ER）做什么事情？
接下來用幾個(gè)案例進(jìn)行說明開發(fā)者可以基于ER做一些什么典型的事情。
第一，網(wǎng)頁加速
當(dāng)2G、3G的時(shí)候，大家可能都有過這種體驗(yàn)：打開一個(gè)網(wǎng)頁不停的轉(zhuǎn)圈，等待的時(shí)間非常煩惱。4G來了之后這種情況會(huì)少一些，5G會(huì)更好。
CDN核心價(jià)值其實(shí)就是幫助實(shí)現(xiàn)網(wǎng)頁靜態(tài)加速，縮短這種轉(zhuǎn)圈等待的過程，通過網(wǎng)頁資源靜態(tài)的就近分發(fā)，去幫助終端用戶更快的觸達(dá)到對應(yīng)的資源，更快地訪問對應(yīng)的網(wǎng)頁、圖片、視頻等等。
但當(dāng)涉及到一些動(dòng)態(tài)資源，單純的靜態(tài)分發(fā)是無法解決這部分請求的時(shí)延問題的。舉個(gè)實(shí)例，像阿里巴巴國際站，他更多的是海外的服務(wù)，源站在海外受眾在國內(nèi)，或者與之相反，這種網(wǎng)絡(luò)鏈路顯而易見就會(huì)比較差，造成終端用戶等待時(shí)間長體驗(yàn)極差。
下圖上半部分是常規(guī)的渲染效果，當(dāng)一秒鐘的時(shí)候頁面仍顯示白框，下一秒的時(shí)候可能一下彈出來很多內(nèi)容。因?yàn)榫W(wǎng)頁是在服務(wù)端一次性渲染出來再傳輸?shù)娇蛻舳说?#xff0c;甚至對于一些子資源如圖片，都是需要前端JS多次發(fā)起網(wǎng)絡(luò)請求，當(dāng)客戶端收到所有資源之后，才渲染出完整的頁面。
那秒級的等待體驗(yàn)好不好呢？
如果使用了EdgeRoutine(ER) ，那是否可以在邊緣上去動(dòng)態(tài)渲染？回答是Yes。
在EdgeRoutine(ER)的幫助下， 前端的業(yè)務(wù)邏輯也可以實(shí)現(xiàn)流式，如流水線般提高業(yè)務(wù)效率，一般會(huì)選擇優(yōu)先渲染頁面框架，再逐步渲染一些靜態(tài)的資源，整個(gè)過程客戶端只發(fā)起一次網(wǎng)絡(luò)請求，所有的內(nèi)容都是在邊緣渲染拼裝，流式輸出，包括所有的圖片、視頻資源，甚至可以在邊緣實(shí)現(xiàn)異步模式，并發(fā)地去請求各類資源。在整個(gè)邊緣渲染過程中，參考上圖下半部分，在0.3秒的時(shí)候還是一個(gè)白框，當(dāng)不到0.4秒時(shí)，整體頁面框架已經(jīng)出來，然后是文字介紹和價(jià)格部分，當(dāng)一秒鐘不到，除了圖片之外的其他簡單數(shù)據(jù)其實(shí)都已經(jīng)顯現(xiàn)，最重的圖片資源留在最后逐步加載。
從上圖的TTFB和Download來對比，整體的首屏?xí)r間、下載時(shí)間都得到了極大的提升。邊緣渲染、邊緣SSR都是ER提供的創(chuàng)新場景，只有在邊緣低時(shí)延模式下，才可以實(shí)現(xiàn)和瀏覽器本地優(yōu)化相似的效果，且還可以利用CDN同時(shí)完成靜態(tài)內(nèi)容加速。
第二，邊緣執(zhí)行業(yè)務(wù)計(jì)算，降低源站壓力
終端發(fā)達(dá)的今天，手機(jī)移動(dòng)端、瀏覽器端不可避免仍會(huì)包含一些簡單或復(fù)雜的業(yè)務(wù)計(jì)算，比如輸入的會(huì)員賬號密碼就必須回源做校驗(yàn)，這種動(dòng)態(tài)的計(jì)算邏輯要回到云上的服務(wù)器才可以，這個(gè)過程QPS量級和時(shí)延都比較高，源站服務(wù)器壓力也很大。
那在邊緣執(zhí)行計(jì)算是不是可以優(yōu)化這種情況呢？
剛說到的動(dòng)態(tài)的鑒權(quán)，如果直接在邊緣環(huán)境里面直接去做校驗(yàn)，同樣可以校驗(yàn)內(nèi)容是否正確，就不需要回源，減少Q(mào)PS，而且利用邊緣特性實(shí)現(xiàn)了超低時(shí)延的優(yōu)點(diǎn)。甚至當(dāng)有部分業(yè)務(wù)依賴動(dòng)態(tài)數(shù)據(jù)和靜態(tài)資源做拼裝組合，比如AB、小程序模板等，都可以直接依托CDN去做緩存。
第三，邊緣Serverless
如果企業(yè)擁有一個(gè)爆款A(yù)PP，當(dāng)幾億iOS、Android各種各樣的設(shè)備同時(shí)在線，那開發(fā)者一定有此類需求：海量在線設(shè)備要做采樣打點(diǎn)，多版本的灰度升級，AB測試觀察新版本功能的效果或轉(zhuǎn)化率。如果幾億設(shè)備全部打點(diǎn)回源，那源站QPS肯定是扛不住的，一般情況只會(huì)選擇3%或5%的樣本率隨機(jī)去打點(diǎn)觀察。
當(dāng)使用EdgeRoutine(ER)邊緣服務(wù)，可以將海量設(shè)備的QPS分散到遍布全國甚至全球的CDN節(jié)點(diǎn)，QPS的壓力已經(jīng)不是問題，甚至可以簡單分析匯總后再將數(shù)據(jù)回傳到企業(yè)數(shù)據(jù)中心，方便業(yè)務(wù)回溯。
另外，現(xiàn)在很多電商網(wǎng)站都在做千人千面，如果通過回源去實(shí)現(xiàn)的話，整個(gè)成本會(huì)非常高，在邊緣上直接通過用戶地域信息推薦相應(yīng)內(nèi)容，就不再需要通過源站服務(wù)來做決策，直接在邊緣將人和資源做匹配即可。
如何使用EdgeRoutine（ER）？——實(shí)操演示（點(diǎn)擊直接觀看視頻）
基于以上的功能介紹和案例實(shí)踐，如何通過EdgeRoutine(ER) 去編寫邊緣代碼，如何上傳部署，如何本地調(diào)試和在線測試？阿里云技術(shù)專家洪曉龍?jiān)谥辈ブ幸沧隽讼嚓P(guān)演示。
EdgeRoutine(ER)推出了命令行相關(guān)工具edgeroutine-cli，開發(fā)者可以直接在Windows/Mac/Linux本地環(huán)境進(jìn)行代碼調(diào)試，上傳代碼，也可以完成灰度測試，灰度上線。具體查看阿里云官網(wǎng)或者開源頁面：https://help.aliyun.com/document_detail/154621.html
https://github.com/aliyun/alibabacloud-edgeroutine-cli
https://www.npmjs.com/package/@alicloud/edgeroutine-cli
具體實(shí)操演示：
1、EdgeRoutine demo：Hello World
2、EdgeRoutine demo：Hello World本地調(diào)試
3、EdgeRoutine demo：webpack打包
關(guān)鍵信息：
點(diǎn)擊觀看直播回放：https://yq.aliyun.com/live/2690
點(diǎn)擊了解EdgeRoutine(ER)詳情：https://www.aliyun.com/activity/cdn/edgeroutine
目前EdgeRoutine(ER)處于邀測階段，掃碼申請?jiān)囉?/p>
原文鏈接
本文為云棲社區(qū)原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。
總結(jié)
以上是生活随笔為你收集整理的EdgeRoutine技术专家教你把JS代码跑到CDN边缘的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何用一套引擎搞定机器学习全流程？
- 下一篇： 如何在CDN边缘节点执行你的JavaSc