使用 Heroku 和 mongoDB Atlas 免费托管 YApi

Posted on Edited on In

0. 背景

前端开发过程中，与后端约定接口标准之后，双方同时开始开发，可能会出现后端没有 Ready，但是前端已经需要使用接口的情况。这时候就需要 Fake 接口。有几种方式：

优点 缺点
1. 项目中使用 Fake Promise 方便快速 不能模拟真实网络请求，对代码有侵入，需要在 webpack 中配置路径替换或手动切换文件
2. 项目中使用 mockjs 等服务端方式启动自托管 mock server 方便快速，真实网络请求 增加项目体积，不利于多项目共享基础设施，耗费开发服务器性能
3. 使用单独的 mock server 真实网络请求，可集成后端接口测试，TS 代码模板等功能 需要花稍多时间维护接口

这里介绍一下使用第三种方式的一个实现方法：YApi，可以去这里体验。
YApi 是 node + mongoDB 项目，本篇介绍一下自己使用 Heroku 和 mongoDB Atlas 免费部署 YApi 的过程。

1. 注册帐号

https://cloud.mongodb.com/ 提供免费的 mongoDB 数据库服务
https://www.heroku.com/ 提供免费的 node 程序托管服务

2. 准备

2.1 建立数据库

登录 https://cloud.mongodb.com/ 创建 sandbox 实例。得到类似 

1
2
3
4
# <username> 为用户名
# <password> 为密码
# 修改结尾处 test => yapi
mongodb+srv://<username>:<password>@xxxx.mongodb.net/yapi?retryWrites=true

的连接字符串。

2.3 克隆代码

YApi 源码位于 https://github.com/YMFE/yapi 你可以 Fork 到你自己的仓库，然后克隆。

1
git clone git@github.com:YMFE/yapi.git

2.4 修改几行代码适应 Heroku 部署

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
cd yapi
# 这里使用最新版 1.7.0 ，如果担心最新版有问题也可以切换别的版本
# https://github.com/YMFE/yapi/releases
git checkout -b dev v1.7.0 

# 创建配置文件
cp ./config_example.json ./config.js

# 由于 YApi 项目使用 JSON 配置文件，而 JSON 中不能使用环境变量，所以我们这里改为使用 JS 配置文件
# 打开 config.js 在第一行 增加 module.exports = 
# 找到 db 段配置
#    添加 connecString 属性，值为 2.1 步得到的字符串
#    修改 user 属性值为 2.1 步的 用户名
#    修改 pass 属性值为 2.1 步的 密码

# 打开 server/yapi.js 文件 

# 修改以下行内容
const config = require('../../config.json');
# =>
const config = require('../config.js');

# 打开 ykit.config.js 
configPlugin = require('../config.json').plugins;
# =>
configPlugin = require('../config.js').plugins;

# 打开 server/utils/initConfig.js
let configPath = path.join(runtimePath, 'config.json');
# => 
let configPath = path.join(runtimePath, 'config.js');

# 修改日志路径，因为 Heroku 根目录为只读路径，不允许程序创建或写入
const WEBROOT_LOG = path.join(WEBROOT_RUNTIME, 'log');
=>
const WEBROOT_LOG = path.resolve(__dirname, 'log');

2.5 初始化数据库

1
2
3
4
5
npm install
npm run install-server
# 出现以下日志，即表示数据库初始化成功
log: mongodb load success...
初始化管理员账号成功,账号名："admin@admin.com"，密码："ymfe.org"

2.6 增加环境变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 打开 config.js
# 修改 port 节点：process.env.PORT
# 因为 Heroku 会提供一个端口用来做转发，应用程序必须通过环境变量获取这个端口并监听，否则应用无法启动

# 修改 db 节点到以下内容：
  "db": {
    "connectString": process.env.connectString,
    "servername": "127.0.0.1",
    "DATABASE": "yapi",
    "port": 27017,
    "user": process.env.connectUser,
    "pass": process.env.connectPass,
    "authSource": "yapi"
  },

git add .
git commit

3. 部署

3.1 创建项目

登录 https://dashboard.heroku.com/ 创建 app，例如 yapi-demo（已使用，请另外命名），创建完成之后来到项目页面：https://dashboard.heroku.com/apps/yapi-demo

3.2 配置环境变量

点击 Settings -> Reveal Config Vars
依次添加：

1
2
3
connectString: mongodb+srv://<username>:<password>@xxxx.mongodb.net/yapi?retryWrites=true
connectUser: admin
connectPass: xxxxx

3.3 推送代码

在项目主页点击 Deploy，根据提示安装 Heroku CLI 并登录。

1
2
3
4
5
6
# cd yapi
# 修改 package.json -> engines -> node 为：">= 7.6.0 < 11"
# 因为项目使用了 node-sass. node-sass 的 linux 支持到此版本。
heroku git:remote -a yapi-demo
git push heroku dev:master --force
# 等待服务器处理完成即可

3.4 验证部署

打开 https://yapi-demo.herokuapp.com/（当然，你要替换成你自己的应用名）。
首次加载可能很慢，有一个超大JS，需要加载一分钟左右（团队需要解决下）。
使用先前的用户名和密码登录即可体验。

你也可以使用 demo@demo.com/demo 登录YApi Demo 体验，请勿修改密码。