Express+Vercel+Github部署自己的Mock服务

起因和目标

做了个小工具需要mock数据,但是又不想自己写或者安装mock对应插件,只是想要一个能够访问的url快速响应一些数据,然后发现了mockend.com/ 这个网站。

官网是可以选择github托管JSON schema去更新数据,但是要钱。于是想着照着这个原理应该能自己搭一个偶尔用用吧。

于是一顿操作,找了一下Vercel可以拉取github的代码做免费部署,虽然也有流量限制,但是偶尔用用应该也够,结合express+github+vercel应该可以满足基本的mock数据,express接口定义和编写也可以自己修改,实现接口定制化自由。

步骤

  1. Vercel官网用github注册账号
  2. 新建一个github仓库,名字可以取自己好记的,到时候会用于访问的url。
  3. 提交代码到github
  4. Vercel导入对应的github仓库,然后Deploy,我是直接把node_modules也提交了,所以deploy的时候不用写什么命令,如果没有node_modules的话,应该要执行一下install。

主要代码解析

  1. 代码结构

mock-schemas存放需要访问的json数据,因为用了json-schema-faker去生成,所以放的是适合json-schema-faker用的数据。

  1. 主要代码
    index.js做了简单的处理,按照mock-schemas的文件名去返回结果

当访问url和文件名匹配,会读取json,通过json-schema-faker生成模拟数据并返回。这个只是简单的例子,可以在这个基础上扩充,加入url参数和代码逻辑定义复杂的mock接口

改动和更新

任何对主分支的 push / commit,Vercel都会触发部署。所以git提交修改内容,就会自动更新部署。如果想优化,可以通过git action去优化部署更新流程,比如只在json变动的时候去更新部署,感兴趣的可以查查相关的资料。

Github Demo 链接

相关推荐
sixgod_h14 分钟前
Threejs源码系列- MathUtils(1)
前端·webgl
lichenyang45315 分钟前
从0开始的中后台管理系统-6(添加用户以及绑定角色给用户动态添加权限,以及在layout父路由组件去进行路径跳转判断)
前端
小高00716 分钟前
协商缓存和强缓存
前端·javascript·面试
用户479492835691517 分钟前
你真的很了解eslint吗?(代码检查工具的历史变革及底层原理)
前端
前端Hardy18 分钟前
HTML&CSS&JS:超酷炫的一键登录页面
前端·javascript·css
七十二時_阿川21 分钟前
React上下文之useContext
前端·程序员
sorryhc29 分钟前
CSR秒开有可能么?(附AI驱动学习实践推理过程)
前端·javascript·ai编程
龙井>_<42 分钟前
vue项目封装axios请求,支持判断当前环境及判断token是否过期等等(详细教程,可复制粘贴代码)
前端·javascript·vue.js·前端框架
Hashan1 小时前
微信小程序:实现证件OCR识别
前端·vue.js·微信小程序
vaelcy1 小时前
css3实现登录框动画特效效果
前端·css