使用 docker 运行 easy-mock

前言

有时候,我们写前端页面或者小程序的时候,如果有数据,我们就可以更好的进行开发,但是实际场景中,前后端是并行开发的,并没有现成的后端接口给我们用,这时候 mock 假数据的作用有显得十分有必要了。

1. 常见的 Mock 方式

日常开发过程中,有以下几种常见的 Mock 假数据的方式:

  1. 将模拟数据直接写在代码里
  2. 利用 JavaScript 拦截请求
  3. 利用 Charles、 Fiddler 等代理工具拦截请求

虽然这几种方式都很 实用 但是却存在以下几点问题:

  1. 配置、编写繁琐
  2. mock 的数据不够真实
  3. 加上容易去除难

2. 什么是 Easy Mock

Easy Mock 是一个可视化,并且能快速生成 模拟数据 的持久化服务。

官方网站:https://www.easy-mock.com/

特性:

  • 支持接口代理
  • 支持快捷键操作
  • 支持协同编辑
  • 支持团队项目
  • 支持 RESTful
  • 支持 Swagger | OpenAPI Specification (1.2 & 2.0 & 3.0)
    • 基于 Swagger 快速创建项目
    • 支持显示接口的入参与返回值
    • 支持显示实体类
  • 支持灵活性与扩展性更高的响应式数据开发
  • 支持自定义响应配置(例:status/headers/cookies)
  • 支持 Mock.js 语法
  • 支持 restc 方式的接口预览

3. 搭建 Easy Mock

因为 Easy Mock 依赖 Redis 和 MongoDB,因此本地环境使用 docker-compose 来搭建 Easy Mock 应该算是最佳实践了。

3.1. 安装 docker-compose

官方文档:https://docs.docker.com/compose/install/

  1. 首先你得确定拥有 docker 环境,如果你是 Windows / Mac 用户,那么安装客户端,就会自带 docker-compose 了

  2. 因为本次我们是在服务器搭建,当前服务器系统是 CentOS 7,所以我们需要自行安装 docker-compose。

  3. 运行如下命令,下载当前稳定版本的 docker-compose

    1
    sudo curl -L "https://github.com/docker/compose/releases/download/1.24.1/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
  4. 修改文件权限为可执行文件

    1
    sudo chmod +x /usr/local/bin/docker-compose
  5. 验证是否安装成功

    1
    2
    3
    4
    5
    $ docker-compose version                                                                             
    docker-compose version 1.24.1, build 4667896b
    docker-py version: 3.7.3
    CPython version: 3.6.8
    OpenSSL version: OpenSSL 1.1.0j 20 Nov 2018

3.2. 编写 docker-compose.yml 文件

注意看文件中的注释信息,有一处 npm start 修改为 npm run dev,是因为我看了下 easy-mock 的源码 package.json 中 npm start 命令跑的是 production 模式,需要额外配置,为了简单起见,我们使用 npm run dev 直接运行 dev 模式

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
37
version: '3'

services:
mongodb:
image: mongo:3.4.1
volumes:
# /apps/easy-mock/data/db 是数据库文件存放地址,根据需要修改为本地地址
- '/apps/easy-mock/data/db:/data/db'
networks:
- easy-mock
restart: always

redis:
image: redis:4.0.6
command: redis-server --appendonly yes
volumes:
# /apps/easy-mock/data/redis 是 redis 数据文件存放地址,根据需要修改为本地地址
- '/apps/easy-mock/data/redis:/data'
networks:
- easy-mock
restart: always

web:
image: easymock/easymock:1.6.0
# easy-mock 官方给出的文件,这里是 npm start,这里修改为 npm run dev
command: /bin/bash -c "npm run dev"
ports:
- 7300:7300
volumes:
# 日志地址,根据需要修改为本地地址
- '/apps/easy-mock/logs:/home/easy-mock/easy-mock/logs'
networks:
- easy-mock
restart: always

networks:
easy-mock:

3.3. 启动 Easy Mock

在 docker-compose 文件目录下,运行如下命令:

1
$ docker-compose up -d

4. 配置 nginx

4.1. 编写 nginx 配置文件

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
server {
listen 443;
server_name mock.xkcoding.com; # 监听的域名

client_max_body_size 5G; # 突破上传大文件限制
ssl on;
ssl_certificate xxxxxx.pem; # https 的 pem 文件
ssl_certificate_key xxxxxx.key; # https 的 key 文件

ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;

location / {
proxy_pass http://localhost:7300;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_buffering off;
}
}
server{
listen 80;
server_name mock.xkcoding.com; # 监听的域名
rewrite ^(.*)$ https://$host$1 permanent; # 强制 非https 跳转到 https
}

4.2. 测试配置文件

1
2
3
$ nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

4.3. 重启 nginx

1
$ nginx -s reload

5. DNS 解析

前往云服务器对配置的域名做 DNS 解析到服务器,就大功告成了~

6. 参考

  • easy mock docker 官方仓库
  • easy mock 官方仓库
-------------本文结束  感谢您的阅读-------------
xkcoding wechat
欢迎来我的公众号「xkcoding小凯扣丁」逛逛
o(╯□╰)o 赞助一杯咖啡 ~~