使用 Vercel 部署 Node 服務
引子
之前在寫面試常客：HTTP 緩存時，曾經就強緩存和協商緩存寫過兩個demo，但緩存要在服務端做，只能貼上代碼，不能在網頁上感受(雖然我貼了gif)。
筆者的所有 demo 例子都放在 github page 上，其特點是不需要服務器即可部署靜態資源，但它不具備部署服務端應用能力。
最近筆者在了解 CI/CD 方面的知識點，想起了 Vercel，就想著能否將服務端應用架在 vercel 上呢?
Vercel 是什么
Vercel 是一個開箱即用的網站托管平臺，方便開發者快速部署自己的網站。它在全球都擁有 CND 節點，因此比 Github 官方自帶的 github pages 更加穩定，訪問速度更快。
Koala聊開源 曾經對其有過介紹：Vercel 與 Next.js：開源全明星團隊背后的商業邏輯。
文字版：Vercel 與 Next.js：開源全明星團隊背后的商業邏輯。
簡單的說，它能極簡部署應用到服務端，且是免費不用買服務器。
官網
Vercel 官網。
Vercel 工作流官網(網頁效果炫酷)。
常見命令行
將 Vercel 下載到全局(npm i vercel -g)，不知道有什么命令就-h。
筆者對其了解有限，這里羅列下筆者知道的命令。
- vercel login：登錄 Vercel 賬號。
- vercel dev：本地開啟服務。
- vercel dev --bug：本地開啟服務并打印日志。
- vercel：部署本地資源到 Vercel 上。
- vercel --prod：更新本地網頁。
vercel 可以用 vc 來代替，vc 是 Vercel 的縮寫。
部署靜態服務
我們現在已經對 vercel 有所了解，前文中說到 Vercel 能簡化開發者部署服務，那它能簡化到什么程度呢?
這里我們從零部署一個簡易靜態服務。
本地安裝 Vercel。
npm i vercel -g
登錄 Vercel。
vercel login
vercel login
選擇好連接的方式后，會在網站彈出。
vercel 登錄成功
喲喲，man。what's your name?
創建一個HTML文件，后續我們要將其上傳至 Vercel 服務器上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vercel Demo</title>
</head>
<body>
<h1>Vercel Demo</h1>
</body>
</html>
本地測試一番，輸入命令行。
vercel dev
vercel dev
因為我們這是第一次執行，根目錄下沒有.vercel，所以要填寫一些必要信息，這時你的本地和 Vercel 服務器就綁定好了。
部署服務
vercel
vercel部署
在 https://vercel-sample-ten.vercel.app/ 中能訪問到我們的靜態服務。
在截圖中我們也看到了這句話Deployed to production. Run vercel --prod to overwrite later，后續我們要更新資源，用 vercel --prod 即可。
好了，除去必要的登錄，我們就用了三個命令就把本地服務部署到 Vercel 服務器上。
- vercel dev ：開發時使用，查看應用是否跑得起來。
- vercel：部署服務。
- vercel --prod：更新應用(資源)。
可以登錄 Vercel 后臺查看部署情況。
vercel 后臺
部署 Node 服務
回歸主題，最終我們想部署的是 Node 服務，是后端服務，而非前端靜態資源服務，這是關鍵。
同樣建立新項目。
mkdir vercel-koa2
cd vercel-koa2
npm init -y
npm i koa -S
touch index.js
編寫 index.js 中的內容。
const Koa = require('koa');
const app = new Koa();
app.use(async ctx => {
ctx.body = 'Hello Vercel';
});
app.listen(3008, () => {
console.log('3008項目啟動')
});
PS： 3000端口默認會被 Vercel 使用，所以 Koa 服務要換個端口。
使用命令vercel dev。
vercel koa dev
發現給我報錯了，理由是 package.json 的 scripts 中沒有 build 快捷符，修改之。
...
"scripts": {
"build": "node index.js",
},
...
再次使用 vercel dev，node 服務跑起來了。
于是乎我們部署它。
vercel
vercel 部署失敗
搞半天沒部署上去，后臺查看也是無果，嗚呼悲哉。
google后，發現原來還有一個 vercel.json，可以用 vercel.json 配置和覆蓋 vercel 默認行為。
下載 @vercel/node 包。
npm i @vercel/node -S
填寫配置：
{
"version": 2,
"builds": [
{
"src": "index.js",
"use": "@vercel/node"
}
]
}執行 vercel 部署服務。
vercel koa
訪問地址：https://vercel-koa2-t511069160.vercel.app。
至此，就完成了 Koa 服務的部署。
與部署靜態資源多了兩個步驟。
下載 @vercel/node 和配置 vercel.json。
延伸思考
Vercel 當然不止筆者所說的這一功能，它還可以自定義域名、serverless、全球支持的 CDN等等。
可以毫不夸張地說，用 Vercel 來代替繁瑣的云服務器，配合 Github Action 做 CI/CD，就個人開發者或小團隊而言，這或許就是神器。
后續筆者也會嘗試用 Vercel 部署一些小應用，實踐出真理。
