小黃老師嘿技術

1. 這四個服務到底差在哪？

第一次看到這四個名字時，很容易以為它們都在做「架網站」，但其實比較像是一間餐廳裡不同部門的分工。

真正的 Web App 通常不是只靠一項服務完成，而是把前端、登入、後端、資料庫與部署流程組合起來。也正因如此，GitHub、Firebase、Workers 與 D1 並不是單純互相競爭的四個產品，而可以彼此合作。

2. GitHub：你的程式碼倉庫與時光機

GitHub最核心的角色是 Git Repository，也就是「程式碼倉庫」。不論你的專案是 HTML、CSS、JavaScript、React、Next.js、Python、Node.js 或 Cloudflare Worker，都可以放進 GitHub 管理。

它最迷人的地方不是「把檔案放上網」，而是每一次修改都能留下紀錄。今天把登入頁改壞、明天 AI 幫你重構程式結果整個網站掛掉，都可以透過 Git 的版本紀錄回頭找之前正常的狀態。

GitHub 可以做哪些事？

• 保存原始碼：集中管理網站、App、Worker 與資料庫 Migration。
• 版本管理：每次修改都有歷史紀錄，需要時可以比較或回復。
• 多人協作：設計師、工程師、朋友甚至 AI Coding Agent 都能共同處理專案。
• Issue 與 Pull Request：追蹤問題、審查修改。
• GitHub Actions：自動測試、Build 與部署。

GitHub Free 目前提供不限數量的公開與私人 Repository；私人 Repository 使用標準 GitHub-hosted runner 時，Free 方案包含每月 2,000 分鐘 GitHub Actions 額度，公開 Repository 使用標準 runner 則有不同的免費規則。實際限制與計費仍應以GitHub Pricing與GitHub Actions 官方計費說明為準。

GitHub Pages 又是什麼？

GitHub Pages 可以直接發布純靜態網站，很適合履歷、Portfolio、部落格與文件網站。不過只靠 GitHub Pages，並不適合直接處理需要保密金鑰、會員資料、付款或複雜後端邏輯的功能。當專案開始需要 API、登入或資料庫時，就會進入 Firebase 或 Cloudflare Workers 的領域。

3. Firebase：快速補齊登入、Hosting 與 App 功能

Firebase是 Google 提供的一整套 App 開發平台。很多新手會把 Firebase 當成「一種資料庫」，但它其實包含 Authentication、Hosting、Cloud Firestore、Realtime Database、Cloud Messaging、Analytics、Crashlytics、App Check 等許多服務。

對沒有後端團隊的個人開發者來說，Firebase 最大的優勢就是：很多原本需要自己打造的基礎功能，可以直接使用現成服務。

Firebase Authentication：先別自己造登入系統

登入看起來只是一個帳號與密碼欄位，但背後其實牽涉密碼雜湊、Email 驗證、忘記密碼、Token、Session、OAuth 與帳號安全。如果是第一次做 Web App，自己從零打造這一整套通常不是最有效率的選擇。

Firebase Authentication 可以支援 Email／Password 與 Google 等登入方式。官方 Web 教學可參考 Firebase Authentication for Web。

import { initializeApp } from "firebase/app";import { getAuth } from "firebase/auth";const app=initializeApp(firebaseConfig);const auth=getAuth(app);

Firebase Hosting：網站主機＋CDN

Firebase Hosting 適合部署 HTML、CSS、JavaScript、React、Vue、SPA 與 PWA 等前端網站，並提供 HTTPS 與自訂網域功能。基本部署流程通常會看到：

npm install -g firebase-tools
firebase login
firebase init hosting
firebase deploy --only hosting

完整步驟可以直接看 Firebase Hosting 官方 Quickstart。

Firestore：Firebase 自家的 NoSQL 資料庫

Cloud Firestore 採用的是 Collection、Document、Field 的思維，而不是傳統關聯式資料庫常見的資料表與 JOIN。像會員資料可能會是「users 集合 → 某一位 user 文件 → name、email、plan 等欄位」。如果你喜歡文件型資料結構，Firestore 很方便；如果資料之間有大量明確關聯，則可能會更喜歡後面介紹的 D1。

