# 在 Cloudflare 上 VibeCoding 的最佳方式 [English](../en/05-the-best-way-to-vibecoding-on-cloudflare-en.md) · [繁中](../zh/05-the-best-way-to-vibecoding-on-cloudflare-zh.md) · [Español](../es/05-the-best-way-to-vibecoding-on-cloudflare-es.md) · [日本語](../jp/05-the-best-way-to-vibecoding-on-cloudflare-jp.md) · [Português (BR)](../pt-br/05-the-best-way-to-vibecoding-on-cloudflare-pt-br.md) **作者：** Danko Peng（[@dankopeng](https://x.com/dankopeng)） **日期：** 2026 年 3 月 7 日 **閱讀時間：** 約 7 分鐘 ----- 作為一個 50 歲的 solopreneur，我已經 vibe coding 超過一年。 上個月有一次，我從有想法到 app 正式上線，只花了 40 分鐘。不是 demo，是真實跑在全球 300 多個節點上的生產環境，有登入系統、資料庫、API，全部都在。 那次之後我才真正確認：選對平台，比寫 code 的速度更重要。 如果你也在 vibe coding，這篇文章想告訴你為什麼 **Cloudflare 全家桶**是目前最順手的選擇——Workers、D1、R2、Remix，加在一起，讓你少想部署，多想產品。 ----- ## 為什麼不是 Next.js，不是 Vercel？ 用過傳統雲端方案的人都知道那種感覺：想法很清楚，但每次都卡在環境設定、前後端 CORS 錯誤、資料庫連線，一個下午就這樣消失了。 我自己也走過這條路。直到切換到 Cloudflare 全棧，才發現原來部署可以這麼安靜——不需要管伺服器，不需要設定 CORS，不需要擔心流量費用暴增。Code 寫完，一個指令，全球上線。 ----- ## Remix：ChatGPT 和 Shopify 都在用的前端框架 說到前端框架，很多人第一反應是 Next.js。但這兩年，業界最聰明的工程團隊已經悄悄換掉它了。 **ChatGPT 在 2024 年把整個前端從 Next.js 換成了 Remix。** 原因很直接：Remix 的路由架構更簡單、資料載入效率更高、開發速度更快。對一個需要支撐數億用戶、每天迭代的產品來說，這個決定說明了很多事。 **Shopify 也是。** Shopify 把旗下擁有 1,017 條路由的龐大後台系統遷移到 Remix 之後，頁面載入速度提升了 30%。 對於每天有數百萬商家在使用的平台，30% 不是小數字。 Shopify 在 2022 年收購了 Remix，正是看中它對 web 標準的堅持和對性能的專注。 為什麼 Remix 特別適合 vibe coding？因為它的設計邏輯非常接近「人話」——你想讀資料，就寫一個 loader；你想提交表單，就寫一個 action；沒有 Next.js 那堆 App Router、Pages Router、Server Components 的概念需要先搞懂。AI 工具理解 Remix 的方式也更直觀，生成的 code 更少出錯。 ----- ## Cloudflare Workers：你的 app 同時跑在全球 300 個地方 傳統的伺服器概念是：你的 app 跑在某個城市的機器上，用戶的請求要跨越距離才能到達。 Cloudflare Workers 完全不同。你的 code 部署之後，自動複製到 Cloudflare 全球 300 多個節點，用戶的請求會被導到距離他最近的節點處理。 這意味著台北的用戶和紐約的用戶，都能在幾毫秒內得到回應，不需要你做任何額外設定。 而且 Workers 沒有傳統伺服器的「冷啟動」問題——就是那種第一次請求要等好幾秒才回應的狀況。Workers 是隨時待命的，反應時間幾乎感覺不到。 另一個我最喜歡的設計是 **Service Binding**：你的前端和後端可以直接在 Cloudflare 內部溝通，不走公開網路。這意味著零 CORS 設定，API 金鑰也不會暴露在外面。那次 40 分鐘完成登入流程，主要就是省在這裡——以前要花大半時間在前後端溝通的設定上。 ----- ## D1：放在邊緣的資料庫 資料庫一直是 vibe coding 的卡點之一。傳統做法是找一個外部資料庫服務，然後處理連線字串、延遲問題、費用計算…… Cloudflare D1 把這個問題簡化了。D1 是 SQLite 資料庫，但它跑在 Cloudflare 的邊緣網路上，就在 Workers 旁邊。讀寫資料的延遲非常低，通常只有幾毫秒，因為資料庫和你的程式跑在同一個地方。 對 vibe coding 來說，D1 的另一個優點是：你可以直接告訴 AI「幫我設計一個儲存用戶資料的 schema」，AI 生成的 SQL 直接能用，不需要額外的 ORM 設定或轉換層。 **免費額度**：5GB 儲存、每天 10 萬次讀取 + 5 萬次寫入，對大多數 app 的起步階段完全足夠。 ----- ## R2：放媒體檔案，不收出站費 如果你的 app 需要上傳圖片、存影片、處理用戶頭像，傳統的做法是用 AWS S3。功能很強，但出站流量費用是個坑——流量越大，帳單越嚇人。 Cloudflare R2 是 S3 相容的儲存服務，意思是你用 S3 的方式操作它，但**出站流量完全免費**。 我自己 vibe 一個 blog 系統時，圖片全部放在 R2，Remix 頁面直接從邊緣拉取，速度快到感覺像本地開發，但實際上是全球部署。 **免費額度**：10GB 儲存、每月 100 萬次操作。 ----- ## 全部加在一起，免費就能起步 這個 stack 最讓我驚訝的地方：**所有服務的免費額度加起來，足以跑一個真實的 app**，不需要從第一天就付伺服器費用。 |服務 |免費額度 | |--------|-----------------------| |Workers |每天 10 萬次請求 | |D1 資料庫 |5GB + 每天 10 萬次讀取、5 萬次寫入| |R2 儲存 |10GB + 每月 100 萬次操作 | |Remix 前端|直接跑在免費 Workers 上 | 我自己用這個組合建了 [vibefast.app](https://vibefast.app)——包含用戶註冊登入、儀表板、數據統計、訂單系統，整個網站都跑在 Cloudflare 上，沒有額外付一毛錢伺服器費。 ----- ## 想親眼看看這個 stack 能做什麼？ 去 [vibefast.app](https://vibefast.app) 免費註冊一個帳號，登入後你會看到： - 網站過去 **7 天的真實流量數據** - 你是 vibefast.app 的**第幾個註冊用戶** 這個儀表板本身就是用 vibefast.app 模板建的，你體驗到的 auth 流程、資料顯示、UI 設計，就是你買到的東西。 如果想直接拿到完整模板（包含 auth、blog、Stripe 收款、admin 後台、D1 migrations），**$99 終身買斷**，private repo + 所有未來更新都在裡面。 ----- **Danko Peng** [X](https://x.com/dankopeng) · [YouTube](https://www.youtube.com/@DankoPeng) · [Threads](https://www.threads.com/@dankopeng) ----- 👉 [回到教程首頁](../README-zh.md) 想直接上手完整的 Cloudflare 全棧模板？ 👉 **[vibefast.app](https://vibefast.app/pricing)** — 早鳥 $99，2026 年 8 月 1 日漲至 $199。