【體驗分享】各前端部署平臺詳細體驗彙總

GoldenFingers發表於2024-11-25
前端

為幫助開發者篩選出優質的免費網站部署服務，本文將從體驗和數值上全面體驗測試全球主流現代化前端部署平臺。

體驗物件包括：Vercel、Cloudflare Pages、GitHub Pages 和新發現的騰訊雲 EdgeOne Pages。測量指標包括全球訪問時延、國內訪問時延、Google Lighthouse 測量指標，以及使用者在使用過程中部署流暢程度。

需要說明的是，儘管 AWS Pages 和 Netlify 也備受關注，由於其註冊和驗證過程對國內使用者不夠友好（需要繫結銀行卡及身份防欺詐驗證），未納入此次體驗範圍。

希望透過本次體驗分享，為大家提供有價值的參考，幫助挑選最適合的免費網站部署服務。

體驗物件設定

靜態網站應用廣泛，包括部落格、公司主頁、文件和展示頁面等。本次體驗物件聚焦於基於 React 框架構建的攝影圖片展示網站。

此網站的靜態資源總大小約為 110MB，採用 create-react-app 工具生成，為比較典型的展示型網站。

website display

以下是部署成功後的連結。您可以在檢視具體體驗結果之前，直觀體驗各網站的載入速度和內容渲染速度:

平臺 部署地址
Vercel https://testvc.wenyiqing.tech/
Cloudflare https://testcf.wenyiqing.tech/
Github https://testgh.wenyiqing.tech/
EdgeOne https://testeo.wenyiqing.tech/

備註：

由於部署平臺自動分配的訪問域名國內可能無法訪問。為了精準體現測試效果，所有部署的網站均新增了自定義域名。

平臺優缺點及部署體驗

Vercel

部署成功網址，點選體驗。

簡潔的網站設計，絲滑的部署流程，從註冊到部署成功只需要5分鐘。

體驗結論

Vercel 專注於提供高效、快速和簡便的開發與部署體驗，整體部署體驗甚至優於 Cloudflare。缺點是免費計劃的資源較少。

優勢

  1. 頁面簡潔且流暢：Vercel 的網站頁面體驗很好，資料展示清晰乾淨。
    2. Serverless 函式支援：支援 Serverless 函式，可以在前端專案中輕鬆新增後端邏輯。

缺點

  1. 資源限制：免費計劃限制原始檔大小為 100MB，對於靜態資源較多的網站難以適用，需要額外購買資源儲存服務。

  2. 構建次數受限：免費版本每天最多允許 100 次部署，且有多種限制，正常使用者容易觸發上限。

Cloudflare Pages

部署成功網址，點選體驗。

使用 Cloudflare 部署網站流程順暢，步驟清晰明瞭，官網部落格中的教程和指引十分完善。此外，Cloudflare 還提供豐富的收費擴充功能，以滿足高要求使用者的需求。

Cloudflare 已整合 Pages 和 Workers 架構，便於開發人員在需要新增更多動態功能時實現無縫遷移。

Cloudflare Workers 是一種無伺服器計算平臺，開發人員可以編寫和部署輕量級程式碼來執行復雜的邏輯，而無需依賴傳統的後端伺服器。

體驗結論

Cloudflare Pages 優勢明顯，處於行業領先地位。但是在國內的訪問時延特別高，不建議國內使用者選擇。並且免費計劃的資源限制較嚴格，平臺重心更傾向於付費使用者。

優勢

  1. 完善的CDN：Cloudflare 擁有強大的 CDN，確保部署網站全球訪問速度極快，在國內表現也不錯。

  2. 詳盡教程：官網提供了非常詳細的教程，包括文字和動圖，對新手非常友好。

  3. 便捷的擴充和整合：付費功能包括多人協作和高效併發，支援開發者無縫遷移到 Workers。主流 CMS 都有豐富的外掛，增強自動化部署流程。

缺點

  1. 國內訪問高時延：Cloudflare 在國內訪問時延很高，測試顯示國內的請求會回源至美國，具體測試指標會在下文介紹。

  2. 受限的免費計劃：免費版本不支援併發構建（不支援多人協作開發），每月僅有 500 次構建機會。

  3. 昂貴的付費計劃：付費計劃分為三個階段：0 -> $ 20 -> $ 200 -> ∞，大多特色功能僅在付費計劃中提供。

