前端資源成本控管

blackbing Playground
7 min readMar 24, 2022

--

由於一直以來都會需要做成本的控管與評估,比較少看到相關的討論,這次來分享一下我們團隊如何評估與降低成本的方式。

Photo by olieman.eth on Unsplash

(以下的 $ 都是美金喔)

CI/CD tool

netlify

大家最推的就是 netlify 啦,一開始我們將 ci 都丟去 netlify 處理,無腦又有 pr preview url。不過其實 netlify 也不是吃素的,隨著團隊長大,pr 變多,測試變多,程式變多,隨之而來的就是 netlify 所要執行的時間就會拉長,我發現開銷越來越大,因為超過的 build time 收費更高。而且他還是 per member 收費的。即使你共用一組帳號,$19/month per member + 1000 minutes /month(then $7 per 500),光 build time 每個月就會花到將近 $100。

netlify pricing

之間我們也一直在減少 build time ,或者是讓某些 pr 不要執行,或減少 daily build 的次數,但覺得還是有點事倍功半,或者一直在犧牲品質,後來決定自建 CI/CD 這條路,降低對 netlify 的依賴。

如果只算 build time ,以一個月 8000 min 來估算的話

當然你可以依照你們團隊的需求來估算,而且 netlify 的功能不只 build,但就開發而言我覺得 CI/CD 他幫我們處理掉這些繁雜的事情,如果專案相對單純,即使跑 production 流量不大的話當免費仔也是沒問題的。

bitrise($31.5/month)

bitrise 是用來建置 iOS/Android 的工具,功能很強大而且真的是用 macos,所以遇到的問題也比較少,teams 的收費 31.50/month 也是挺佛心的,缺點就是跑的機器很弱,會跑比較久。不過反正就丟著給他跑,真的有急用從自己電腦 build 也不是不行。

FE@verybuy bitrise

去年底推出了一個 Gen2 的方案,而且當時說即將在今年中強制要換掉,跟他們技術窗口確認了一些技術細節,覺得換了實在太貴,我們如果不改架構的話直接移轉過去大概一個月要噴 $800,換到的好處是 build time 快兩倍。當時評估實在不太划算就先擱著,還好後來他可能發現推不動,取消了這個強制換方案行動。🥳

Testing

Testrail($36/month)

早期我們有用 TestRail 作為管理測試案例的工具,當時我們請工讀生建立測試案例並手動執行測試來做回報,但其實他只包含測試案例的顯示和報表,就要 $36/mo/per user,後來即使透過撰寫 e2e 測試來送 test report,我覺得還是沒有很顯著的必要,所以後來就直接把這個服務取消了。

Cypress($75/month)

cypress 是個蠻好的 e2e 測試工具,我們一開始有付費,不過畢竟沒有 QA 團隊,其實大部分也是看到 error 抓 Screenshots 來確認問題而已,所以我們直接透過 cypress 的 Screenshots and Videos 當每個 pr 的 artifact 存起來,log 就直接從 ci 看就好了,就省下這筆錢了。

Codecov($10 Per User / Month)

codecov 是拿來 monitor code coverage 的工具,也可以幫你在 pr 檢查 codecov 品質的一個工具,非常好用,不過免費和付費的價格差的有點多,我們現在還在當免費仔,5 個人使用不用錢,人多的話就把 senior 踢掉(senior 多數已經內建 code coverage 在心中了)。

FE@Verybuy code coverage

Development/Production

lambda/Cloud function

雖然是前端還是免不了會有一些需要後端處理的事情需要做,通常會是比較跟會員/db 較沒有關係的事情,我們選擇用 AWS lambda 來處理,價錢也比 GCP 便宜,支援/整合的程度也比較高。

這邊給個參考的比較價格

Serverless showdown: AWS Lambda vs Azure Functions vs Google Cloud Functions

這邊因為每個 function 需求都不同比較難直接做比較,不過呼叫次數與時間還是可以估算出來價格的。

S3

S3 非常適合作為一些靜態資源的快取,除了網站 assets 的儲存,我們也利用他做了許多快取中間層的應用,例如快取第三方付費 API,可以節省 API 的呼叫次數等等。如果再加上 Cloud Front 的 cache 機制,又可以提升速度和節省 S3 的流量。

S3 的計價分為呼叫次數與流量,呼叫次數非常便宜(PUT $0.000005, GET $0.0000004),基本可以忽略,需要注意的是流量費用,送進去不用錢但拿出來要錢,但也還是很便宜啦,幾乎也可以不用太在意。

Amazon S3 定價

Analytics/Log

firebase

firebase 也有許多付費功能,不過我們主要用到的推播,dyncmic link,analytics 都是免費的,真是佛心。

Google Analytics

這應該不用介紹了,總之就是埋 log ,免費。

sentry($26/month)

sentry 拿來追蹤 error log 的,我們用的是最便宜的方案,基本每個月都爆掉(XD),主要是我們有自己的 log server,但他好處是可以 trace code,所以還是可以做一些更細緻的追 log 紀錄。

小計

  • netlify: -$117
  • bitbucket pipeline: $55
  • bitrise: $31.5
  • codecov: -$50
  • TestRail: -$36
  • Cypress: -$75
  • lambda + s3: 根據專案大小評估開銷
  • sentry: $26

每個月:

  • 共節省:$223
  • 共花費:$112.5

(有些服務可以買年費會比較便宜,這邊只是大概估算)

小結:

以上大概是我們前端 Team 的預估花費,可以當作前端團隊評估或提交預算的一個參考,當然如果公司資源多不 care 這點小錢以開發順手最重要囉。

(也有可能是摩羯如我生性節儉啦 🤣🤣。)

個人認爲對那種 per member/per scale/per request 的收費方式都要小心一點,如果 scale up 是會讓成本大幅提高的話,就需要考慮自建的可能性了,就像最一開頭提到的 netlify,當時也是令我又愛又恨,一方面他減少許多開發時的心力,但隨之而來的是每個月不斷增加的帳單,所以才開始評估自行開發的可能性。關於這個議題可以參考我之前的文章:前端邁向 DevOps 之路(Pull Request Preview URL) 💪

如果你覺得這篇文章對你有幫助的話請不吝給個 👍👍👍👍👍

--

--

blackbing Playground
blackbing Playground

Written by blackbing Playground

Bingo Yang。記錄一些生活與工作的雜事,偶爾會寫一些前端網頁開發的心得,過去的足跡在 http://blog.blackbing.net

Responses (1)