4. Cloudflare Workers：不用養伺服器的後端 API

Cloudflare Workers是一種 Serverless 運算服務。傳統做法可能是先租一台 VPS，再處理 Linux、Nginx、Node.js、SSL、安全更新、擴充與監控；Workers 則是把「管理伺服器」這件事情抽掉，讓你把心力集中在程式本身。

最常見的用途就是 API。例如瀏覽器呼叫：

GET /api/users

Worker 收到要求後，可以驗證身分、查詢資料庫、呼叫 AI API，最後把結果回傳前端。

export default{async fetch(request,env){return Response.json({message:"Hello World"});}}

為什麼 OpenAI API Key 不能直接放在前端？

這是新手非常容易踩到的坑。只要 JavaScript 程式碼送到使用者的瀏覽器，裡面的秘密金鑰就不能算真正的秘密。就算你把變數名稱寫得很隱密，使用者仍可能透過瀏覽器開發者工具或網路請求取得。

同樣概念也適用於 Stripe Secret Key、Email API Key、管理員憑證與其他敏感資訊。

Cloudflare 官方目前的 Workers Free 限制包含每天 100,000 次 Request，Free 方案 CPU 時間限制則為每次 Request 10ms；詳細限制仍可能調整，建議查看Workers Limits與Workers Pricing。

5. Cloudflare D1：簡單好懂的 Serverless SQL 資料庫

Cloudflare D1是 Cloudflare 的 Managed Serverless SQL Database，採用 SQLite 的 SQL 語意。也就是說，如果你曾看過 SELECT、INSERT、UPDATE、DELETE，會很快理解 D1 的使用方式。

CREATE TABLE users (id INTEGER PRIMARY KEY AUTOINCREMENT,email TEXT NOT NULL,name TEXT,created_at TEXT DEFAULT CURRENT_TIMESTAMP);

之後可以查詢：

SELECT * FROM users WHERE id=123;

最典型的架構就是：

D1 適合保存什麼？

Cloudflare D1 Free 目前包含每天 500 萬 rows read、每天 10 萬 rows written，以及帳號層級總計 5GB Storage。這些數字可至D1 Pricing 官方頁面查看最新版本。

6. 四個加在一起到底能做什麼？

假設今天我們想做一個「AI 求職管理系統」，讓使用者可以登入、保存履歷、收藏職缺、追蹤面試進度，甚至請 AI 分析 JD 與履歷適配度。

完整資料流可以想成：

這已經不是「單純一個網頁」，而是一個完整的 Full-Stack Web Application。

7. Firebase 與 D1 會不會功能重複？

會有一部分重疊，而且這件事情反而很重要。Firebase 自己已經有 Cloud Firestore 與 Realtime Database，所以並不是用了 Firebase 就一定還要再用 D1。

對想學 SQL、又不想自己從零造 Authentication 的新手來說，我會特別喜歡第三種思路：Firebase 專心處理「你是誰」，D1 專心保存「你的資料」，Worker 負責處理「你可以做什麼」。

8. 免費額度與能不能長期使用

這裡要先釐清一個很常見的誤會：「有免費方案」不等於「不管用多少都永遠免費」。正確理解應該是服務目前提供 Free Tier，在額度與功能限制內可以不用付費；當專案成長、流量增加，才可能需要升級。

Firebase 的免費內容不像「整包完全無上限」。不同產品各自有規則，例如 Authentication、Hosting、Firestore、Realtime Database 都有自己的限制。Firebase Spark 目前不需提供付款方式即可開始，詳細資訊可查Firebase Pricing。

因此如果只是作品集、個人工具、Demo、小型 SaaS MVP、幾十到幾百位使用者的測試產品，這套架構確實很有機會長期維持低成本甚至零平台費用；但真正商用前，還是要重新確認當下官方價格與實際流量。

9. 從零開始申請 GitHub

第一步可以先到 GitHub Signup 建立帳號。完成 Email 驗證後，進入 GitHub，選擇建立新的 Repository。

