如何将Express项目部署到Vercel

什么是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"
    }
  ]
}

4.部署到Vercel

将项目部署到Vercel，常用的有两种方法：

• 从Github上导入
• 使用Vercel CLI

我们这里使用的是Vercel CLI，先全局安装Vercel CLI：

npm i -g vercel

登录Vercel，由于上面已经注册了Vercel账号，这里我们就可以使用命令登录了。假设刚刚你用Github账户注册，就使用Continue with GitHub，按上下键可以切换登录方式。

vercel login

登录完成之后，就可以部署了，部署成功之后，会默认生成一个地址，点击可以点击Production中的地址进行预览了！

vercel

👏👏👏到这里你的项目就部署完毕了！！！

其他

部署完成之后，进入Vercel官网，就会多一个项目。点进去可以看到（如下图）。
点击Logs选项卡，可以查看日志；点击Settings滑到最后，还可以删除你的项目。
在Settings选项卡下的Domains中可以配置自定义域名。
…