Vercel如何部署Node服務(wù)

發(fā)布時(shí)間：2023-03-15 10:27:58 來(lái)源：億速云閱讀：177 作者：iii 欄目：web開(kāi)發(fā)

這篇文章主要介紹“Vercel如何部署Node服務(wù)”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vercel如何部署Node服務(wù)”文章能幫助大家解決問(wèn)題。

Vercel 是什么

Vercel 是一個(gè)開(kāi)箱即用的網(wǎng)站托管平臺(tái)，方便開(kāi)發(fā)者快速部署自己的網(wǎng)站。它在全球都擁有 CND 節(jié)點(diǎn)，因此比 Github 官方自帶的 github pages 更加穩(wěn)定，訪問(wèn)速度更快。簡(jiǎn)單的說(shuō)，它能極簡(jiǎn)部署應(yīng)用到服務(wù)端，且是免費(fèi)不用買(mǎi)服務(wù)器。

常見(jiàn)命令行

將 Vercel 下載到全局（npm i vercel -g），不知道有什么命令就-h

Vercel如何部署Node服務(wù)

筆者對(duì)其了解有限，這里羅列下筆者知道的命令

vercel login：登錄 Vercel 賬號(hào)
vercel dev：本地開(kāi)啟服務(wù)
vercel dev --bug：本地開(kāi)啟服務(wù)并打印日志
vercel：部署本地資源到 Vercel 上
vercel --prod：更新本地網(wǎng)頁(yè)

vercel 可以用 vc 來(lái)代替，vc 是 Vercel 的縮寫(xiě)

部署靜態(tài)服務(wù)

我們現(xiàn)在已經(jīng)對(duì) vercel 有所了解，前文中說(shuō)到 Vercel 能簡(jiǎn)化開(kāi)發(fā)者部署服務(wù)，那它能簡(jiǎn)化到什么程度呢？

這里我們從零部署一個(gè)簡(jiǎn)易靜態(tài)服務(wù)

本地安裝 Vercel

npm i vercel -g

登錄 Vercel

vercel login

Vercel如何部署Node服務(wù)

選擇好連接的方式后，會(huì)在網(wǎng)站彈出

Vercel如何部署Node服務(wù)

創(chuàng)建一個(gè)HTML文件，后續(xù)我們要將其上傳至 Vercel 服務(wù)器上

<!DOCTYPE html>
<html>

<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>
    <h2>Vercel Demo</h2>
</body>

</html>

本地測(cè)試一番，輸入命令行

vercel dev

Vercel如何部署Node服務(wù)

因?yàn)槲覀冞@是第一次執(zhí)行，根目錄下沒(méi)有.vercel，所以要填寫(xiě)一些必要信息，這時(shí)你的本地和 Vercel 服務(wù)器就綁定好了

部署服務(wù)

vercel

Vercel如何部署Node服務(wù)

在 https://vercel-sample-ten.vercel.app/ 中能訪問(wèn)到我們的靜態(tài)服務(wù)

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

好了，除去必要的登錄，我們就用了三個(gè)命令就把本地服務(wù)部署到 Vercel 服務(wù)器上

vercel dev ：開(kāi)發(fā)時(shí)使用，查看應(yīng)用是否跑得起來(lái)
vercel：部署服務(wù)
vercel --prod：更新應(yīng)用（資源）

可以登錄 Vercel 后臺(tái)查看部署情況

Vercel如何部署Node服務(wù)

部署 Node 服務(wù)

回歸主題，最終我們想部署的是 Nodejs 服務(wù)，是后端服務(wù)，而非前端靜態(tài)資源服務(wù)，這是關(guān)鍵

同樣建立新項(xiàng)目

mkdir vercel-koa2
cd vercel-koa2
npm init -y
npm i koa -S
touch index.js

編寫(xiě) 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項(xiàng)目啟動(dòng)')
});

PS： 3000端口默認(rèn)會(huì)被 Vercel 使用，所以 Koa 服務(wù)要換個(gè)端口

使用命令vercel dev

Vercel如何部署Node服務(wù)

發(fā)現(xiàn)給我報(bào)錯(cuò)了，理由是 package.json 的 scripts 中沒(méi)有 build 快捷符，修改之

...
"scripts": {
    "build": "node index.js",
},
...

再次使用 vercel dev，node 服務(wù)跑起來(lái)了

于是乎我們部署它

vercel

Vercel如何部署Node服務(wù)

搞半天沒(méi)部署上去，后臺(tái)查看也是無(wú)果，嗚呼悲哉

google后，發(fā)現(xiàn)原來(lái)還有一個(gè) vercel.json，可以用 vercel.json 配置和覆蓋 vercel 默認(rèn)行為

下載 @vercel/node 包

npm i @vercel/node -S

填寫(xiě)配置：

{
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@vercel/node"
    }
  ]
}

執(zhí)行 vercel 部署服務(wù)

Vercel如何部署Node服務(wù)

至此，就完成了 Koa 服務(wù)的部署

與部署靜態(tài)資源多了兩個(gè)步驟

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

關(guān)于“Vercel如何部署Node服務(wù)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

向AI問(wèn)一下細(xì)節(jié)

Vercel如何部署Node服務(wù)

Vercel 是什么

常見(jiàn)命令行

部署靜態(tài)服務(wù)

部署 Node 服務(wù)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