Cloudflare Pages、Workers 和 KV:實現伺服器端渲染的強大組合

Cloudflare Pages、Workers 和 KV:實現伺服器端渲染的強大組合
作者: Calpa Liu
字數:3526
出版日期:November 23, 2023
更新日期:December 7, 2023
#Cloudflare#Astro

當今的數位世界中,網站用戶要求即時、動態和高度互動的體驗。透過結合 Cloudflare Pages、Workers 和 KV 實現伺服器端渲染,提供動態且實時的內容,從而提升網站的性能和可用性。本文將探討如何將他們互相配合,實現即時伺服器端渲染,提供更出色的用戶體驗。

技術博客五年來遇到的問題

在經營技術博客的過去五年,儘管靜態網站生成方法在某些方面具有優勢,但它們也帶來了一些困難和挑戰。

已經沒有時間了

隨著我寫得越來越多技術文章,靜態技術博客的生成過程變得越來越耗時。每當我想要更新或新增一篇文章時,都需要等待生成過程完成,這不僅浪費了寶貴的時間,還限制了我及時發布新內容的能力。

在靜態網站生成方法下,如果我需要對一篇文章進行修改,就必須重新生成整個網站。這種不便使得修改內容變得相對複雜,並且容易引入錯誤。我渴望一種更加靈活的方式,能夠輕鬆地修改單個文章而無需影響整個網站的運作。

隨著博客的訪問量增加,我開始關注性能優化,想要確保博客的快速加載時間,以提供卓越的用戶體驗。

這些問題和挑戰在博客運行的過程中浮現,它們激發我尋找更好解決方案的動力。正當面對博客運行五年中所遇到的種種問題時,我偶然遇見了兩個強大的工具——Astro 和 Cloudflare,這兩者的結合提供了一個嶄新的解決方案,有望解決之前所面臨的困難。

Astro,一個現代化的靜態網站生成器,它不僅提供了快速的網站生成能力,還支持部分更新,這意味著我們可以更有效率地處理文章的修改,而不需要重新生成整個網站。這為我們帶來了極大的便利,讓我們能夠更輕鬆地管理和維護我們的內容。

在不久前的八月,我寫了一篇名為 《重構博客網站:Astro 與 Vue 重構心得分享》,詳細分享了我如何運用 Astro 和 Vue 來重構我的網站,以及在這個過程中的心得體會。

在接下來的章節中,我們將討論我們研究和實施的解決方案,以應對這些問題並改進博客的運作。這裏會重點展開來說 Cloudflare。

Cloudflare

Cloudflare

Cloudflare 以其卓越的安全性功能而聞名。作為一家以保護網站免受威脅和攻擊而著稱的公司,Cloudflare 提供了多種安全性工具,從 DDoS 攻擊保護到免費的 SSL/TLS 加密。這確保了我的網站數據和用戶的隱私得到了充分的保護,使我能夠提供一個安全的線上環境。

Cloudflare 提供了許多非常好用的開發工具,Cloudflare CDN 提供全球 CDN 的自動配置,這使我們的網站能夠在全球範圍內快速加載,為我們的讀者提供更佳的用戶體驗。而 Cloudflare Worker 則賦予了我們無伺服器計算的能力,這使我們能夠以更智慧的方式處理實時數據和動態內容,從而提高了網站的性能和反應速度。此外,Cloudflare KV(Key-Value) 提供了高性能的分佈式數據存儲,這為我們存儲和檢索數據提供了極低的延遲時間,使我們能夠實現更即時的數據更新。

https://www.cloudflare.com/

在接下來的章節中,我們將深入瞭解如何利用 Astro 和 Cloudflare 這一強大組合,解決我們之前遇到的問題,同時提高我們博客的性能、可用性和管理效率。讓我們一同探索這些工具如何為我們的博客帶來新的可能性和優勢。

Cloudflare Pages:快速建立全球 CDN 的網站

Cloudflare Pages

Cloudflare Pages 是一個無伺服器靜態網站託管服務,可讓您快速輕鬆地部署和託管您的靜態網站。它同時支援 HTML、CSS 及 JavaScript,讓您可以建立現代化且響應迅速的網站。Cloudflare Pages 利用 Cloudflare 的全球 CDN 將您的網站內容提供給全球各地的訪客,確保您的網站隨時隨地都能快速訪問。此外,Cloudflare Pages 具有內建的安全性功能,如 DDoS 保護、WAF 及 SSL/TLS 加密,可確保您的網站免受安全威脅。

每當您將新的代碼推送到 Git 存儲庫時,Cloudflare Pages 將自動進行構建和部署您的網站。在免費方案中,您每個月最多可以進行 500 次構建。每次構建的時間限制為 20 分鐘。

每個 Cloudflare Pages 項目都有特定數量的自定義域名限制。免費方案:最多可以擁有 100 個自定義域名。

https://pages.cloudflare.com/

Cloudflare Workers:處理實時數據的無伺服器計算

Cloudflare Workers

Cloudflare Workers 是一個無伺服器雲端運算平台,允許開發人員在 Cloudflare 的全球邊緣網路中執行程式碼。它可以用於構建各種各樣的應用程式,例如內容快取、負載平衡、Web 安全和 API 閘道。Cloudflare Workers 不需要伺服器或基礎架構,而是在 Cloudflare 的邊緣伺服器上執行,這使其非常快速和響應迅速。它還具有高彈性,能夠處理大量流量。Cloudflare Workers 是一種強大的工具,可讓開發人員構建快速、安全的應用程式,而無需擔心基礎設施的管理。

