今日目標說明

開發完成後，最開心的莫過於把作品放到雲端上讓朋友使用了！今天我們要把 Node.js + Express 寫的後端 API 部署到 Vercel。Vercel 原本是為前端打造的平台，但它對於無伺服器函數 (Serverless Functions) 的支援也非常棒，非常適合我們這個不需要將圖片存進本地硬碟的後端架構！

【技術原理解析】Serverless 的雙面刃：「冷啟動 (Cold Start)」

把後端放上 Vercel，您就正式擁抱了 Serverless 架構。但您可能會發現一個奇怪的現象：「為什麼 API 第一次打都要等好幾秒，第二次以後就瞬間回傳了？」

這就是所謂的 冷啟動 (Cold Start)：

• 在 Serverless 環境中，您的程式碼平常是處於「沉睡」狀態的（不消耗任何雲端運算資源，所以免費額度才這麼多）。
• 當有人發送第一次請求過來時，雲端平台必須立刻找一台空閒的機器 -> 啟動 Node.js 環境 -> 載入您的程式碼 -> 連接 Turso 資料庫 -> 最後才處理請求。這個過程可能需要 1~3 秒。
• 一旦啟動後 (熱啟動 Warm Start)，這台機器會保持甦醒一小段時間。這期間內的所有 API 請求，都會獲得極致的毫秒級回應。

理解了這個原理，就不會把剛部署完的初次延遲誤以為是自己程式寫爛了！

核心程式碼片段

要讓 Vercel 認識我們的 Express 專案，我們需要在 backend 資料夾的根目錄新增一個 vercel.json 設定檔，告訴它打包的規則：

{
  "version": 2,
  "builds": [
    {
      "src": "src/index.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "src/index.ts"
    }
  ]
}

這段設定的意思是：請使用 @vercel/node 來處理我們的 src/index.ts，並且把所有連進來的網址路由 (/(.*))，全部無腦轉交給 src/index.ts 裡的 Express 程式來接手處理！

實際畫面截圖

後端 Vercel 部署成功。

小結

有了 vercel.json 的加持，只要把程式碼推上 GitHub，Vercel 就會自動幫我們建置出穩定的 API 伺服器。明天，我們要把漂亮的前端 React 畫面部署到 Render 上！