作者：澤塵

## 簡介

隨著具有不同螢幕尺寸和解析度裝置的爆炸式增長，開發人員經常需要提供各種尺寸的影像，從而確保良好的使用者體驗。目前比較常見的做法是預先為一份影像存放多份具有不同尺寸的副本，在前端根據使用者裝置的 media 資訊來請求特定的影像副本。

預先為一份影像存放多份具有不同尺寸副本的行為，經常是透過 [阿里雲函式計算 FC](https://statistics.functioncompute.com/?title=%E5%88%A9%E7%94%A8%20FC%20%2B%20OSS%20%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%20Serverless%20%E5%AE%9E%E6%97%B6%E6%8C%89%E9%9C%80%E5%9B%BE%E5%83%8F%E5%A4%84%E7%90%86%E6%9C%8D%E5%8A%A1&author=zechen&url=https://fc.console.aliyun.com/) 以及阿里雲物件儲存 OSS 兩大產品實現的。使用者事先為 [FC](https://statistics.functioncompute.com/?title=%E5%88%A9%E7%94%A8%20FC%20%2B%20OSS%20%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%20Serverless%20%E5%AE%9E%E6%97%B6%E6%8C%89%E9%9C%80%E5%9B%BE%E5%83%8F%E5%A4%84%E7%90%86%E6%9C%8D%E5%8A%A1&author=zechen&url=https://fc.console.aliyun.com/) 中的函式設定物件儲存觸發器，當在儲存桶中建立了新物件（即 putObject 行為，此處指在 OSS bucket 中存放了影像），透過 OSS 觸發器來觸發函式對剛剛存放的影像進行處理，處理成不同尺寸的副本後，將這些副本存放進 OSS bucket。

上述方法的特點是預先處理，如果要處理的影像尺寸較多，那麼當影像數量非常大的時候，會佔用很多儲存空間。假設要處理的影像尺寸數目為 x、影像數量為 y、平均每份影像的大小為 z，那麼要佔用的儲存空間為 x _ y _ z。

**動態調整影像大小**
為了避免無用的影像佔用儲存空間，可以使用動態調整影像大小的方法。在 OSS bucket 中預先只為每份影像存放一個副本，當前端根據使用者裝置的 media 資訊來請求特定尺寸影像副本時，再生成相關影像。

![1.png](https://ucc.alicdn.com/pic/developer-ecology/2dfe797c7ce141eb8702849b82de00ee.png)

步驟：

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

上述方法的特點是：

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

## 實踐

### 1. 建立並配置 OSS

- 在 OSS 控制檯 中，建立一個新的 Bucket，讀寫許可權選擇公共讀 (用於本教程示例，可之後更改)。
![2.png](https://ucc.alicdn.com/pic/developer-ecology/674ff36a769e4e82bb1a584d8f9e7b1d.png)

- 在 Bucket 的基礎設定中，設定映象回源。
  - 回源型別：重定向
  - 回源條件：HTTP 狀態碼 404
  - 回源地址：選擇新增前字尾，並在回源域名中填寫一個已接入阿里雲備案的自定義域名。
  - 重定向 Code：302

![3.png](https://ucc.alicdn.com/pic/developer-ecology/14743b5b903149779de09eaff3923e48.png)

### 2. 建立 [FC 函式](https://statistics.functioncompute.com/?title=%E5%88%A9%E7%94%A8%20FC%20%2B%20OSS%20%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%20Serverless%20%E5%AE%9E%E6%97%B6%E6%8C%89%E9%9C%80%E5%9B%BE%E5%83%8F%E5%A4%84%E7%90%86%E6%9C%8D%E5%8A%A1&author=zechen&url=https://fc.console.aliyun.com/)

- 下載 [serverless-image-on-the-fly](https://github.com/ChanDaoH/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、自定義域名

```yaml
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 外掛](https://github.com/alibaba/serverless-vscode/) 部署
  - 可以透過 [fun](https://github.com/alibaba/funcraft) 部署

### 3. 測試動態調整影像

- 在 OSS bucket 中上傳一張影像，假設為 `image.jpg` 。

![4.png](https://ucc.alicdn.com/pic/developer-ecology/3d25fab93a1f42a19b5a1a1df429ffb9.png)

- 此時請求 `https://{OSS_BUCKET_NAME}.{OSS_REGION}.aliyuncs.com/{width}*{height}/image.jpg`。會有如下效果：
  1. 下載到指定 `width * height` 大小的 image.jpg。
  1. OSS bucket 中有 `width * height` 命名的目錄，該目錄下有 image.jpg。

![5.gif](https://ucc.alicdn.com/pic/developer-ecology/72e6290097ee45dbadd396e8c7de21bc.gif)

## 總結

我們透過 [FC + OSS](https://statistics.functioncompute.com/?title=%E5%88%A9%E7%94%A8%20FC%20%2B%20OSS%20%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%20Serverless%20%E5%AE%9E%E6%97%B6%E6%8C%89%E9%9C%80%E5%9B%BE%E5%83%8F%E5%A4%84%E7%90%86%E6%9C%8D%E5%8A%A1&author=zechen&url=https://fc.console.aliyun.com/) 搭建了一個實時按需影像處理服務，該服務擁有以下特點：

1. 即時處理
1. 降低儲存成本
1. 無需運維

## 資料

1. [函式計算 Function Compute](https://statistics.functioncompute.com/?title=%E5%88%A9%E7%94%A8%20FC%20%2B%20OSS%20%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%20Serverless%20%E5%AE%9E%E6%97%B6%E6%8C%89%E9%9C%80%E5%9B%BE%E5%83%8F%E5%A4%84%E7%90%86%E6%9C%8D%E5%8A%A1&author=zechen&url=https://fc.console.aliyun.com/)
1. [Aliyun Serverless VSCode 外掛](https://github.com/alibaba/serverless-vscode/)
1. [Fun](https://github.com/alibaba/funcraft)

>“[阿里巴巴雲原生技術圈](https://developer.aliyun.com/group/alisoftwaretech/)關注微服務、Serverless、容器、Service Mesh 等技術領域、聚焦雲原生流行技術趨勢、雲原生大規模的落地實踐，做最懂雲原生開發者的技術圈。”

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

相關文章