哪个网站系统做的好,网站开发运行环境有哪些,培训机构管理系统哪个好,北京平面设计公司名称什么是Vercel#xff1f;
想必好多前端同学都知道Vercel吧#xff01;如果还不了解的同学也没关系#xff0c;好好看这篇文章#xff0c;认识认识Vercel#xff0c;我想对你部署项目有一定帮助。
Vercel 是一个云平台#xff0c;用于托管和部署静态网站、前端应用程序以…什么是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中可以配置自定义域名。 …
