利用 FC + OSS 快速搭建 Serverless 實時按需影象處理服務
作者：澤塵
簡介
隨著具有不同螢幕尺寸和解析度裝置的爆炸式增長，開發人員經常需要提供各種尺寸的影象，從而確保良好的使用者體驗。目前比較常見的做法是預先為一份影象存放多份具有不同尺寸的副本，在前端根據使用者裝置的 media 資訊來請求特定的影象副本。
預先為一份影象存放多份具有不同尺寸副本的行為，經常是通過 阿里雲函式計算 FC 以及阿里雲物件儲存 OSS 兩大產品實現的。使用者事先為 FC 中的函式設定物件儲存觸發器，當在儲存桶中建立了新物件（即 putObject 行為，此處指在 OSS bucket 中存放了影象），通過 OSS 觸發器來觸發函式對剛剛存放的影象進行處理，處理成不同尺寸的副本後，將這些副本存放進 OSS bucket。
上述方法的特點是預先處理，如果要處理的影象尺寸較多，那麼當影象數量非常大的時候，會佔用很多儲存空間。假設要處理的影象尺寸數目為 x、影象數量為 y、平均每份影象的大小為 z，那麼要佔用的儲存空間為 x _ y _ z。
動態調整影象大小
為了避免無用的影象佔用儲存空間，可以使用動態調整影象大小的方法。在 OSS bucket 中預先只為每份影象存放一個副本，當前端根據使用者裝置的 media 資訊來請求特定尺寸影象副本時，再生成相關影象。
步驟：
- 使用者通過瀏覽器請求 OSS bucket 中特定的影象資源，假設為 800 * 600 的 image.jpg。
- OSS bucket 中沒有相關的資源，將該請求重定向至生成特定尺寸影象副本的 api 地址。
- 瀏覽器根據重定向規則去請求調整影象大小的 api 地址。
- 觸發函式計算的函式來執行相關請求。
- 函式從 OSS bucket 中下載到原始影象 image.jpg，根據請求內容生成調整後的影象，上傳至 OSS bucket 中。
- 將請求重定向至影象在 OSS bucket 中的位置。
- 瀏覽器根據重定向規則去 OSS bucket 中請求調整大小後的影象。
上述方法的特點是：
- 即時處理。
- 降低儲存成本。
- 無需運維。
實踐
1. 建立並配置 OSS
在 OSS 控制檯 中，建立一個新的 Bucket，讀寫許可權選擇公共讀 (用於本教程示例，可之後更改)。
- 在 Bucket 的基礎設定中，設定映象回源。
- 回源型別：重定向
- 回源條件：HTTP 狀態碼 404
- 回源地址：選擇新增前後綴，並在回源域名中填寫一個已接入阿里雲備案的自定義域名。
- 重定向 Code：302
2. 建立 FC 函式
- 下載 serverless-image-on-the-fly 專案到本地
git clone [email protected]:ChanDaoH/serverless-image-on-the-fly.git
- 進入專案目錄，執行
npm install - 填寫
template.yml檔案中的相關內容：OSS_REGION、OSS_BUCKET_NAME、自定義域名
ROSTemplateFormatVersion: '2015-09-01'
Transform: 'Aliyun::Serverless-2018-04-03'
Resources:
serverless-image:
Type: 'Aliyun::Serverless::Service'
Properties:
Description: This is serverless-image service
Policies:
- AliyunOSSFullAccess
image-resize:
Type: 'Aliyun::Serverless::Function'
Properties:
Handler: src/index.handler
Runtime: nodejs10
Timeout: 60
MemorySize: 512
CodeUri: ./
EnvironmentVariables:
OSS_REGION: oss-cn-shanghai # oss region, such as oss-cn-shanghai、oss-cn-hangzhou
OSS_BUCKET_NAME: images-xxx # oss bucket name
Events:
httpTrigger:
Type: HTTP
Properties:
AuthType: ANONYMOUS
Methods:
- GET
- POST
william.functioncompute.com: # domain name
Type: 'Aliyun::Serverless::CustomDomain'
Properties:
Protocol: HTTP
RouteConfig:
routes:
'/*':
ServiceName: serverless-image
FunctionName: image-resize- 部署函式至雲端
- 可以通過 Serverless VSCode 外掛 部署
- 可以通過 fun 部署
3. 測試動態調整影象
- 在 OSS bucket 中上傳一張影象，假設為
image.jpg。
- 此時請求
https://{OSS_BUCKET_NAME}.{OSS_REGION}.aliyuncs.com/{width}*{height}/image.jpg。會有如下效果：- 下載到指定
width * height大小的 image.jpg。 - OSS bucket 中有
width * height命名的目錄，該目錄下有 image.jpg。
- 下載到指定
總結
我們通過 FC + OSS 搭建了一個實時按需影象處理服務，該服務擁有以下特點：
- 即時處理
- 降低儲存成本
- 無需運維
資料
- 函式計算 Function Compute
- Aliyun Serverless VSCode 外掛
- Fun
“阿里巴巴雲原生技術圈關注微服務、Serverless、容器、Service Mesh 等技術領域、聚焦雲原生流行技術趨勢、雲原生大規模的落地實踐，做最懂雲原生開發者的技術圈。”