如何使用Vercel部署一个接口测试工具

这是一个超详细的实例&＃xff0c;跟着做完你会&＃xff1a;

• 光速入门 Vercel、Serverless Functions

• 得到一个和图片一模一样的专属的 API 工具

一、概念解析

1.Serverless 是什么&＃xff1f;

Serverless 架构即“无服务器”架构&＃xff0c;它是一种全新的架构方式&＃xff0c;是云计算时代一种革命性的架构模式。

Serverless 的核心思想是让作为计算资源的服务器不再需要被使用者关注。

 FaaS&＃xff08;Functions as a Service&＃xff09;函数即服务&＃xff0c;FaaS是 Serverless 计算的一种形式&＃xff0c;后续我们将用 Serverless API 实现一个使用 Node 帮助客户端发送 API 请求得到响应的服务。

如果看完还是云里雾里&＃xff0c;冇嘢冇嘢接着看。

2. Eoapi 是什么&＃xff1f;

一个可拓展的开源 API 工具&＃xff0c;就是开头的那个配图&＃xff0c;可以用它快速调试 API&＃xff0c;可以体验一下 Demo 地址。

3. Vercel 是什么&＃xff1f;

Vercel 是一个站点托管平台&＃xff0c; 类似于 Github Pages&＃xff0c;你丢上去网页的构建后的代码&＃xff0c;还你一个 Web 服务链接&＃xff0c;同时支持持续集成&＃xff0c; 可以关联 Push、PR&＃xff0c;提交代码后自动部署 。

二、快速开始

1. Fork Eoapi 仓库

访问&＃xff1a;https://github.com/eolinker/eoapi

Fork 成功后可以在自己的 Repositories 看到 Eoapi。

2. 配置 Vercel

访问&＃xff1a;Develop. Preview. Ship. For the best frontend teams – Vercel

注册成功后点击新建项目

配置 Vercel 访问 Github 项目的权限&＃xff0c;选中 Eoapi

配置安装、构建命令以及构建后文件夹&＃xff0c;配置好之后点击构建按钮。

• BUILD COMMAND&＃xff1a;cd src/workbench/browser&&npm run build:web
• OUTPUT DIRECTORY&＃xff1a;src/workbench/browser/dist
• INSTALL COMMAND&＃xff1a;npm install&&cd src/workbench/browser&&npm install

通过这个链接就可以访问你的专属 API 工具啦&＃xff01;

三、Serverless Funcions

1. 源码解析

api 文件夹下有一个名为 unit.js 的文件&＃xff0c;当我们部署到服务器时&＃xff0c;它就变成了一个 HTTP 接口&＃xff0c;一个文件一个接口&＃xff0c;接口地址就是 api/&＃xff0c;是不是简单粗暴~

Serverless Functions 让我们写接口和写纯函数一样简单。

我们只需要 exports 一个纯函数&＃xff0c;通过函数第一个入参 req 拿到请求体&＃xff0c;再通过第二个入参 res.end() 返回响应体&＃xff0c;就可以快速发布一个 API。

let _LibsFlowCommon &＃61; require(&＃39;../src/workbench/node/request/unit.js&＃39;);
let _LibsCommon &＃61; require(&＃39;../src/workbench/node/request/libs/common.js&＃39;);module.exports &＃61; (req, res) &＃61;> {console.log(&＃39;unit.js&＃39;, req.body);try {let data &＃61; req.body.data;data.env &＃61; _LibsCommon.parseEnv(data.env);new _LibsFlowCommon.core().main(data, (tmpInputReport, tmpInputHistory) &＃61;> {res.end(JSON.stringify(&＃39;i am response&＃39;));});} catch (e) {console.error(&＃39;unit.js&＃39;, e, req.body);}
};

2. 如何本地调试

Vercel 官方提供了 cli 工具

npm i -g vercel
vercel dev

剩下的跟着命令行指引配置完后就可以在本地调试 Serverless Functions 了。

四、作者的话

我是 Eoapi 的一名开发者&＃xff0c;demo 网站就是使用上面的步骤配置出来的&＃xff0c;如果大家对项目感兴趣&＃xff0c;欢迎大家持续关注我们项目&＃xff1a;https://github.com/eolinker/eoapi。

说实话我第一次配置的时候还是踩了不少坑&＃xff0c;但总体来说 Vercel 体验还是很顺畅的。

我现在基本上所有的网站都迁移到了 Vercel 做了部署。除了 Eoapi&＃xff0c;我还部署了我的官网&＃xff0c;一个抽奖程序&＃xff0c;很酷炫。

嘿嘿&＃xff0c;你也可以部署试试看&＃xff0c;作为检验自己是否掌握知识点的小作业。

Github 地址&＃xff1a;https://github.com/moshang-xc/lottery

五、参考资料

• Serverless(无服务)基础知识 - 掘金
• 三分钟了解 Serverless 是什么
• https://segmentfault.com/a/1190000041223777
• 什么是Serverless架构和FaaS函数即服务&＃xff1f;
• Download Vercel CLI – Vercel
• https://vercel.com/docs/concepts/functions/serverless-functions