例如 Repository 名稱可以叫：

my-first-app

本機專案初始化 Git：

git init
git add .
git commit -m "Initial commit"

接著把 Repository 設成遠端來源並 Push：

git remote add origin YOUR_GITHUB_REPOSITORY
git branch -M main
git push -u origin main

從這一刻開始，每一次修改就都能留下版本紀錄。日後 Cloudflare 也可以連接 GitHub Repository，讓 Push 後自動重新 Build 與部署。

10. 從零開始申請 Firebase

進入 Firebase Console，用 Google 帳號登入後選擇建立 Project。

網站專案通常會取得類似：

const firebaseConfig={apiKey:"...",authDomain:"...",projectId:"...",storageBucket:"...",messagingSenderId:"...",appId:"..."};

接著安裝 Firebase SDK：

npm install firebase

開啟登入功能

進入 Firebase Console → Authentication → Get Started → Sign-in method，依需求開啟 Email／Password 或 Google。

如果現在你的專案完全還不需要會員登入，其實可以先不急著建立 Firebase。這點對新手很重要：不要因為看過某項服務，就覺得四個平台全部一定要開。需求到了再加，系統會乾淨很多。

11. 建立 Cloudflare Worker 與 D1

先到 Cloudflare 註冊帳號。進 Dashboard 後，你可能會看到 DNS、CDN、Zero Trust、R2、Workers、D1 等大量功能，新手不用全部研究，先抓住 Workers 與 D1 就好。

建立第一個 Worker

可以從 Cloudflare Dashboard 的 Workers & Pages 建立，也可以從終端機開始。Cloudflare 官方目前仍提供 create-cloudflare 工具與 Wrangler 工作流程，建議依Workers Getting Started的最新方式操作。

npm create cloudflare@latest -- my-first-worker

完成後可部署：

npx wrangler deploy

建立第一個 D1

官方 D1 教學可從 D1 Getting Started 開始。建立資料庫後，可以準備 schema.sql：

CREATE TABLE tasks (id INTEGER PRIMARY KEY AUTOINCREMENT,user_id TEXT NOT NULL,title TEXT NOT NULL,done INTEGER DEFAULT 0,created_at TEXT DEFAULT CURRENT_TIMESTAMP);

接著把 D1 綁定到 Worker，Worker 就能透過 Binding 查詢資料。這種 Binding 的好處是你不需要自己把公開的資料庫帳號密碼塞進程式碼。

一個專案資料夾可能長這樣

my-app/
├── frontend/
│   ├── src/
│   └── package.json
├── worker/
│   ├── src/index.ts
│   ├── wrangler.jsonc
│   └── package.json
├── database/
│   ├── schema.sql
│   └── migrations/
├── README.md
└── .gitignore

12. 新手最推薦的學習與建置順序

如果一開始同時學四套平台，很容易學到最後只剩下帳號很多、腦袋很亂。比較舒服的方式是分階段。

到了 Level 5，你其實已經具備建立現代 AI Web App 的核心架構觀念。

13. 哪些專案可以用這套架構？

如果未來還要存 PDF、圖片、附件或其他大型檔案，可以進一步研究 Cloudflare R2；若需要快取或簡單 Key-Value 資料，也可以研究 Cloudflare KV。

14. 最後總整理：不要為了用工具而用工具

如果整篇文章只記得四句話，其實就夠了：

如果只是個人靜態網站，也許 GitHub 加一個 Hosting 平台就夠；如果開始需要 API，再加 Worker；需要資料庫，再加入 D1；真的需要會員登入時，再加入 Firebase Authentication。

最健康的架構思維永遠不是「我已經申請四個服務，所以四個都要塞進專案」，而是「我的產品現在需要什麼功能，就使用能解決這個問題的工具。」

而對正在接觸 AI Coding、想做個人工具或第一次嘗試 SaaS 的人來說，GitHub＋Firebase Authentication＋Cloudflare Workers＋D1 的確是一套相當好理解、前期成本低，又不必自己維護 Linux Server 的現代化組合。