什么是Vercel？

想必好多前端同学都知道Vercel吧！如果还不了解的同学也没关系，好好看这篇文章，认识认识Vercel，我想对你部署项目有一定帮助。

Vercel 是一个云平台，用于托管和部署静态网站、前端应用程序以及服务器less函数。它提供了一套工具和服务，使开发人员能够轻松地将他们的网站和应用程序部署到全球分布的内容交付网络（CDN）上，以提供快速的加载速度和高可用性。

我们都知道，像React、Vue这种单页面应用，打包之后不用直接打开index.html进行访问。通过上面的介绍，简单来说 Vercel 自动化部署我们前端项目，而且是免费的，非常方便。

怎么用Vercel

这里主要部署Express项目，同理前端项目也是这样部署的。

1. 创建Vercel账号

进入Vercel官网，点击右上角的Log In，强烈推荐使用Github登录。登录完成之后，以后你部署的项目都可以在上面查看。

2. 创建一个Express应用

新建一个目录：

mkdir test test-express

进入项目目录：

cd test-express

初始化npm：

npm init -y

安装express:

npm i express

然后使用编辑器（如：vscode）打开我们的项目，创建index.js文件来编写我们的代码：

const express = require("express");

// 创建Express应用
const app = express();


// 定义一下假数据，用于验证接口
const users = [
	{ id: 1, name: "刘玄德", role: "大哥" },
	{ id: 2, name: "关云长", role: "二哥" },
	{ id: 3, name: "张翼德", role: "三弟" }
];

// 简单写一个接口
app.get("/", (req, res) => {
	res.send("这是一个Node express简单服务。");
});


// 简写写一个获取用户的接口
app.get("/user", (req, res) => {
	res.status(200).json({
		code: 200,
		msg: "ok",
		data: users
	});
});


// 运行服务器
app.listen(9000, () => {
	console.log("Express Server running at http://127.0.0.1:9000");
});

/**
 * 为了让Vercel将Express转变为无服务器功能，
 * 必须导出Express应用。
 */
module.exports = app;odule.exports = app;

当编写好代码之后，我们可以先本地调式我们的代码：在package.json文件中，找到scripts属性，添加"dev": "node index.js"：
在这里插入图片描述
然后我们可以npm run dev本地调式，看看有没有问题。如果没有问题，就可以部署到Vercel上了。

3.添加Vercel配置文件

在项目根目录下创建vercel.json文件：

{
  "version": 2,
  "builds": [
    {
      "src": "index.js",
      "use": "@now/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "index.js"
    }
  ]
}