完美世界前传下载,遮天,欢乐颂小说txt

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

使用Vercel部署Node服務(wù)

引子

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

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

筆者的所有 demo 例子都放在 github page 上，其特點(diǎn)是不需要服務(wù)器即可部署靜態(tài)資源，但它不具備部署服務(wù)端應(yīng)用能力。

最近筆者在了解 CI/CD 方面的知識(shí)點(diǎn)，想起了 Vercel，就想著能否將服務(wù)端應(yīng)用架在 vercel 上呢?

Vercel 是什么

Vercel 是一個(gè)開箱即用的網(wǎng)站托管平臺(tái)，方便開發(fā)者快速部署自己的網(wǎng)站。它在全球都擁有 CND 節(jié)點(diǎn)，因此比 Github 官方自帶的 github pages 更加穩(wěn)定，訪問速度更快。

Koala聊開源曾經(jīng)對(duì)其有過介紹：Vercel 與 Next.js：開源全明星團(tuán)隊(duì)背后的商業(yè)邏輯。

文字版：Vercel 與 Next.js：開源全明星團(tuán)隊(duì)背后的商業(yè)邏輯。

簡(jiǎn)單的說，它能極簡(jiǎn)部署應(yīng)用到服務(wù)端，且是免費(fèi)不用買服務(wù)器。

官網(wǎng)

Vercel 官網(wǎng)。

Vercel 工作流官網(wǎng)(網(wǎng)頁效果炫酷)。

常見命令行

將 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

vercel login

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

vercel 登錄成功

喲喲，man。what's your name?

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




    
    
    
    Vercel Demo


    Vercel Demo

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

vercel dev

vercel dev

因?yàn)槲覀冞@是第一次執(zhí)行，根目錄下沒有.vercel，所以要填寫一些必要信息，這時(shí)你的本地和 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 即可。

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

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

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

vercel 后臺(tái)

部署 Node 服務(wù)

回歸主題，最終我們想部署的是 Node 服務(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。

vercel koa dev

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

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

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

于是乎我們部署它。

vercel

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ù)。

vercel koa

訪問地址：https://vercel-koa2-t511069160.vercel.app。

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

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

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

延伸思考

Vercel 當(dāng)然不止筆者所說的這一功能，它還可以自定義域名、serverless、全球支持的 CDN等等。

可以毫不夸張地說，用 Vercel 來代替繁瑣的云服務(wù)器，配合 Github Action 做 CI/CD，就個(gè)人開發(fā)者或小團(tuán)隊(duì)而言，這或許就是神器。

后續(xù)筆者也會(huì)嘗試用 Vercel 部署一些小應(yīng)用，實(shí)踐出真理。

網(wǎng)頁標(biāo)題：使用Vercel部署Node服務(wù)
轉(zhuǎn)載來于：http://fisionsoft.com.cn/article/cdidpdj.html