Vercel 部署 Node 服務

山頭人漢波發表於2022-05-07

引子

之前在寫面試常客：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幫助

筆者對其瞭解有限，這裡羅列下筆者知道的命令

  • 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

image-20220507100558414

在 https://vercel-sample-ten.ver... 中能訪問到我們的靜態服務

在截圖中我們也看到了這句話Deployed to production. Run vercel --prod to overwrite later，後續我們要更新資源，用 vercel --prod 即可

好了，除去必要的登入，我們就用了三個命令就把本地服務部署到 Vercel 伺服器上

  • vercel dev ：開發時使用，檢視應用是否跑得起來
  • vercel：部署服務
  • vercel --prod：更新應用（資源）

可以登入 Vercel 後臺檢視部署情況

image-20220507114502355

部署 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-t51106916...

至此，就完成了 Koa 服務的部署

與部署靜態資源多了兩個步驟

下載 @vercel/node 和配置 vercel.json

延伸思考

Vercel 當然不止筆者所說的這一功能，它還可以自定義域名、serverless、全球支援的 CDN等等

可以毫不誇張地說，用 Vercel 來代替繁瑣的雲伺服器，配合 Github Action 做 CI/CD，就

個人開發者或小團隊而言，這或許就是神器

後續筆者也會嘗試用 Vercel 部署一些小應用，實踐出真理

附上專案地址：https://github.com/johanazhu/...

參考資料

相關文章