首发于xkcoding
使用 docker 运行 easy-mock

使用 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/www.easy-mock.com

特性:

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

3. 搭建 Easy Mock

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

3.1. 安装 docker-compose

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

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

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

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

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. 修改文件权限为可执行文件

sudo chmod +x /usr/local/bin/docker-compose

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 模式
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 文件目录下,运行如下命令:

$ docker-compose up -d

4. 配置 nginx

4.1. 编写 nginx 配置文件

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. 测试配置文件

$ 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

$ nginx -s reload

5. DNS 解析

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

6. 参考

  • easy mock docker 官方仓库[7]
  • easy mock 官方仓库[8]

参考资料

[1] Swagger: swagger.io/

[2] 1.2: github.com/OAI/OpenAPI-

[3] 2.0: github.com/OAI/OpenAPI-

[4] 3.0: github.com/OAI/OpenAPI-

[5] Mock.js: mockjs.com/

[6] restc: github.com/ElemeFE/rest

[7] easy mock docker 官方仓库: github.com/easy-mock/ea

[8] easy mock 官方仓库: github.com/easy-mock/ea

编辑于 2019-12-09

文章被以下专栏收录