利用 Serverless，實現 COS & CDN Combo Handler

背景

小 S 維護的一個前端系統，單個頁面中有數個沒有依賴關係的 js, css 須要加載，此時瀏覽器會分別去請求對應的文件。此時小 S 收到 Leader 給的一個任務：優化前端的靜態資源請求，儘可能作合併。

什麼是 Combo Handler？相信不少前端同窗並不陌生。2008 年 7 月 YUI Team 宣佈在 YAHOO! CDN 上對 YUI JavaScript 組件提供 Combo Handler 服務。簡單講，當前端有 n 個 js 須要分別去拉取時，經過 cdn combo 技術能用一個請求把 js 在服務端合併後拉回，同理可用於 css 文件。

現狀

小 S 立刻開始着手，看了下手頭的項目，目前靜態資源是通過 騰訊雲 CDN 的，靜態資源放在了 騰訊雲對象存儲 COS，js、css 文件由於模塊的不一樣，被打包成了多個。而騰訊雲 CDN 目前不支持 Combo 的方式。

分析

小 S 開始想到了 HTTP2.0，但看了 CDN 的請求配置已開啓 HTTP2.0，這一塊能提高的空間已不大。那是否能作靜態的離線合併處理，看似可行的一條路，但改動量不小，且確實涉及到一些歷史緣由，這塊很差動。小 S 忽然想起之前瞭解過的 CDN Combo，那從請求實時合併入手，也是可行的。但惋惜，目前接入的 CDN 沒能支持。

此時天空飄來一句秦牛·道格拉斯·正威的話打在了小 S 身上

淡黃的長...不是，計算機科學領域的任何問題均可以經過增長一個間接的中間層來解決

目前靜態資源的請求鏈路是 前端 → CDN → COS，想作實時合併的話，那能夠在 CDN 和 COS 之間加入一箇中間層來實現，這個中間層根據過來的請求，分別去 COS 上拉取文件作合併後返回給 CDN，CDN 則能夠根據請求的路徑作緩存。而適合作這個中間層的，小 S 首先想到了最近火的不行的 Serverless。

小 S 如夢初醒，甚是感動，簡單手動幾下便完成了。下面來把實現過程當中的關鍵步驟分享出來。

實現

原理

使用 Serverless framework 實現一個 server，用來給 CDN 做爲源站，server 中根據 CDN 過來的判斷是否開啓 combo 特性，這裏使用 url 中的 ?? 雙問號開啓 combo 特性，使用 & 鏈接多個文件路徑，如 xxx.com?? & 。若是啓用，則去 COS 上拉取對應的文件合併後返回。若是不啓用，則跟原始請求單個文件同樣，如 xxx.com/ ，則 server 返回 302 cos 連接到 CDN，讓 CDN 去 follow 302，與原始使用沒有差異。

相關產品：

• Serverless framework （經過雲 API 網關開啓外網訪問）
• CDN
• COS

1. 安裝Serverless framework 命令行工具

// 非npm安裝可查看 https://cloud.tencent.com/document/product/1154/42990
npm install -g serverless
serverless -v

2. 修改 demo 配置

下載 cdn-combo demo 的代碼，解壓後獲得 cdn-combo 文件夾，修改裏面的幾個配置信息，包括 SecretId、SecretKey、Bucket 以及 Region。

其中，Bucket、Region 即本來 CDN 回源的 COS 源站的桶信息，若是修改了 app.js 中的 Region，也要同時修改 serverless.yml 中的 region 的值，這樣保證了 Serverless 服務請求 COS 時走的是騰訊內網。

SecretId、SecretKey 即帳號的密鑰信息。

（該例子是從一個存儲桶中拿不一樣文件進行合併，如何但願從不一樣存儲桶，乃至從非 COS 的源站中拿文件進行合併，都可自行參考實現）

3. Serverless 部署

在 cdn-combo 文件夾下執行進行 serverless 的部署

sls --debug

部署過程當中須要掃描二維碼進行登陸，若是但願持久化登陸狀態，可參考 文檔

部署完成，在命令行咱們會獲得以下信息，此時證實中間服務已部署起來，拿到 url 的 host 部分 https://service-xxxxxx-1250000000.gz.apigw.tencentcs.com 這咱們須要的內容，記住它。

4. 設置 CDN 回源 Serverless Server Url

登陸 CDN 控制檯，找到以前接入的域名，或者接入個新的域名。

如下面做爲例子，CDN 域名爲 cdn-combo.galen-yip.com，修改源站，源站選擇自有源，回源協議務必選擇 HTTP，源站地址以及回源 host 填寫 Serverless server url，待設置成功，至此咱們變完成了全部的變動工做。

同時注意，這兩個配置務必以下，過略參數配置需關閉，跟隨回源 301/302 配置打開

5. 驗收成果

訪問 http://cdn-combo.galen-yip.com/js-combo/foo.js 返回 200 以及單文件內容

訪問 http://cdn-combo.galen-yip.com/??js-combo/foo.js&js-combo/bin.js 返回 200 以及文件合併後的內容

最後把頁面 http://cdn-combo-demo-1251496585.cos.ap-guangzhou.myqcloud.com/index.html中的靜態資源引用，改變成以上 cdn combo 的引用方式

小結

以上便完成了 CDN Combo Handler 能力。特別注意，CDN 源站從 COS 改成 Serverless server，計費這邊是有變動的，具體能夠查詢對應產品的流量計費狀況。

Serverless 能發揮的做用遠不止此，最後附上 demo 下載地址。

One More Thing

3 秒你能作什麼？喝一口水，看一封郵件，仍是 —— 部署一個完整的 Serverless 應用？

複製連接至 PC 瀏覽器訪問：https://serverless.cloud.tencent.com/deploy/express

3 秒極速部署，當即體驗史上最快的 Serverless HTTP 實戰開發！

傳送門：

• GitHub: github.com/serverless
• 官網：serverless.com

歡迎訪問：Serverless 中文網，您能夠在 最佳實踐 裏體驗更多關於 Serverless 應用的開發！

---

推薦閱讀：《Serverless 架構：從原理、設計到項目實戰》