iT邦幫忙

2025 iThome 鐵人賽

DAY 12
0
Cloud Native

江湖在走,Cloudflare 要懂,懂得天天吃板橋湳雅夜市系列 第 12

第12天,Cloudflare Pages 與 Workers / 馬力碳烤雞排 | 30天板橋湳雅夜市

  • 分享至 

  • xImage
  •  

在現代 Web 開發裡,越來越多人尋求「快速部署、低成本、全球可用」的解決方案。Cloudflare 除了大家熟知的 CDN 與 WAF 之外,其實已經演進成一個完整的平台,讓開發者可以直接在邊緣節點 (Edge) 建構應用程式。今天要跟大家分享的重點就是:Cloudflare PagesCloudflare Workers,以及搭配的其他服務 (如 KV、R2、D1、Queues),如何組合出一個現代化的應用架構。

Cloudflare Pages:前端的最佳舞台

Cloudflare Pages 最初是針對 靜態網站而設計的服務,類似於 GitHub Pages 或 Netlify,但它的優勢在於:

  • 整合 Cloudflare 網路:自帶 CDN、SSL、快取,部署完馬上享受全球節點加速。
  • Git 連動:支援 GitHub、GitLab,只要 Push 就能自動建置並發布。
  • 支援靜態生成與前端框架:像是 Next.js、Astro、SvelteKit 都能直接部署。

常見用法:部署個人部落格、文件網站、Landing Page,甚至是行銷活動網站。
進階用法:搭配 Workers,就能在 Pages 後端加上 API,瞬間升級成全端平台。

Cloudflare Workers:無伺服器的程式運行環境

Workers 是 Cloudflare 的 Serverless Runtime,讓你在邊緣節點直接跑 JavaScript/TypeScript(類似 Node.js,但更精簡,基於 V8 Isolate)。特色如下:

  • 無需伺服器:不用管 VM 或 Docker,直接寫程式碼上傳就能跑。
  • 延遲超低:因為程式在 Cloudflare 200+ 全球節點執行,離使用者很近。
  • 擴展能力:可以搭配 KV、R2、D1 等服務,完成全端應用。

常見用法:API Gateway、Auth 驗證、圖片壓縮、A/B 測試、代理服務 (CORS Proxy)。

Cloudflare KV:簡單快速的 Key-Value 儲存

Workers 本身是 無狀態的,要存資料就需要額外的服務。Cloudflare 提供的第一個解法就是 KV (Key-Value Store)

  • 適合存放:設定檔、使用者 Session、Cache、JSON 資料。
  • 特點:讀取快、寫入有最終一致性(非即時同步,但全球分散)。
  • 範例:將使用者的偏好設定存在 KV,Worker 讀取後就能快速回應。

Cloudflare R2:免流量費的物件儲存

如果你需要存放 檔案(圖片、影片、備份),R2 就是替代 AWS S3 的選擇:

  • 沒有出口流量費 (Egress Fee):這對於要大量下載的應用來說非常省錢。
  • S3 相容 API:原本用 S3 的應用可以無痛搬遷。
  • 結合 Workers:可以寫影像壓縮 API,把檔案存在 R2,再透過 Worker 直接分發。

Cloudflare D1:輕量級 SQL 資料庫

在 2022 年推出的 D1 是 Cloudflare 的 SQLite-based Database

  • 適合存小型應用、部落格後端、會員系統。
  • 支援標準 SQL,搭配 Prisma 等 ORM 也能開發。
  • 可以與 Pages + Workers 整合,快速做出全端應用。

Cloudflare Queues:處理非同步任務

有些任務(寄信、通知、排程運算)不適合即時處理。這時可以用 Queues

  • Workers 可以把任務丟進 Queue,另一個 Worker 再慢慢處理。
  • 適合:寄送 Email、批次資料處理、Webhook 事件消化。

實戰組合範例

舉一個例子,假設你要做一個簡單的「線上問卷系統」:

  1. 前端頁面:用 Pages 部署 React/Vue。
  2. API 處理:Worker 負責接收問卷 POST。
  3. 資料儲存:寫入 D1 (SQLite) 或 KV。
  4. 檔案附件:上傳到 R2。
  5. 批次通知:將「寄送感謝信」的任務丟到 Queue,後續再處理。

這樣一來,你完全不需要維護 VM、Kubernetes,甚至不用信用卡刷爆雲端費用,就能擁有完整的全端架構。

總結

Cloudflare 不再只是 CDN,它逐漸成為一個 完整的 Edge Cloud 平台。從 Pages (前端)Workers (後端)KV / R2 / D1 / Queues (資料與任務處理),組合起來就是一個「全端開發者工具箱」。對於想要快速開發、低成本上線的專案來說,Cloudflare 是一個非常值得嘗試的解決方案 🚀。

馬力碳烤雞排

  • 店名:馬力碳烤雞排
  • 地址:新北市板橋區南雅南路一段與號 南雅東路交叉口
  • 營業時間:晚上
  • Google Maps
  • 本系列地圖

https://ithelp.ithome.com.tw/upload/images/20250926/20163416UvSsezNFbs.jpg

這家是夜市門口常常很多人買的雞排,雞排是先炸過再烤,香甜四溢,醬汁非常美味,是我常買的雞排

https://ithelp.ithome.com.tw/upload/images/20250926/201634166kf8hai10E.jpg


上一篇
第11天,Cloudflare Rules 跳轉規則 / 哈贊二姐生炒羊肉 | 30天湳雅夜市
下一篇
第13天,Cloudflare Pages 與 Functions / 好椰熱帶特調 泰奶天花板 | 30天板橋湳雅夜市
系列文
江湖在走,Cloudflare 要懂,懂得天天吃板橋湳雅夜市14
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言