用 Firebase 建立 Serverless 網頁應用：從零到部署-部署篇

Image Source: Google

前言 Firebase Hosting 是 Firebase 提供的一項快速、安全且易於使用的網站託管服務。除了常見的靜態網站部署，我將簡單介紹如何利用 Firebase Hosting 部署網站及 JSON 檔，並說明如何快速存取資料，讓您的應用開發更加高效。

json-server

json-server 是一個輕量級的 REST API 伺服器，允許開發者使用 JSON 檔案作為模擬資料庫，快速建立測試 API，而無需額外撰寫後端程式碼。它支援 GET、POST、PUT、PATCH 和 DELETE 等 HTTP 方法，並具備搜尋、分頁與排序功能，非常適合用來開發前端專案時進行 API 模擬或測試。

npm install -g json-server

在你的專案目錄下，建立一個 db.json 檔案，這個檔案將作為你的模擬資料庫。例如：

{
  "users": [
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" }
  ],
  "posts": [
    { "id": 1, "title": "Hello World", "content": "This is a test post." }
  ]
}

啟動 json-server

json-server --watch db.json --port 3000

結果會依照你的物件結構生成路由，這樣你就成功建立了一個簡單的 JSON 存儲系統，並且可以透過 REST API 新增、讀取、修改和刪除資料！

客製化 json-server (選擇性)

如果你需要更進階的功能，如自訂路由、加入中介軟體或驗證，則可以使用 json-server 的 routes.json 或 server.js 來進行自訂。

例如，建立 routes.json 來修改 API 路徑：

{
  "/api/users": "/users",
  "/api/posts": "/posts"
}

然後啟動伺服器：

json-server --watch db.json --routes routes.json --port 3000

這樣你可以透過 http://localhost:3000/api/users 來存取 /users。

在環境上安裝 Firebase

• 安裝 Firebase-tools：您需要先安裝 Node.js，然後使用以下指令安裝 Firebase-tools：

npm install -g firebase-tools

• 安裝 Firebase-CLI（僅適用於 MacOS）：您需要先安裝 Brew，然後使用以下指令安裝 Firebase-CLI：

brew install firebase-cli

這是 MacOS 的推薦方法。

安裝完工具後登入 Firebase

firebase login

登入完成後在專案根目下命令將 Firebase Hosting 初始化到您的專案中。

firebase init hosting

使用向上和向下箭頭鍵在選項之間導航，使用空白鍵選擇選項。

選擇託管選項並按 Enter 鍵後，您需要select an option為 Firebase 專案進行操作。

通常在您以建立的專案需上並按 Enter 鍵

根據需求選擇

初始化完會多出 firebase.json 及 .firebaserc 檔案

如圖可在開發環境使用 json-server 然後再佈署到 Firebase 供其他程式使用

如設置佈署選項選擇「不使用 SPA 設置」可保持文件路徑不變，設置 public 資料夾作為靜態文件的存放目錄，如果你想讓不同網域的 Web 應用程式跨域存取可以編輯 firebase.json

# firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      {
        "source": "/db.json",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          },
          {
            "key": "Access-Control-Allow-Methods",
            "value": "GET, OPTIONS"
          },
          {
            "key": "Access-Control-Allow-Headers",
            "value": "Content-Type"
          }
        ]
      }
    ]
  }
}

可以照專案需求更新 Access-Control-Allow-Origin 標頭。

每次需要更新檔案時，只需執行以下指令：

firebase deploy

部署完成後，你會得到類似以下的 URL：

https://json-storage.web.app/db.json

CI/CD 流程設定

整合測試與建置 如有需要可在 CI/CD pipeline 中，首先執行單元測試與整合測試，接著進行專案的建置（例如使用 npm run build 或 yarn build）。

設定環境變數與認證 將 Firebase 的 token 或其他必要的憑證設置為 CI/CD 系統中的機密環境變數，這樣部署時就能夠自動通過 firebase deploy 命令完成佈署。

自動化佈署 當所有測試和建置步驟都成功後，自動呼叫 firebase deploy 指令，將最新的靜態檔部署到 Firebase Hosting。你可以根據不同分支或標籤設置不同的部署環境（例如 staging 與 production）。

流程

1. 先建立 .github/workflows 資料夾備用接著可以選擇手動或自動建立 firebase-hosting-merge.yml（用於正式環境部署）和 firebase-hosting-pull-request.yml（用於 PR 預覽環境）兩個檔案。
2. 自動建立檔案流程：

執行指令

firebase init hosting:github

如果你需要 npm ci & npm run build，Set up the workflow to run a build script before every deploy?這個要選用並到生成的 yml 檔修改依照自己專案的客製化步驟。

可到 github > Settings > Actions/General 修改部屬相關設定

接者就提交看看吧~可以到 Actions 頁面查看佈署狀況

假如你的專案包含 Node API、SSR 框架或其他伺服器端邏輯，你可以考慮 Firebase Functions 或其他雲端服務。

結語

雖然相比於自己租用伺服器或開設虛擬機（VM），Firebase Hosting 的功能與靈活性有限，無法滿足複雜的大型應用需求，但它的優勢在於簡單、快速且對前端開發者友好。對於想要迅速分享個人網站、專案展示，甚至是輕量級的 JSON 資源，Firebase Hosting 是一個非常實用的工具。

無需繁瑣的伺服器設置，也不需要深厚的後端知識，只需幾行命令即可將您的網站或資料部署到網路上，方便他人存取。這樣的便捷性特別適合初學者、個人開發者，或是需要快速部署的場景。希望透過這篇文章，您能對 Firebase Hosting 有所瞭解，並將其作為您下次前端開發分享的工具。