Github Pages

部署成功網址，點選體驗。

GitHub Pages 依託於 GitHub 平臺，由於其完全免費的定位和龐大的使用者基礎，吸引了大量開發者使用 GitHub Pages 進行網站部署。

體驗結論

由於 Github 國內訪問便捷且知名化程度高，GitHub Pages 成為前端新手學習部署的首選。活躍的社群也能幫助解決各種問題。

然而，在擴充套件性和自動化程度方面，GitHub Pages 與商業平臺存在差距，其穩定性亦備受質疑。

優勢

  1. 完全免費：無需擔心因收費計劃而被迫遷移。

  2. 社群活躍：社群活躍，專家眾多，問題能夠及時解決。

缺點

  1. 不穩定：GitHub Pages 在國內訪問嚴重不穩定，常出現斷連和訪問緩慢的問題，測試過程中路由追蹤路徑也不理想。

  2. 無預製構建指令碼：GitHub Pages 缺乏預配置的前端框架打包構建工作流，需要手動編寫部署工作流檔案，對初學者存在一定門檻。

  3. 資源有限：在商業或協作開發中，GitHub Pages 的資源限制可能無法滿足需求。儲存限額為 1GB，每小時最多 10 次構建部署限制了許多應用場景。

Tencent EdgeOne Pages

部署成功網址，點選體驗。

EdgeOne Pages 是騰訊雲 EdgeOne 剛推出的網站部署服務，目前 Beta 版 完全免費，支援國內與國際站：

  1. 國內站：主要面向國內開發者，預置域名 .site，支援全球加速，國內訪問體驗最好，但是域名需要備案。

  2. 國際站：面向全球開發者，預置域名 .app，只有海外節點，國內訪問速度還行，且支援未備案的域名。

體驗結論

EdgeOne Pages 在國內表現最為出色，海外各項測量指標對比國際大牌稍弱一點。

平臺為開發者提供了豐富的免費資源，並即將支援邊緣函式 Serverless，儘管將來會引入收費計劃，但還是值得期待。

優勢

  1. 免費且限制少：目前平臺幾乎沒有什麼限制，沒有收費功能，國際站也無需繫結信用卡。官方說明未來推出商業版本後免費計劃可能會增加限制。

  2. 穩定的併發構建：EdgeOne Pages 在併發構建方面表現卓越。考慮到併發構建容易導致構建失敗，大部分平臺對此都有嚴格限制。

缺點

  1. 功能簡單：當前平臺整體功能還較為簡單，提供的前端模板也有限，看起來還在快速迭代中。

  2. 部分地區時延高：EdgeOne Pages 部署的網站在大多數海外地區表現良好，但部分地區訪問時延較高，具體情況將在後文詳細介紹。

優缺點總結

以上展示為平臺特有的優點。共有優點如支援自定義域名和提供 SSL 服務等不再贅述。當然，各平臺可能還有本次體驗過程中未發現的優點，歡迎大家在評論區補充。

對於 Cloudflare、Vercel 等成熟平臺來說，它們在業務層面的缺點很少，主要集中在國內訪問時延和免費計劃上。

在資源限制方面，開發者需求不同觸頂情況不同，因此資源限制是否嚴苛需根據實際情況來判斷。本次分享僅供討論參考，無法涵蓋所有使用場景。

部署網站指標測量

測量指標包括三類：

  1. 全球各地的訪問時延：此項測試部署的靜態網站客戶端在世界各地的訪問延遲，主要評估各個平臺的 CDN 建設水平。

  2. 國內各地的訪問時延：此項測試國內不同區域的訪問延遲，主要評估國內使用者的訪問體驗。這裡為了能夠更好的測量，對部署專案繫結了自定義域名。

  3. Google Lighthouse測量指標 ：Google Lighthouse 可以用於評估網頁的效能、可訪問性等。本次測量指標包含：首次內容繪製 (FCP)、最大內容繪製 (LCP)、總阻塞時間 (TBT) 和累積佈局偏移 (CLS)等。這些指標能夠反映使用者在頁面載入過程中的實際體驗。

全球訪問時延測量

