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

Vercel 是什麼

官網

常見命令列

Vercel Demo

部署 Node 服务

延伸思考

首頁

web前端

js教程

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

青灯夜游

May 07, 2022 pm 09:34 PM

nodejs node.js node

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7496

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

nodejs是後端框架嗎 Apr 21, 2024 am 05:09 AM

Node.js 可作為後端框架使用，因為它提供高效能、可擴展性、跨平台支援、豐富的生態系統和易於開發等功能。

nodejs怎麼連接mysql資料庫 Apr 21, 2024 am 06:13 AM

要連接 MySQL 資料庫，需要遵循以下步驟：安裝 mysql2 驅動程式。使用 mysql2.createConnection() 建立連接對象，其中包含主機位址、連接埠、使用者名稱、密碼和資料庫名稱。使用 connection.query() 執行查詢。最後使用 connection.end() 結束連線。

nodejs中的全域變數有哪些 Apr 21, 2024 am 04:54 AM

Node.js 中存在以下全域變數：全域物件：global核心模組：process、console、require執行階段環境變數：__dirname、__filename、__line、__column常數：undefined、null、NaN、Infinity、-Infinity

nodejs和java的差別大嗎 Apr 21, 2024 am 06:12 AM

Node.js 和 Java 的主要差異在於設計和特性：事件驅動與執行緒驅動：Node.js 基於事件驅動，Java 基於執行緒驅動。單執行緒與多執行緒：Node.js 使用單執行緒事件循環，Java 使用多執行緒架構。執行時間環境：Node.js 在 V8 JavaScript 引擎上運行，而 Java 在 JVM 上運行。語法：Node.js 使用 JavaScript 語法，而 Java 使用 Java 語法。用途：Node.js 適用於 I/O 密集型任務，而 Java 適用於大型企業應用程式。

nodejs安裝目錄裡的npm與npm.cmd檔有什麼差別 Apr 21, 2024 am 05:18 AM

Node.js 安裝目錄中有兩個與 npm 相關的文件：npm 和 npm.cmd，區別如下：擴展名不同：npm 是可執行文件，npm.cmd 是命令視窗快捷方式。 Windows 使用者：npm.cmd 可以在命令提示字元中使用，npm 只能從命令列執行。相容性：npm.cmd 特定於 Windows 系統，npm 跨平台可用。使用建議：Windows 使用者使用 npm.cmd，其他作業系統使用 npm。

nodejs是後端開發語言嗎 Apr 21, 2024 am 05:09 AM

是的，Node.js 是一種後端開發語言。它用於後端開發，包括處理伺服器端業務邏輯、管理資料庫連接和提供 API。

Pi Node教學：什麼是Pi節點？如何安裝和設定Pi Node？ Mar 05, 2025 pm 05:57 PM

PiNetwork節點詳解及安裝指南本文將詳細介紹PiNetwork生態系統中的關鍵角色——Pi節點，並提供安裝和配置的完整步驟。 Pi節點在PiNetwork區塊鏈測試網推出後，成為眾多先鋒積極參與測試的重要環節，為即將到來的主網發布做準備。如果您還不了解PiNetwork，請參考Pi幣是什麼？上市價格多少？ Pi用途、挖礦及安全性分析。什麼是PiNetwork？ PiNetwork項目始於2019年，擁有其專屬加密貨幣Pi幣。該項目旨在創建一個人人可參與

nodejs專案怎麼部署到伺服器 Apr 21, 2024 am 04:40 AM

Node.js 專案的伺服器部署步驟：準備部署環境：取得伺服器存取權限、安裝 Node.js、設定 Git 儲存庫。建置應用程式：使用 npm run build 產生可部署程式碼和相依性。上傳程式碼到伺服器：透過 Git 或檔案傳輸協定。安裝依賴項：SSH 登入伺服器並使用 npm install 安裝應用程式相依性。啟動應用程式：使用 node index.js 等命令啟動應用程序，或使用 pm2 等進程管理器。設定反向代理（可選）：使用 Nginx 或 Apache 等反向代理路由流量到應用程式

See all articles

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

Vercel 是什麼

官網

常見命令列

部署靜態服務

部署 Node 服务

延伸思考

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題