天天看點

函數計算-觸發OSS來處理圖檔加水印和大小裁剪

阿裡雲在4月26日推出function compute(函數計算)後,很多客戶踴躍申請試用,基于這個産品的目前的試用場景,會彙總多個場景逐漸從淺入深來完成一系列主題講解。

<b>業務場景描述</b>

在web應用中,有很多在類型,其中針對有一種是針對電商、圖檔處理網站中當客戶上傳到oss的圖檔進行大小裁剪或者批量加上防盜水印,通常的做法是搭建一個線上伺服器并部署web應用來進行處理,程式需要按照一定規則來定時來觸發事件,這樣的情況下,會有3個明顯的工作需要額外來考慮:

<b>1、</b><b>需要搭建web</b><b>應用伺服器(不管有沒有圖檔處理,空置率會比較高)</b>

<b>2、</b><b>需要編寫相關oss</b><b>代碼來處理這塊事情(需要專門維護一套運作處理代碼)</b>

<b>3、</b><b>需要考慮圖檔處理的及時性如何保障(要考慮并發和定時器的執行方法)</b>

以上問題,我們僅僅需要通過阿裡雲的函數計算産品來設定簡單事件觸發器和編寫一些簡單oss的程式就能完美解決上述問題,下面讓我們來看看這個任務的如何分解。

<b> </b><b>整體架構圖</b>

首先來對比一下新老架構有什麼不同,老架構需要考慮三個地方的處理,例如處理oss圖檔的内容、觸發條件的處理、以及搭建應用伺服器等。

 <b>老的架構:</b>

如下圖,需要考慮藍色部分,圖檔轉碼需要編寫相關代碼進行處理。

函數計算-觸發OSS來處理圖檔加水印和大小裁剪

藍色标注是老架構中需要關注的,程式需要一種機制對上傳來的圖檔進行設定,例如從oss的某個目錄進行定期掃描,并批量發送到圖檔進行加水印,大小變化等,并把處理過的圖檔,使用者需要搭建web應用,需要編寫相關oss的處理,還需要有個機制能定期做程式處理。

總結下來需要使用者關注内容點:

<b>1、</b><b>對圖檔的處理需要編寫相關代碼</b>

<b>2、</b><b>在oss</b><b>上把轉碼後的圖檔轉移到新的bucket</b><b>,需要維護相關代碼</b>

<b>3、</b><b>需要考慮圖檔處理的及時性</b>

<b>新架構:</b>

使用者僅僅需要在function compute(函數計算)上設定觸發器+函數,例如,監控某個bucket下的putobject的事件,當使用者把圖檔上傳到oss的某個bucket,

馬上觸發後續的函數代碼,函數代碼的無非就是把圖檔進行處理,并把圖檔轉移到新的bucket中,整個過程,不需要搭建web伺服器,不需要寫觸發條件,

也無需關注整個服務狀态如何。純粹的事件觸發後續程式,詳見下圖分解,僅僅一處藍色圓圈就是需要編寫的代碼。

函數計算-觸發OSS來處理圖檔加水印和大小裁剪

<b>整個業務處理流程</b>:

函數計算-觸發OSS來處理圖檔加水印和大小裁剪

<b> </b><b>源碼執行個體</b>

基于新架構的内容,我把相關代碼按塊來分解,按照兩塊内容來處理,控制台上的操作和fcli指令行工具的使用

<b>通過控制台的操作</b>

<b>1、 開通service</b>

函數計算-觸發OSS來處理圖檔加水印和大小裁剪

<b>2、新增函數計算</b>

建立函數計算裡,需要選擇運作環境,目前是nodejs4.4,後續會推出python、java環境等。

這個示例中選線上編輯,輸入編寫代碼即可。

函數計算-觸發OSS來處理圖檔加水印和大小裁剪

<b>代碼段:</b>

<b>3、設定oss</b>

的trigger

在這個選項頁裡,我們選中華東2的bucket和觸發事件,觸發事件目前控制台僅支援通過oss進行觸發,但是通過api或者sdk可以編寫自行觸發的事件。在這裡,我列舉控制台的方式來處理。

設定到這個地方,肯定有人會跑出來說,為什麼不直接用oss本身的url進行resize呀,你考慮一點都沒錯,但是當我想把resize後的圖檔再存下來,怎麼搞?或者我是不同bucket下的,怎麼搞?再或者,我想跨region儲存,怎麼搞?涉及到一系列問題,都交給oss的sdk來處理,就要寫大量代碼。哪麼通過fc,在一個函數中都可以自定義搞定,這樣靈活友善的事情,顯然不用再搭建執行環境來處理,交給fc即可。

函數計算的oss的trigger設定如下:

注意:由于本案例是在同一個bucket中操作圖檔,如果不設定字首或者字尾做區分圖檔處理類型,會死循環的生成很多圖檔。

函數計算-觸發OSS來處理圖檔加水印和大小裁剪

在oss上的檔案夾的目錄結構如下:

函數計算-觸發OSS來處理圖檔加水印和大小裁剪

<b>4、檢視執行結果</b>

<b></b>

函數計算-觸發OSS來處理圖檔加水印和大小裁剪

<b>整個業務執行結束,完成了完整的一個例子。</b>

繼續閱讀