用戶可以免費使用 Workers 的基本功能,方案包括對 Workers、Pages Functions 和 Workers KV 的有限使用。付費的 Workers 方案提供更多的使用權限和額度,特別是針對 HTTP 請求的處理時間和數量。值得注意的是,通常一個 HTTP 請求的處理時間會超過 100 毫秒,這意味著我們不能在免費版本下處理 HTTP 請求可能會受到限制。當我的博客網站需要處理大量的 HTTP 請求時,為了確保高效率和穩定性,我就升級到付費方案了。

https://workers.cloudflare.com/

Cloudflare KV:動態數據存儲

Cloudflare KV

CloudFlare KV 是一種全球分佈的無伺服器鍵值儲存資料庫服務,易於使用,並與現有的 Web 服務無縫集成。它提供了快速的一致性讀取和原子寫入,非常適合儲存快取數據、應用程式狀態、元數據或任何需要快速訪問的資料。CloudFlare KV 具有高度的可擴展性,可以輕鬆地處理來自世界各地的大量請求。它還提供了一個用戶友好的儀表板,用於監控和管理資料庫。

https://developers.cloudflare.com/kv/

實戰部分

這種方法尤其適用於需要經常更新的內容,例如文章元數據。通過使用 Cloudflare KV 和 Cloudflare Workers,您可以實現高性能的實時數據獲取,同時保持內容的最新狀態,提供更優的用戶體驗。

儲存數據到 KV

現在,讓我們來看看如何使用這些工具實現實時數據獲取。博客網站需要根據用戶的請求動態地獲取文章的元數據,例如標題、描述和圖像。

首先,我將每篇文章的 metadata 儲存為 JSON 對象,並使用文章的 slug(或其他唯一識別符)作為鍵(key)。這樣,我能夠輕鬆地通過 slug 查找和檢索文章的 metadata。

以下是一個示例:

// 假設這是一篇文章的 metadata
const articleMetadata = {
  title: "文章標題",
  description: "文章描述",
};

// 使用文章的 slug 作為 KV 的鍵
const slug = "unique_article_slug";

// 儲存文章 metadata 到 KV
await process.env.CALPA_BLOG.put(`article_${slug}`, JSON.stringify(articleMetadata));

從 KV 中讀取數據

當需要讀取文章 metadata 時,我可以根據文章的 slug 從 KV 中獲取對應的 JSON 字符串,然後使用它來渲染我的網頁。

// 使用 Astro 的本地環境(locals)中的 runtime 對象,它包含了您網站的運行時信息。
const runtime = Astro.locals.runtime;

// 這行代碼首先嘗試從 Cloudflare KV 中根據文章的 slug 獲取相應的數據。
// CALPA_BLOG 是您的 KV 命名空間,`article_${slug}`是特定文章的鍵。
// 如果找不到對應的數據,則返回空對象 `{}`。
const articleMetadata = (await runtime?.env?.CALPA_BLOG?.get(`article_${slug}`)) || `{}`;

let title = '';
let description = '';
if (articleMetadata !== '{}') {
  // 將從 KV 中獲取的 JSON 字符串轉換為 JavaScript 對象,然後通過 generatePostMetadata 函數處理數據。
  const object = generatePostMetadata(JSON.parse(articleMetadata));

  // 現在我可以使用 articleMetadata 來渲染我的網頁
  title = articleMetadata.title;
  description = articleMetadata.description;
  // 渲染網頁的其他部分。..
} else {
  // 如果找不到相應的 metadata,我處理適當的錯誤或輸出默認值
}

透過 Astro,我們可以使用 Cloudflare Worker 來處理用戶的請求。當用戶訪問特定的文章鏈接時,Worker 可以根據請求中的 slug,從 KV 中獲取相應的元數據。這使您能夠動態地為每個用戶提供最新的文章信息,而不需要預先生成這些數據。

後記

白川筋

回顧過去五年,我深刻體會到前端技術的快速發展和變革。在這段時間裡,我不斷嘗試和適應新的技術工具,追求更高效、更優雅的解決方案,並不斷學習和成長。然而,有一件事情始終不變,那就是我對於追求技術的熱情。

這五年裡,我的常用技術工具經歷了多次轉變。我從最初的靜態網站生成器,走過了動態網頁應用、伺服器端渲染,再到現在的 Astro 和 Cloudflare 的結合。每個工具和框架都帶來了新的挑戰和機會,讓我能夠不斷優化我的網站,提供更好的用戶體驗。

無論我使用什麼樣的技術工具,我的熱情始終如一。技術的變化是不可避免的,但這種變化也激勵著我不斷學習,保持開放的心態,並探索新的可能性。我相信,技術是改變世界的力量,而我所做的每一次嘗試和創新都是邁向更好未來的一步。

無論未來的技術走向如何,我將繼續熱衷於追求技術,解決現實世界的問題,繼續與技術社區分享我的經驗和知識。只要保持熱情和不斷學習,我們就能夠應對任何技術挑戰,創造未來。感謝您一直陪伴我走過這段旅程,期待著未來的冒險和探索。

感謝您閱讀我的文章。歡迎隨時分享你的想法。
關於 Calpa

Calpa 擅長使用 TypeScript、React.js 和 Vue.js 開發Responsive Web Design網站。

此外,Calpa 積極參與香港和台灣的開源社區,曾在2019年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過300顆星星和60個分支的支持。

更多前端開發技術文章:傳送門