5 分钟快速上线 Web 应用和 API（Vercel）

上周有个童鞋问我如何快速搭建一个 Web 应用，想拿来练手，就不考虑购置服务器。我推荐了前段时间很火的Vercel，接下来我带你 5 分钟上手！

Vercel

Vercel 你可以理解为一个部署工具，支持部署静态网页和 Node 服务，部署后你还可以访问它自带生成的域名 https。

不仅仅如此，除了他的亲儿子Nextjs之外，它还提供了很多模版支持，譬如：

• Nuxt.js: Vue 的 SSR 框架

• Hexo: 快速生成博客网站

• Remix： 一款边缘原生的全栈 JavaScript 框架

• 模版多达 30 种..

Vercel 的核心主要包括开发、预览、部署。通过授权 Github 给 Vercel 后，就可以选择我们要部署的项目 Github 仓库，项目就自动更新部署了。接下来教你一步到位！

1.选择模版

本次演示实践框架，我选用 vercel 的亲儿子Next.js。他提供了很多🌰案例，这里我选择一个 模版：with-vercel-fetch。来实现一个简单的 SSR 服务。

在 Vercel 创建一个项目，你会发现Vercel跟 Github 是可以联动的！支持帮你创建一个私有的 Github 仓库，本质是类似 Github Page，但是 Github Page 的访问速度太慢。这点 Vercel 直接秒杀了。

在 Vercel 帮我们创建的仓库之后，对 Demo 仓库做一些调整 👇

这里我 fetch 的 API 接口使用的是Apifox提供的云端Mock的功能，自己不用搭建一套后端服务也可以调接口数据！🔥

在 Apifox 的 Web 版中新建一个接口，然后对接口返回字段进行 Mock 自定义（支持自定义 Mock 数据）👇

这是我自定义的一个云端 Mock 接口 https://mock.apifox.cn/m1/388694-0-default/star/list

感兴趣的小伙伴可以体验下 👉 Apifox

2.发布

完成上述步骤后，vercel 会自动执行部署环节，并生成访问域名，同时你可以看到应用的预览效果！

而且后期你的 github 仓库只main分支有任何改动，vercel可以自动触发 Deploy 部署。

最后访问一下我们用 vercel 部署好的页面

👨‍🎓 阿乐同学：那如果我想替换域名可以嘛？不用他分配的域名

可以的，如果你想绑定独立域名，你可以操作view domain 进行自定义域名绑定，最后去域名解析解决解析CNAME到cName.vercel-dns.com

3.其他部署方式

Vercel 提供deploy Hook， 你可以在 vercel 创建的项目中的控制面板上配置 deploy hook，只需要填写 deploy（部署）的分支 git branch, 还有对应的 hook 名称（自定义），就可以配置一个独立的触发方式。配置如下 👇

最后我们在命令行中发起请求，就可以触发该项目的构建部署了。是不是很方便！🚀

curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_GeziGEUiSxxxxxx/tV4Wm5MO2j

4.Serverless 相关

Vercel 本质上是一个零配置的 Serverless 部署平台，那什么是 Serverless 呢？ 你可以看看之前树酱写的文章：📒 你学BFF和Serverless了吗

Vercel 实现Serverless的底层是基于AWS（亚马逊云） 的lambda这座大山。我们用vercel可以部署Serverless 接口，接下来我们通过本地来开发一个简单的 Serverless API

在本地项目中执行 👇

1.  npm install vercel@latest -g （全局安装）2.  vercel login3.  vercel (除了初始化.vercel文件 也可以触发项目的Deploy部署)

完成上诉操作后，我们就可以开工了！我们发现 vercel 命令会帮我们创建 .vercel文件夹，然后我们在跟目录创建一个 api 文件夹，并在其中新建一个"云函数" message，我们看下代码结构！

最后重新执行 vercel，就可以部署这个Serverless API了! 我们再用 Apifox 调试一下！成功返回！