[架站] Firebase 入門教學：從零開始打造免費 Firestore 網頁應用

如果你是剛踏入 Web 開發的初學者，卻希望快速做出「有後端、有資料庫」的網站，那麼 Firebase 是最值得開始的工具之一。本篇文章會用最白話的方式，帶你理解 Firebase 是什麼，並一步一步建立一個完全免費的 Firestore 網頁應用。

什麼是 Firebase？

Firebase 是 Google 推出的雲端開發平台，提供完整的後端服務（Backend as a Service, BaaS）。

它最大的優勢是：

  • 不需要自己架設伺服器
  • 不需要管理資料庫
  • 前端就可以直接操作資料
  • 提供免費方案（Spark Plan）

Firebase 可以幫你完成：

  • 即時資料庫（Firestore）
  • 使用者登入系統
  • 網站託管 Hosting
  • 推播通知
  • 分析與監控

簡單說：Firebase = 幫你把後端全部準備好

什麼是 Firestore？

Firestore 是 Firebase 提供的雲端 NoSQL 資料庫。

特色：

  • JSON 結構儲存資料
  • 即時同步
  • 可直接從前端存取
  • 免費額度很夠初學者使用

Firestore 資料結構：

Collection（集合）
 └─ Document（文件）
      └─ Fields（欄位）

免費方案可以用到什麼？

Firebase 免費 Spark Plan 提供：

  • Firestore 50,000 次讀取/天
  • 20,000 次寫入/天
  • Hosting 靜態網站
  • 基本登入功能

做學習專案完全足夠。

開始實作：建立 Firestore 網頁應用

Step 1：建立 Firebase 專案

  1. 前往 Firebase Console
  2. 點擊「建立專案」
  3. 輸入專案名稱，例如：firestore-demo
  4. 關閉 Google Analytics（可省略）
  5. 建立完成

Step 2：建立 Web App

  1. 進入專案首頁
  2. 點擊「</> Web」圖示
  3. 輸入 App 名稱
  4. 不要勾選 Hosting（之後再做）
  5. 取得 Firebase SDK 設定

你會看到類似這段設定：


const firebaseConfig = {
  apiKey: "XXXX",
  authDomain: "XXXX",
  projectId: "XXXX",
};

請把這段存起來，等下會用到。

Step 3：啟用 Firestore 資料庫

  1. 左側選單 → Firestore Database
  2. 點擊「建立資料庫」
  3. 選擇「測試模式」
  4. 選擇地區 → 亞洲

完成後你的資料庫就啟用了 🎉

Step 4：建立第一個 Web 頁面

建立一個 index.html：


<!DOCTYPE html>
<html>
<head>
  <title>Firestore Demo</title>
</head>
<body>

  <h1>我的第一個 Firestore App</h1>

  <input id="msg" placeholder="輸入訊息">
  <button onclick="addData()">儲存</button>

  <ul id="list"></ul>

  <script type="module">
    import { initializeApp } from 
      "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";

    import { 
      getFirestore, collection, addDoc, getDocs 
    } from 
      "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";

    const firebaseConfig = {
      apiKey: "你的key",
      authDomain: "你的domain",
      projectId: "你的projectId"
    };

    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);

    window.addData = async function() {
      const msg = document.getElementById("msg").value;
      await addDoc(collection(db, "messages"), { text: msg });
      loadData();
    }

    async function loadData() {
      const querySnapshot = await getDocs(collection(db, "messages"));
      const list = document.getElementById("list");
      list.innerHTML = "";
      querySnapshot.forEach(doc => {
        list.innerHTML += "<li>" + doc.data().text + "</li>";
      });
    }

    loadData();
  </script>

</body>
</html>

Step 5：打開網頁測試

直接用瀏覽器開啟 index.html。

你現在可以：

  • 輸入文字
  • 按儲存
  • 資料會永久存在雲端
  • 重新整理仍會顯示

🎉 恭喜！你已經完成第一個雲端資料庫網站。

Step 6（進階）：免費部署網站 Hosting

安裝 Firebase CLI：


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

完成後你會得到一個免費網址：

https://你的專案.web.app

總結

今天你學會了：

  • Firebase 是什麼
  • Firestore 雲端資料庫
  • 建立免費專案
  • 前端直接存取資料庫
  • 部署免費網站

對初學者來說，Firebase 是最快能做出「真正可用網站」的工具之一。

下一步建議學習：

  • Firebase Authentication（登入系統）
  • Firebase Storage（檔案上傳）
  • React + Firebase

祝你開發順利 🚀