Vercel是什麼？怎麼部署Node服務？-js教程-PHP中文網

首頁

web前端

js教程

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

青灯夜游

May 07, 2022 pm 09:34 PM

nodejsnode.jsnode

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 id="Vercel-nbsp-Demo">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 後台

查看部署狀況

部署 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中文網其他相關文章！

陳述

本文轉載於：掘金社区。如有侵權，請聯絡admin@php.cn刪除

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

See all articles