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