Nuxt.js 3.x Universal（SSR）專案部署到 Firebase

本篇文章同步發表於 2023 iThome 鐵人賽：Nuxt.js 3.x 筆記－打造 SSR 專案

專案開發完成後，終於到最後一步「部署」，本篇將說明 Universal 專案部署到 Firebase。Universal 渲染模式需要伺服器才能運作，因此會搭配 Firebase Cloud Functions（Serverless）來協助處理 SSR 的部分。

Universal Rendering 相關說明可以參考 這篇文章

實作分為以下步驟：

• 申請 Firebase Project
• 透過 CLI 部署至 Firebase

申請 Firebase Project

到 Firebase Console 新增專案

開啟新增的專案，點擊建構 → 加入 Hosting 與 Function（需升級為付費方案，為 Pay as you go 制度，可以限制預算上限）

到此步 Firebase 專案就建立完成，先記著專案 ID，後面部署會使用到

透過 CLI 部署至 Firebase

接著回到我們的 Nuxt App

STEP1：安裝 CLI

首先安裝 Firebase CLI（Command-Line Interface）指令列工具

npm install firebase-tools

STEP2：登入 Firebase

接著透過指令登入 Firebase

firebase login

登入成功後會看到如下畫面

STEP3：初始化 firebase 專案

firebase init hosting

接著選擇預部署的 Firebase 專案 ID，也就是前面新增的專案

託管設定依序選擇如下，接著會自動產生 firebase.json 跟 .firebaserc 兩支檔案

注意：必須要刪除上一步驟自動產生的 public/404.html 跟 public/index.html 兩個靜態檔，否則部署後畫面會受影響

STEP4：配置 nuxt.config

• preset：預設為 node.js server，調整為 firebase，當執行 npm run build 時，會產生符合 Firebase 託管所需的檔案內容
• firebase.gen：預設使用第一代 Cloud Functions，這裡調整為二代（一、二代比較）

// nuxt.config.js
export default defineNuxtConfig({
  nitro: {
    preset: 'firebase',
    firebase: {
      gen: 2
    }
  }
});

STEP5：配置 firebase.json 與 .firebaserc

firebaserc

如果前面步驟運作順利，預期 .firebaserc 會綁定 Firebase 專案 ID 如下，不需異動

// .firebaserc
{
  "projects": {
    "default": "<your_project_id>"
  }
}

firebase.json

需手動調整，這個步驟很重要，會影響專案編譯結果

functions（Cloud Functions）

• source：指定 Cloud Functions 程式碼路徑

hosting（Firebase Hosting）

• site：Firebase 專案 ID
• public：專案靜態目錄路徑
• rewrites：改寫 URL 規則，所有的 URL 請求都會由名為「server」的 Cloud Functions 處理，也就是由伺服器端處理所有請求（SSR）
• predeploy：部署前預先執行的指令。這一段的設定為：進到編譯後的 .output/server 資料夾，刪除 node_modules 並重新安裝，否則在執行部署時會發生找不到 firebase-functions 套件的錯誤

注意：rm -rf node_modules 是 macOS 跟 Linux 的指令，Windows 須調整為 rmdir /s /q node_modules

// firebase.json
{
  "functions": {
    "source": ".output/server",
    "runtime": "nodejs18"
  },
  "hosting": {
    "site": "<your_project_id>",
    "public": ".output/public",
    "cleanUrls": true,
    "rewrites": [ {
      "source": "**",
      "function": "server"
    }],
    "predeploy": [
      "cd .output/server && rm -rf node_modules && npm install"
    ]
  }
}

STEP6：編譯與部署

首先將專案打包

npm run build

打包後的檔案放在根目錄 .output 資料夾內

.output/
|—— public/
  |—— ...
|—— server/
  |—— ...
|—— nitro.json

接著部署到 Firebase

firebase deploy

看到以下訊息表示部署成功囉！

在 Firebase 專案可以看到 Cloud Function 名稱預設為「server」

如果發生 funciton 部署失敗問題，可以在 nuxt.config 設定 serverFunctionName 如下

// nuxt.config.js export default defineNuxtConfig({ nitro: { preset: 'firebase', firebase: { gen: 2, serverFunctionName: 'server' } } })

打開 Hosting URL，可以看到我們的網站，也可以透過 Firebase 儀表板來查看發布紀錄與用量

範例檔：

本篇程式碼放在 GitHub 提供參考：連結

參考資源：

https://nitro.unjs.io/deploy/providers/firebase
https://firebase.google.com/docs/hosting/quickstart
https://www.youtube.com/watch?v=AzO-KVMx7lo