利用 FC + OSS 快速搭建 Serverless 實時按需圖像處理服務

做者：澤塵

簡介

隨着具備不一樣屏幕尺寸和分辨率設備的爆炸式增加，開發人員常常須要提供各類尺寸的圖像，從而確保良好的用戶體驗。目前比較常見的作法是預先爲一份圖像存放多份具備不一樣尺寸的副本，在前端根據用戶設備的 media 信息來請求特定的圖像副本。

預先爲一份圖像存放多份具備不一樣尺寸副本的行爲，常常是經過 阿里雲函數計算 FC 以及阿里雲對象存儲 OSS 兩大產品實現的。用戶事先爲 FC 中的函數設置對象存儲觸發器，當在存儲桶中建立了新對象（即 putObject 行爲，此處指在 OSS bucket 中存放了圖像），經過 OSS 觸發器來觸發函數對剛剛存放的圖像進行處理，處理成不一樣尺寸的副本後，將這些副本存放進 OSS bucket。

上述方法的特色是預先處理，若是要處理的圖像尺寸較多，那麼當圖像數量很是大的時候，會佔用不少存儲空間。假設要處理的圖像尺寸數目爲 x、圖像數量爲 y、平均每份圖像的大小爲 z，那麼要佔用的存儲空間爲 x _ y _ z。

動態調整圖像大小 爲了不無用的圖像佔用存儲空間，可使用動態調整圖像大小的方法。在 OSS bucket 中預先只爲每份圖像存放一個副本，當前端根據用戶設備的 media 信息來請求特定尺寸圖像副本時，再生成相關圖像。

步驟：

1. 用戶經過瀏覽器請求 OSS bucket 中特定的圖像資源，假設爲 800 * 600 的 image.jpg。
2. OSS bucket 中沒有相關的資源，將該請求重定向至生成特定尺寸圖像副本的 api 地址。
3. 瀏覽器根據重定向規則去請求調整圖像大小的 api 地址。
4. 觸發函數計算的函數來執行相關請求。
5. 函數從 OSS bucket 中下載到原始圖像 image.jpg，根據請求內容生成調整後的圖像，上傳至 OSS bucket 中。
6. 將請求重定向至圖像在 OSS bucket 中的位置。
7. 瀏覽器根據重定向規則去 OSS bucket 中請求調整大小後的圖像。

上述方法的特色是：

1. 即時處理。
2. 下降存儲成本。
3. 無需運維。

實踐

1. 建立並配置 OSS

• 在 OSS 控制檯 中，建立一個新的 Bucket，讀寫權限選擇公共讀 (用於本教程示例，可以後更改)。

• 在 Bucket 的基礎設置中，設置鏡像回源。

  • 回源類型：重定向
  • 回源條件：HTTP 狀態碼 404
  • 回源地址：選擇添加先後綴，並在回源域名中填寫一個已接入阿里雲備案的自定義域名。
  • 重定向 Code：302

2. 建立 FC 函數

• 下載 serverless-image-on-the-fly 項目到本地

git clone git@github.com: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。會有以下效果：
  1. 下載到指定 width * height 大小的 image.jpg。
  2. OSS bucket 中有 width * height 命名的目錄，該目錄下有 image.jpg。

總結

咱們經過 FC + OSS 搭建了一個實時按需圖像處理服務，該服務擁有如下特色：

1. 即時處理
2. 下降存儲成本
3. 無需運維

資料

1. 函數計算 Function Compute
2. Aliyun Serverless VSCode 插件
3. Fun

「阿里巴巴雲原生技術圈關注微服務、Serverless、容器、Service Mesh 等技術領域、聚焦雲原生流行技術趨勢、雲原生大規模的落地實踐，作最懂雲原生開發者的技術圈。」