搜尋

首頁 >web前端 >js教程 >Vercel是什麼？怎麼部署Node服務？

Vercel是什麼？怎麼部署Node服務？

青灯夜游
青灯夜游轉載
2022-05-07 21:34:2221853瀏覽

Vercel是什麼？這篇文章帶大家了解Vercel，介紹一下在Vercel中部署 Node 服務的方法，希望對大家有幫助！

Vercel是什麼？怎麼部署Node服務？

之前在寫面試常客：HTTP 快取時，曾經就強快取和協商快取寫過兩個demo，但快取要在服務端做，只能貼上程式碼，不能在網頁上感受（雖然我貼了gif）

筆者的所有demo 範例都放在github page 上，其特點是不需要伺服器即可部署靜態資源，但它不具備部署服務端應用能力

最近筆者在了解CI/CD 方面的知識點，想起了Vercel，就想著能否將服務端應用架在vercel 上呢？

Vercel 是什麼

Vercel 是一個開箱即用的網站託管平台，方便開發者快速部署自己的網站。它在全球都擁有CND 節點，因此比Github 官方自帶的github pages 更加穩定，訪問速度更快

Koala聊開源 曾經對其有過介紹：Vercel與Next.js：開源全明星團隊背後的商業邏輯

文字版：Vercel 與Next.js：開源全明星團隊背後的商業邏輯

https: //juejin.cn/post/7057333396359348255

簡單的說，它能極簡部署應用到服務端，且是免費不用買伺服器

官網

  • Vercel 官網：https://vercel.com/

  • #Vercel 工作流程長網（網頁效果酷炫）：https:/ /vercel.com/workflow

常見命令列

將Vercel 下載到全域（npm i vercel -g） ，不知道有什麼指令就-h

Vercel是什麼？怎麼部署Node服務？

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

  • 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是什麼？怎麼部署Node服務？##選擇好連接的方式後，會在網站彈出

Vercel是什麼？怎麼部署Node服務？喲喲，man。 what's your name？

建立一個HTML文件，後續我們要將其上傳至Vercel 伺服器上

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

</html>

本地測試一番，輸入命令列

vercel dev

Vercel是什麼？怎麼部署Node服務？因為我們這是第一次執行，根目錄下沒有

.vercel

，所以要填寫一些必要信息，這時你的本地和Vercel 伺服器就綁定好了部署服務

vercel

Vercel是什麼？怎麼部署Node服務？在https://vercel-sample-ten.vercel.app/ 中能存取到我們的靜態服務

在截圖中我們也看到了這句話

Deployed to production. Run vercel --prod to overwrite later

，後續我們要更新資源，用vercel --prod 即可好了，除去必要的登錄，我們就用了三個命令就把本地服務部署到Vercel 伺服器上

    vercel dev
  • ：開發時使用，查看應用程式是否跑起來
    • vercel
  • ：部署服務
    • vercel --prod
  • ：更新應用程式（資源）
    • #可以登入
Vercel 後台

查看部署狀況

部署 Node 服务

回归主题，最终我们想部署的是 Nodejs 服务，是后端服务，而非前端静态资源服务，这是关键

同样建立新项目

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

编写 index.js 中的内容

const Koa = require(&#39;koa&#39;);
const app = new Koa();

app.use(async ctx => {
    ctx.body = &#39;Hello Vercel&#39;;
});

app.listen(3008, () => {
    console.log(&#39;3008项目启动&#39;)
});

PS： 3000端口默认会被 Vercel 使用，所以 Koa 服务要换个端口

使用命令vercel dev

Vercel是什麼？怎麼部署Node服務？

发现给我报错了，理由是 package.json 的 scripts 中没有 build 快捷符，修改之

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

再次使用 vercel dev，node 服务跑起来了

于是乎我们部署它

vercel

Vercel是什麼？怎麼部署Node服務？

搞半天没部署上去，后台查看也是无果，呜呼悲哉

google后，发现原来还有一个 vercel.json，可以用 vercel.json 配置和覆盖 vercel 默认行为

下载 @vercel/node 包

npm i @vercel/node -S

填写配置：

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

执行 vercel 部署服务

Vercel是什麼？怎麼部署Node服務？

访问地址：https://vercel-koa2-t511069160.vercel.app

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

与部署静态资源多了两个步骤

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

延伸思考

Vercel 当然不止笔者所说的这一功能，它还可以自定义域名、serverless、全球支持的 CDN等等

可以毫不夸张地说，用 Vercel 来代替繁琐的云服务器，配合 Github Action 做 CI/CD，就

个人开发者或小团队而言，这或许就是神器

后续笔者也会尝试用 Vercel 部署一些小应用，实践出真理

附上项目地址：https://github.com/johanazhu/vercel-demo

原文地址：https://juejin.cn/post/7094911994226016292

作者：山头人汉波

更多node相关知识，请访问：nodejs 教程！

以上是Vercel是什麼？怎麼部署Node服務？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文轉載於：juejin.cn。如有侵權，請聯絡admin@php.cn刪除
上一篇：Angular專案如何上線？結合nginx來聊聊上線流程！下一篇：Angular專案如何上線？結合nginx來聊聊上線流程！

相關文章

看更多