全球訪問時延是基於平臺分配的域名測量的，如果平臺對自定義域名進行了最佳化處理，測量結果可能與實際情況有所差異。

全球時延測量使用了多個工具驗證，防止因工具選擇出現偏差，下文展示圖片測量工具為 CDNPerf。

Vercel

Vercel 的表現相當不錯，有趣的是，國內測試中並未出現高延遲點。進一步詳細測量後發現，實際是由於平臺分配的域名被禁用。
vercel global latency measurement

Cloudflare Pages

Cloudflare 測試顯示非常強大，少量節點甚至測不出高延遲。為了詳細測試增加了測量節點，可以看到在亞洲仍有不少高時延地區。

cloudflare pages global latency measurement

Github Pages

GitHub Pages 全球表現總體令人滿意，僅在國內和亞太地區的節點出現訪問不穩定的情況。

github pages global latency measurement

EdgeOne Pages

EdgeOne Pages 在海外大多數地區表現還行，部分地區時延較高。

edgeone pages global latency measurement

國內訪問時延測量

因為有些平臺預置域名被牆，為更好測試國內資料，對所有部署的網站繫結了自定義域名。其中 EdgeOne 使用國內站測試（支援海外節點）。

為保證測試結果的準確性，本文測試使用了多個平臺驗證，文中圖片展示使用的工具為 boce。

Vercel

Vercel 在國內的表現相當出色，並且使用者註冊和使用門檻明顯低於 AWS 和 Netlify。

vercel pages China delay measurement

Cloudflare Pages

Cloudflare 在國內體驗非常差。從路由追蹤圖可以看出，主要問題在於回源實體地址距離過遠。

image

cloudflare pages China delay measurement

Github Pages

GitHub Pages 在國內的測速結果與其日常使用體驗相符，表現出明顯的不穩定性。測試過程中，多次測得的結果也存在較大差異。

github pages China delay measurement

Edgoene Pages

EdgeOne Pages 在國內的表現最佳，畢竟是國內廠商，國內節點優勢很大。

image

Google Lighthouse實際使用體驗測量

為評估網頁效能，採用 Google Lighthouse 測量以下關鍵指標：CLS、LCP、FCP、TBT等。詳細指標說明見 Google 官方文件。

考慮到 Lighthouse 單次測量波動較大，為減少偶然誤差，對單個站點進行 10 次測試，最後計算單次測量結果的均值。

以下是測量的結果：

Vercel Cloudflare GitHub EdgeOne
CLS（ms） 0.47 0.75 0.33 0.55
LCP（s） 2.08 1.06 2.56 5.28
FCP（ms） 489.38 725.79 338.17 397.42
TBT（ms） 201.55 49.3 47.33 56.92
Speed Index（s） 2.84 2.55 3.16 1.86
Performance 55 62 56 51

不同型別網站 Google Lighthouse 指標測試差別較大，本次分享指標僅供參考。

總結

整體來看，以 Cloudflare 和 Vercel 為代表的巨頭平臺方案多樣，擴充功能強大，部署流程流暢。

GitHub Pages 目前已經解決了網上呼聲很高的無法自定義域名、訪問不穩定、SSL 支援的問題，相信之後的自動化程度應該也會提高。

EdgeOne Pages 帶來了不小的驚喜。使用者部署體驗與巨頭相比差距不大，各項指標測試表現良好，在國內的表現尤其突出。

本次分享涵蓋了免費計劃的內容，旨在幫助使用者在初期找到優質的部署資源。由於付費計劃複雜性，各平臺在收費策略、資源配置和技術支援等方面存在較大差異，因此不做進一步探討。

這是我整理的一份對照表，表內是各家免費計劃的資源使用情況。

Vercel Cloudflare GitHub EdgeOne
自定義域名 ✅️ ✅️ ✅️ ✅️
SSL 支援 ✅️ ✅️ ✅️ ✅️
無限制請求數 ✅️ ✅️ ✅️ ✅️
站內域名註冊 無 ✅️ 無 ✅️
構建次數 100/day 500/month 10/hour 無限制
併發構建 1 1 10 無限制
頻寬 100GB/month 無限制 100GB/month 無限制
部署網站個數 100 100 無限制 20

以上提到的“無限”指的是本次體驗中未觸發上限，且在官網上未找到限制說明。

相關文章