Vercel是什么？怎么部署Node服务？-js教程-PHP中文网

Vercel 是什么

官网

常见命令行

部署静态服务

部署 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 login：登录 Vercel 账号
vercel dev：本地开启服务
vercel dev --bug：本地开启服务并打印日志
vercel：部署本地资源到 Vercel 上
vercel --prod：更新本地网页

vercel 可以用 vc 来代替，vc 是 Vercel 的缩写

部署静态服务

我们现在已经对 vercel 有所了解，前文中说到 Vercel 能简化开发者部署服务，那它能简化到什么程度呢？

这里我们从零部署一个简易静态服务

本地安装 Vercel

npm i vercel -g

登录后复制

vercel login

登录后复制

选择好连接的方式后，会在网站弹出

哟哟，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，所以要填写一些必要信息，这时你的本地和 Vercel 服务器就绑定好了

部署服务

vercel

登录后复制

在 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

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

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

登录后复制

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

于是乎我们部署它

vercel

登录后复制

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

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

下载 @vercel/node 包

npm i @vercel/node -S

登录后复制

填写配置：

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

登录后复制

执行 vercel 部署服务

访问地址：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邮箱登陆入口在哪里

7491

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版

热门话题