作者:倚賢

首先介紹下在本文出現的幾個比較重要的概念：

> **函式計算（Function Compute）**：函式計算是一個事件驅動的服務，透過函式計算，使用者無需管理伺服器等執行情況，只需編寫程式碼並上傳。函式計算準備計算資源，並以彈性伸縮的方式執行使用者程式碼，而使用者只需根據實際程式碼執行所消耗的資源進行付費。函式計算更多資訊[參考](https://help.aliyun.com/product/50980.html)。 
**ImageMagick**：ImageMagick 是一個用於檢視、編輯點陣圖檔案以及進行影像格式轉換的開放原始碼軟體套裝。它可以讀取、編輯超過100種圖象格式。。參見維基百科[詞條](https://zh.wikipedia.org/wiki/ImageMagick)

ImageMagick 是圖片處理的利器，藉助 ImageMagick 可以輕鬆實現圖片的裁剪和縮放。雖然很多語言都封裝了 ImageMagick 的呼叫庫，但是把圖片處理功能和核心業務功能放在同一個服務內，在軟體架構上往往不適合。有如下兩方面的原因：

一方面，圖片處理依賴外部的 bin，已經編譯好的二級制不具備可移植性，給打包釋出帶來了麻煩。另一方面，圖片處理往往是比較耗費計算資源的，對於大多數業務系統來說圖片處理屬於邊緣業務，而非核心業務，所以為整個服務預留較多的計算資源是不划算的。更好的選擇是把圖片處理類業務以微服務的形式切分出來，部署在具備彈性的底層服務之上。對於此類技術需求， Serverless 是非常切合的。

本文重點介紹如何快速地在函式計算平臺上部署一個彈性高可用的圖片處理服務，然後在此基礎上輕鬆的定製化。

<a name="c182e73c" rel="nofollow"></a>
## 快速開始

下面我們藉助於函式計算的應用中心，快速地將圖片轉換服務給部署出來。

1. 
開啟函式計算 [Image Resizer 應用詳情頁](https://statistics.functioncompute.com/?title=%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%20Serverless%20%E5%9C%A8%E7%BA%BF%E5%9B%BE%E7%89%87%E5%A4%84%E7%90%86%E5%BA%94%E7%94%A8&src=article&author=%E5%80%9A%E8%B4%A4&url=https://fc.console.aliyun.com/fc/applications/cn-shanghai/template/Image-Resizer#intro)。如果您尚未開通函式計算服務可能需要先，開通服務是免費的，另外函式計算有每月免費額度，試用服務不會產生費用。
 ![1.png](https://ucc.alicdn.com/pic/developer-ecology/6704df103f4a43d9967cd20c1d4f5b61.png)

2. 
滾動到[Image Resizer 應用詳情頁](https://statistics.functioncompute.com/?title=%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%20Serverless%20%E5%9C%A8%E7%BA%BF%E5%9B%BE%E7%89%87%E5%A4%84%E7%90%86%E5%BA%94%E7%94%A8&src=article&author=%E5%80%9A%E8%B4%A4&url=https://fc.console.aliyun.com/fc/applications/cn-shanghai/template/Image-Resizer#intro)的最底部，點選“立即部署”按鈕。
 ![2.png](https://ucc.alicdn.com/pic/developer-ecology/e80f600fe74c40098d466d85b13c1ca8.png)

3. 
填寫應用名稱：`my-image-resizer`，然後點選“部署”按鈕。
 ![3.png](https://ucc.alicdn.com/pic/developer-ecology/9db232b8448b410cae1c502a72bf5bd9.png)

4. 
複製 HttpTriggerEndpoint 裡的網址。
 ![4.png](https://ucc.alicdn.com/pic/developer-ecology/a7bd6e1e1f6c47e0b89c1040ab8641b8.png)

5. 
在瀏覽器裡開啟上面的網址，或者透過 curl 進行呼叫。注意：由於沒有繫結域名，所以應用中心會預設下載而不是直接在瀏覽器裡開啟圖片。
```bash
curl 'https://xxxxx.cn-shanghai.fc.aliyuncs.com/2016-08-15/proxy/my-image-resizer-ResizeService-5A40B5A8B981/my-image-resizer-ResizeFunction-3E71C57C0094/' --output resized.jpg
```

<a name="b3fbd195" rel="nofollow"></a>
## 工作原理

這是一個單函式結合 Http Trigger 的應用。Http Trigger 以 HTTP GET 方法對外暴露服務，客戶端傳遞三個請求引數：url、width 和 height。其中

- url 表示需要進行處理的源圖片地址
- width 表示裁剪或縮放後的圖片寬度
- height 表示裁剪的圖片寬度。該引數缺失時，表示採用縮放的方式調整圖片。

該應用的架構圖如下：

![6.jpg](https://ucc.alicdn.com/pic/developer-ecology/d9a6547c17fa4af78d71f33ac8ead148.jpg)

FC 函式接受到 HTTP 請求之後，執行如下三個步驟：

1. 把 url 指向的圖片下載下來
2. 使用 imagemagick 進行圖片轉換
3. 將圖片透過 http 協議返回給客戶端

上面我們透過了函式計算的應用中心快速上線了一個圖片轉換的服務。函式計算是按照呼叫次數收費的，所以上述服務即使保持線上也不會產生費用。而又因為函式計算每月有免費的額度，所以日常開發的呼叫也不會產生費用。

<a name="37b47a97" rel="nofollow"></a>
## 定製化開發

<a name="c3dd8329" rel="nofollow"></a>
### 依賴工具

本專案是在 MacOS 下開發的，涉及到的工具是平臺無關的，對於 Linux 和 Windows 桌面系統應該也同樣適用。在開始本例之前請確保如下工具已經正確的安裝，更新到最新版本，並進行正確的配置。

- [Docker](https://www.docker.com/)
- [Funcraft](https://github.com/aliyun/fun)

Fun 工具依賴於 docker 來模擬本地環境。

對於 MacOS 使用者可以使用 [homebrew](https://brew.sh/) 進行安裝：

```bash
brew cask install docker
brew tap vangie/formula
brew install fun
```

Windows 和 Linux 使用者安裝請參考：

1. [https://github.com/aliyun/fun/blob/master/docs/usage/installation.md](https://github.com/aliyun/fun/blob/master/docs/usage/installation.md)

安裝好後，記得先執行 `fun config` 初始化一下配置。

**注意**, 如果你已經安裝過了 funcraft，確保 funcraft 的版本在 3.1.3 以上。

```bash
$ fun --version
3.1.3
```

<a name="2cb472ff" rel="nofollow"></a>
### 初始化

```bash
git clone https://github.com/vangie/fc-image-resizer
cd fc-image-resizer
```

<a name="277b7e0f" rel="nofollow"></a>
### 安裝依賴

```bash
npm install
```

<a name="26759572" rel="nofollow"></a>
### 本地執行

```bash
$ fun local start
using template: .fun/build/artifacts/template.yml
HttpTrigger httpTrigger of ResizeService/ResizeFunction was registered
        url: http://localhost:8000/2016-08-15/proxy/ResizeService/ResizeFunction
        methods: [ 'GET' ]
        authType: ANONYMOUS

function compute app listening on port 8000!
```

然後使用瀏覽器或者 curl 除錯網址 [http://localhost:8000/2016-08-15/proxy/ResizeService/ResizeFunction](http://localhost:8000/2016-08-15/proxy/ResizeService/ResizeFunction)

<a name="a9f94dcd" rel="nofollow"></a>
### 部署

```bash
fun deploy
```

為了獲得更好的開發體驗，建議安裝 [Aliyun Serverless VSCode Extension](https://marketplace.visualstudio.com/items?itemName=aliyun.aliyun-serverless)

<a name="ea6f3b87" rel="nofollow"></a>
## 參考連結

1. [Funcraft](https://github.com/alibaba/funcraft)
2. [Aliyun Serverless VSCode Extension](https://github.com/alibaba/serverless-vscode)

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

快速搭建 Serverless 線上圖片處理應用

相關文章