基於騰訊雲EdgeOne的自適應webp轉換

Aicnal發表於2024-08-09

基於騰訊雲EdgeOne的自適應webp轉換

EdgeOne是騰訊雲提出的邊緣計算相關產品,和CloudFlare的小黃雲類似,實際上大致等於CDN+安全防護,同時它還提供了邊緣函式來提供我們使用,我們可以藉助邊緣函式實現一些功能,比如說自動將請求的pngjpg圖片轉換成webp,從而節省流量,加快網站的訪問速度,目前暫時是免費的,直接開始白嫖

但是這個方法目前只適用於你使用自建圖床或者專門給圖床套了這個EO的情況,如果直接給主站使用的話可能會出現無法訪問的情況?本人沒有試過,還望大家反饋

具體步驟

首先我們進入騰訊雲EO的控制檯:

之後進入站點列表,選擇你想要部署邊緣函式的站點,進入到站點設定中:

進入到左側邊欄:邊緣函式,選擇函式管理,在這裡我們新建一個函式:

在這裡騰訊雲提供了一些常用的預設,我們直接使用就好,這裡我們為了自適應轉webp,所以使用圖片處理,選擇完成之後點選下一步:

這裡隨便取一個名字,你自己以後維護的時候知道是什麼函式就行,之後下滑點選建立並部署

成功建立函式之後會提示你新增觸發規則,這個的意思是邊緣函式不是自動執行的,需要有一定的觸發條件,比如說繫結到某個域名上,或者碰到什麼樣的檔案型別才會觸發,我們現在先新增觸發規則

在這裡我繫結了騰訊雲COS的回源CDN域名,這裡我的匹配型別選擇HOST,也就是域名或者主機名,後面的值就是我對應圖床的域名,確定完成之後點選確定,之後邊緣函式會自動部署

這個過程中你的EO可能會中斷大概五分鐘左右,之後如果控制檯都顯示已部署完成即部署成功

檢驗

那麼我們應該如何檢驗呢,下面以其中一張照片為例

我首先透過諸如PicGo等軟體將圖片上傳到騰訊雲COS中去,之後得到CDN地址為:https://img.juniortree.com/202408091010252.png

此時你會發現其檔案還是.png字尾,就覺得失敗了,但其實不是這樣的

如果按照官方的教程,透過curl指令去查詢檔案元素,結果發現Content-Type還是png,覺得肯定是失敗的

我之前也被這個問題困擾了很久,也發過工單問過客服,但最終我還是搞明白了

首先我們需要將這個圖片在瀏覽器中開啟:

按住F12開啟開發者模式,選擇網路

此時再按F5+Ctrl強制重新整理快取,之後再觀察右邊的檔案型別是不是webp,如果是則說明函式使用成功

相關文章