Firebase

Firebase App Hosting（推薦）

專案設定

1. 前往 Firebase控制檯並設定一個新專案。
2. 從側邊欄中選擇 構建 > 應用程式託管。
   • 在此步驟中，您可能需要升級您的賬單套餐。
3. 點選開始。
   • 選擇一個區域。
   • 匯入 GitHub 倉庫（您需要連結您的 GitHub 賬戶）。
   • 配置部署設定（專案根目錄和分支），並啟用自動釋出。
   • 為您的後端選擇一個唯一的 ID。
4. 點選“完成並部署”以建立您的第一次釋出。

當您使用 Firebase App Hosting 進行部署時，App Hosting 預設將在構建時自動執行。

Firebase Functions（已棄用）

要使用 Firebase 函式的最新和推薦版本，請將 firebase.gen 選項設定為 2

export default defineNuxtConfig({
  nitro: {
    firebase: {
      gen: 2
    }
  }
})

如果您已經部署了網站版本並希望升級到第二代，請參閱 Firebase 文件上的遷移過程。具體來說，CLI 將要求您在部署新函式之前刪除現有函式。

專案設定

您可能更傾向於使用 Firebase CLI 設定您的專案，它將為您獲取專案 ID，新增所需的依賴項（參見上文），甚至透過 GitHub Actions（僅限託管）設定自動化部署。瞭解如何安裝 Firebase CLI.

1. 安裝最新版本的 Firebase CLI。
   終端

   npm install -g firebase-tools@latest
   

2. 初始化您的 Firebase 專案
   終端

   firebase login
   firebase init hosting
   

完成後，將以下內容新增到您的 firebase.json 中，以在 Cloud Functions 中啟用伺服器渲染

{
  "functions": { "source": ".output/server" },
  "hosting": [
    {
      "site": "<your_project_id>",
      "public": ".output/public",
      "cleanUrls": true,
      "rewrites": [{ "source": "**", "function": "server" }]
    }
  ]
}

本地預覽

如果您需要在不部署的情況下測試功能，可以預覽站點的本地版本。

npm run build -- --preset=firebase
firebase emulators:start

構建和部署

透過執行 Nuxt 構建，然後執行 firebase deploy 命令來部署到 Firebase Hosting。

npm run build -- --preset=firebase
firebase deploy

選項

您可以在 nuxt.config.ts 檔案中設定 Firebase 函式的選項

export default defineNuxtConfig({
  nitro: {
    firebase: {
      gen: 2,
      httpsOptions: {
        region: 'europe-west1',
        maxInstances: 3,
      },
    },
  },
});

執行時 Node.js 版本

您可以在配置中設定自定義 Node.js 版本

export default defineNuxtConfig({
  nitro: {
    firebase: {
      nodeVersion: '18' // Can be '16' or '18' or '20'
    },
  },
});

Firebase 工具使用 package.json 中的 engines.node 版本來確定您的函式要使用的 Node 版本。Nuxt 會自動將配置的 Node.js 版本寫入 .output/server/package.json。

您可能還需要在 firebase.json 檔案中新增一個執行時鍵

{
  "functions": {
    "source": ".output/server",
    "runtime": "nodejs20"
  }
}

其他 Cloud Functions

當您部署 Nuxt 專案時，可能會收到警告，提示其他雲函式將被刪除。這是因為 Nitro 會將您的整個專案部署到 Firebase Functions。如果您只想部署 Nuxt 專案，可以使用 --only 標誌

firebase deploy --only functions:server,hosting

在生產環境中使用 Cookies

當 Firebase Hosting 與 Cloud Functions 或 Cloud Run 一起使用時，Cookie 通常會從傳入請求中剝離，以實現高效的 CDN 快取行為。只有名為 __session 的特殊 Cookie 才允許傳遞到您的應用程式。

使用環境變數

要為您的 Firebase 函式設定環境變數，您需要將 .env 檔案複製到 .output/server 目錄。您可以透過在 package.json 中新增一個 postbuild 指令碼來完成此操作，該指令碼將在構建命令之後自動執行

{
  "scripts": {
    "postbuild": "cp .env .output/server/.env"
  }
}