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

我們注重客戶提出的每個(gè)要求，我們充分考慮每一個(gè)細(xì)節(jié)，我們積極的做好網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù)，我們努力開拓更好的視野，通過不懈的努力，創(chuàng)新互聯(lián)贏得了業(yè)內(nèi)的良好聲譽(yù)，這一切，也不斷的激勵(lì)著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計(jì),重慶小程序開發(fā),網(wǎng)站開發(fā),技術(shù)開發(fā)實(shí)力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術(shù)開發(fā)工程師。

Vercel 是什么

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

常見命令行

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

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

• vercel login：登錄 Vercel 賬號(hào)

• vercel dev：本地開啟服務(wù)

• vercel dev --bug：本地開啟服務(wù)并打印日志

• vercel：部署本地資源到 Vercel 上

• vercel --prod：更新本地網(wǎng)頁

vercel 可以用 vc 來代替，vc 是 Vercel 的縮寫

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

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

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

本地安裝 Vercel

npm i vercel -g

登錄 Vercel

vercel login

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

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

    
    
    
    



    
Vercel Demo

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

vercel dev

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

部署服務(wù)

vercel

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

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

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

• vercel dev ：開發(fā)時(shí)使用，查看應(yīng)用是否跑得起來

• vercel：部署服務(wù)

• vercel --prod：更新應(yīng)用（資源）

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

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

編寫 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

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

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

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

于是乎我們部署它

vercel

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

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

下載 @vercel/node 包

npm i @vercel/node -S

填寫配置：

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

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

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

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

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

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