利用 FC + OSS 快速搭建 Serverless 實(shí)時(shí)按需圖像處理服務(wù)

作者：澤塵

簡(jiǎn)介

隨著具有不同屏幕尺寸和分辨率設(shè)備的爆炸式增長(zhǎng)，開發(fā)人員經(jīng)常需要提供各種尺寸的圖像，從而確保良好的用戶體驗(yàn)。目前比較常見的做法是預(yù)先為一份圖像存放多份具有不同尺寸的副本，在前端根據(jù)用戶設(shè)備的 media 信息來(lái)請(qǐng)求特定的圖像副本。

預(yù)先為一份圖像存放多份具有不同尺寸副本的行為，經(jīng)常是通過(guò) 阿里云函數(shù)計(jì)算 FC 以及阿里云對(duì)象存儲(chǔ) OSS 兩大產(chǎn)品實(shí)現(xiàn)的。用戶事先為 FC 中的函數(shù)設(shè)置對(duì)象存儲(chǔ)觸發(fā)器，當(dāng)在存儲(chǔ)桶中創(chuàng)建了新對(duì)象（即 putObject 行為，此處指在 OSS bucket 中存放了圖像），通過(guò) OSS 觸發(fā)器來(lái)觸發(fā)函數(shù)對(duì)剛剛存放的圖像進(jìn)行處理，處理成不同尺寸的副本后，將這些副本存放進(jìn) OSS bucket。

上述方法的特點(diǎn)是預(yù)先處理，如果要處理的圖像尺寸較多，那么當(dāng)圖像數(shù)量非常大的時(shí)候，會(huì)占用很多存儲(chǔ)空間。假設(shè)要處理的圖像尺寸數(shù)目為 x、圖像數(shù)量為 y、平均每份圖像的大小為 z，那么要占用的存儲(chǔ)空間為 x y z。

動(dòng)態(tài)調(diào)整圖像大小
為了避免無(wú)用的圖像占用存儲(chǔ)空間，可以使用動(dòng)態(tài)調(diào)整圖像大小的方法。在 OSS bucket 中預(yù)先只為每份圖像存放一個(gè)副本，當(dāng)前端根據(jù)用戶設(shè)備的 media 信息來(lái)請(qǐng)求特定尺寸圖像副本時(shí)，再生成相關(guān)圖像。

步驟：

1. 用戶通過(guò)瀏覽器請(qǐng)求 OSS bucket 中特定的圖像資源，假設(shè)為 800 * 600 的 image.jpg。
2. OSS bucket 中沒有相關(guān)的資源，將該請(qǐng)求重定向至生成特定尺寸圖像副本的 api 地址。
3. 瀏覽器根據(jù)重定向規(guī)則去請(qǐng)求調(diào)整圖像大小的 api 地址。
4. 觸發(fā)函數(shù)計(jì)算的函數(shù)來(lái)執(zhí)行相關(guān)請(qǐng)求。
5. 函數(shù)從 OSS bucket 中下載到原始圖像 image.jpg，根據(jù)請(qǐng)求內(nèi)容生成調(diào)整后的圖像，上傳至 OSS bucket 中。
6. 將請(qǐng)求重定向至圖像在 OSS bucket 中的位置。
7. 瀏覽器根據(jù)重定向規(guī)則去 OSS bucket 中請(qǐng)求調(diào)整大小后的圖像。

上述方法的特點(diǎn)是：

1. 即時(shí)處理。
2. 降低存儲(chǔ)成本。
3. 無(wú)需運(yùn)維。

實(shí)踐

1. 創(chuàng)建并配置 OSS

• 在 OSS 控制臺(tái) 中，創(chuàng)建一個(gè)新的 Bucket，讀寫權(quán)限選擇公共讀 (用于本教程示例，可之后更改)。
  

• 在 Bucket 的基礎(chǔ)設(shè)置中，設(shè)置鏡像回源。
  • 回源類型：重定向
  • 回源條件：HTTP 狀態(tài)碼 404
  • 回源地址：選擇添加前后綴，并在回源域名中填寫一個(gè)已接入阿里云備案的自定義域名。
  • 重定向 Code：302

2. 創(chuàng)建 FC 函數(shù)

• 下載 serverless-image-on-the-fly 項(xiàng)目到本地

git clone git@github.com:ChanDaoH/serverless-image-on-the-fly.git

• 進(jìn)入項(xiàng)目目錄，執(zhí)行 npm install
• 填寫 template.yml 文件中的相關(guān)內(nèi)容：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

• 部署函數(shù)至云端
  • 可以通過(guò) Serverless VSCode 插件 部署
  • 可以通過(guò) fun 部署

3. 測(cè)試動(dòng)態(tài)調(diào)整圖像

• 在 OSS bucket 中上傳一張圖像，假設(shè)為 image.jpg 。

• 此時(shí)請(qǐng)求 https://{OSS_BUCKET_NAME}.{OSS_REGION}.aliyuncs.com/{width}*{height}/image.jpg。會(huì)有如下效果：
  1. 下載到指定 width * height 大小的 image.jpg。
  2. OSS bucket 中有 width * height 命名的目錄，該目錄下有 image.jpg。

總結(jié)

我們通過(guò) FC + OSS 搭建了一個(gè)實(shí)時(shí)按需圖像處理服務(wù)，該服務(wù)擁有以下特點(diǎn)：

1. 即時(shí)處理
2. 降低存儲(chǔ)成本
3. 無(wú)需運(yùn)維

資料

1. 函數(shù)計(jì)算 Function Compute
2. Aliyun Serverless VSCode 插件
3. Fun

“阿里巴巴云原生技術(shù)圈關(guān)注微服務(wù)、Serverless、容器、Service Mesh 等技術(shù)領(lǐng)域、聚焦云原生流行技術(shù)趨勢(shì)、云原生大規(guī)模的落地實(shí)踐，做最懂云原生開發(fā)者的技術(shù)圈?！?/p>