引子

之前在寫面試?？停篐TTP 緩存時，曾經(jīng)就強緩存和協(xié)商緩存寫過兩個demo，但緩存要在服務(wù)端做，只能貼上代碼，不能在網(wǎng)頁上感受(雖然我貼了gif)。

創(chuàng)新互聯(lián)公司于2013年成立，先為永濟等服務(wù)建站，永濟等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為永濟企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

筆者的所有 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ù)器上。

    
    
    
    


    
Vercel Demo

本地測試一番，輸入命令行。

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)用，實踐出真理。

標題名稱：使用Vercel部署Node服務(wù)
本文鏈接：http://www.5511xx.com/article/cdidpdj.html