使用 docker 运行 easy-mock

前言

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

一、常见的 Mock 方式

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

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

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

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

二、什么是 Easy Mock

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

官方网站：https://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] 方式的接口预览

三、搭建 Easy Mock

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

1、安装 docker-compose

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

(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

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、启动 Easy Mock

在 docker-compose 文件目录下，运行如下命令：

docker-compose up -d

四、配置 nginx

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
}

2、测试配置文件

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

3、重启 nginx

nginx -s reload

五、DNS 解析

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

六、处理部分资源请求404的问题

cp /home/easy-mock/easy-mock/node_modules/restc/faas/index.html /home/easy-mock/easy-mock/node_modules/restc/faas/index.html.bak
head -n 20 /home/easy-mock/easy-mock/node_modules/restc/faas/index.html
sed -i "s|https://github.elemecdn.com/highlightjs/cdn-release/9.8.0/build/styles/default.min.css|https://cdn.bootcdn.net/ajax/libs/highlight.js/9.8.0/styles/default.min.css|g" /home/easy-mock/easy-mock/node_modules/restc/faas/index.html
sed -i "s|https://github.elemecdn.com/codemirror/CodeMirror/5.19.0/lib/codemirror.css|https://cdn.bootcdn.net/ajax/libs/codemirror/5.19.0/codemirror.css|g" /home/easy-mock/easy-mock/node_modules/restc/faas/index.html
sed -i "s|https://github.elemecdn.com/codemirror/CodeMirror/5.19.0/theme/material.css|https://cdn.bootcdn.net/ajax/libs/codemirror/5.19.0/theme/material.css|g" /home/easy-mock/easy-mock/node_modules/restc/faas/index.html
sed -i "s|https://github.elemecdn.com/highlightjs/cdn-release/9.8.0/build/highlight.min.js|https://cdn.bootcdn.net/ajax/libs/highlight.js/9.8.0/highlight.min.js|g" /home/easy-mock/easy-mock/node_modules/restc/faas/index.html
sed -i "s|https://github.elemecdn.com/uglifyjs!codemirror/CodeMirror/5.19.0/lib/codemirror.js|https://cdn.bootcdn.net/ajax/libs/codemirror/5.19.0/codemirror.js|g" /home/easy-mock/easy-mock/node_modules/restc/faas/index.html
sed -i "s|https://github.elemecdn.com/uglifyjs!codemirror/CodeMirror/5.19.0/mode/javascript/javascript.js|https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/mode/javascript/javascript.js|g" /home/easy-mock/easy-mock/node_modules/restc/faas/index.html
sed -i "s|https://github.elemecdn.com/uglifyjs!codemirror/CodeMirror/5.19.0/addon/display/autorefresh.js|https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/addon/display/autorefresh.js|g" /home/easy-mock/easy-mock/node_modules/restc/faas/index.html
head -n 20 /home/easy-mock/easy-mock/node_modules/restc/faas/index.html

然后重启容器。

原文链接：使用 docker 运行 easy-mock

转载仅为方便学习查看，一切权利属于原作者，本人只是做了整理和排版，如果带来不便请联系我删除。

如果觉得我的文章对你有用，请随意赞赏

扫一扫支付