身為前端開發者，你一定遇過這種尷尬：前端做得漂漂亮亮，卻卡在一個「算個價格」「發封信」的小需求上，不得不求後端同事幫你開個接口，或者自己租一台伺服器、裝環境、掛監控，結果還沒上線就被運維成本勸退。其實，Serverless（無伺服器架構） 正是為了解決這個痛點而生的——它讓你寫完程式碼，上傳，就直接跑在雲端，伺服器、擴縮容、打補丁全部交給平台。這篇帶你從零把前端專案連上一個輕量後端，體驗「寫完即上線」的爽感。
一、什麼是 Serverless？
先破除一個誤會：Serverless 不是「沒有伺服器」，而是「你不用管伺服器」。在傳統架構裡，你要預估流量、租機器、配負載均衡；在 Serverless 裡，你只寫一個個函式（Function），平台在請求來時才啟動執行、用完即回收，按呼叫次數與執行時間計費。對流量不規律、想把心思放在產品上的小團隊來說，這等於把基礎設施的煩惱整筆刪掉。
二、為什麼前端開發者該懂它？
因為它最適合做 BFF（Backend For Frontend，為前端而生的後端）：代理第三方 API、隱藏金鑰、做簡單的資料組裝與表單提交。你不需要學一整套後端框架，只要會寫 JavaScript/TypeScript，就能擁有一個「專屬於前端」的輕量接口。常見平台有 Vercel、Netlify、Cloudflare Pages/Workers、AWS Lambda 等。
三、步驟 1：先部署一個純前端專案
以 Vercel 為例，你本地用 vite 或任何框架做出的 dist 目錄，只要把專案推到 Git 倉庫並在 Vercel 匯入，平台就會自動偵測框架並部署，幾秒鐘拿到一個 https 網址。完全不用碰任何伺服器設定——這就是 Serverless 平台的「零配置」體驗。
四、步驟 2：寫一個 Serverless Function（API）
在專案根目錄建立 api/ 資料夾，裡面的每個檔案就是一個接口。下面這個例子接收 name 參數並回傳 JSON：
// api/hello.js (Vercel 約定：api 資料夾下的檔案即為函式)
export default function handler(req, res) {
const { name = 'World' } = req.query;
res.status(200).json({ message: `Hello, ${name}!` });
}
部署後，這段程式碼會自動對應到 /api/hello 路徑，平台幫你處理了程序啟動、HTTPS、擴縮容。
五、步驟 3：前端呼叫它
因為在同一個網域下，前端直接用相對路徑呼叫即可，不存在跨域煩惱：
// 前端元件中呼叫
const res = await fetch('/api/hello?name=Serverless');
const data = await res.json();
console.log(data.message); // Hello, Serverless!
六、步驟 4：處理冷啟動與環境變數
重點： 金鑰、API Token 絕對不要寫死在前端程式碼裡，也不要寫死在函式中——請放進平台的「環境變數」設定，再到程式讀取：
// api/price.js —— 用環境變數保護第三方金鑰
export default function handler(req, res) {
const apiKey = process.env.PRICE_API_KEY; // 從平台後台設定，不進程式碼
// 用 apiKey 向第三方行情服務要資料，再組裝回傳給前端
res.status(200).json({ hint: '金鑰已從環境變數讀取，安全' });
}
另一個要注意的是 冷啟動：函式閒置一段時間後第一次被呼叫，平台需要重新初始化環境，可能慢個幾百毫秒。對即時性要求極高的場景，可考慮常駐型方案或 Edge Function（如 Cloudflare Workers，幾乎無冷啟動）：
// worker.js (Cloudflare Workers，跑在離使用者最近的邊緣節點)
export default {
async fetch(request) {
const url = new URL(request.url);
if (url.pathname === '/api/hello') {
return Response.json({ message: 'Hello from the edge!' });
}
return new Response('Not found', { status: 404 });
}
};
七、常見地雷與最佳實踐
- 別把重運算塞進函式：Serverless 通常按執行時間計費，跑太久既慢又貴，重活交給專門的服務。
- 狀態不要存在函式裡：函式可能隨時被回收，會話、暫存請放資料庫或快取（如 Redis）。
- 小心廠商綁定：各家函式簽名略有差異，重要邏輯抽成純函式，方便未來搬遷。
- 設好逾時與錯誤回退：接口掛掉時前端要有兜底 UI，別讓使用者看到一片白。
重點： Serverless 不是要取代後端工程師，而是把「小接口、低流量、快速驗證」這類需求，從幾天的工作量壓縮到幾分鐘。對前端開發者而言，它是最低門檻的「後端初體驗」。
互動話題：你第一次把程式碼「上傳即上線」是什麼平台？在 Serverless 上踩過最痛的坑又是什麼？歡迎留言分享你的經驗！