RAP2 详细部署、操作指南

亦凉 2022-01-23 08:29 1877阅读 0赞

# RAP2 详细部署、操作指南 #

### 文章目录 ###

*  RAP2 详细部署、操作指南
 *   *  什么是RAP2
     *  项目地址
     *  前后端部署指南
     *   *  后端
         *   *  安装node
             *  安装mysql
             *  安装redis
             *  下载源码
             *  修改配置文件
             *  MySQL创建schema
             *  编译
             *  初始化数据库
             *  启动后端
             *  检查是否启动成功
             *  查看后端日志
         *  前端
     *  RAP2操作指南
     *   *  账号系统
         *  权限系统
         *  API管理

## 什么是RAP2 ##

RAP通过GUI工具帮助WEB工程师更高效的管理接口文档，同时通过分析接口结构自动生成Mock数据、校验真实接口的正确性，使接口文档成为开发流程中的强依赖。有了结构化的API数据，RAP可以做的更多，而我们可以避免更多重复劳动。

基于RAML的接口定义、文档生成、Mock Server完成了定义和使用的分离，通过一套规范完成的接口定义，可以用不同的工具得到适应不同API管理系统的输出，有更多的可能性，同时保持了核心定义不变。

RAP较之于RAML，前者更加集中，所有的定义、文档、mock都在同一个服务中完成，并且实时生效，方便快捷，如果只考虑方便易用，RAP是更好的选择，而RAML显得更加繁琐，更适合于公开的接口定义，方便在各个系统之间流转。

## 项目地址 ##

RAP地址：[https://github.com/thx/rap][https_github.com_thx_rap] ，但目前RAP2已经发布，RAP已经停止维护。

RAP2前后端分离，因此RAP2有两个地址：后端[https://github.com/thx/rap2-delos][https_github.com_thx_rap2-delos] 前端[http://github.com/thx/rap2-dolores][http_github.com_thx_rap2-dolores]

## 前后端部署指南 ##

前后端部署在同一台机器上，所需环境如下：

*  Node.js 8.9.4+
 *  npm 6.9.0+
 *  MySQL 5.7+
 *  Redis 4.0+

已有系统环境：

*  CentOS 7.2
 *  Git 1.8.3.1

### 后端 ###

#### 安装node ####

假设nodejs已安装，这里nodejs安装不做记录，安装参考：[https://www.cnblogs.com/liangjiongyao/p/9120535.html][https_www.cnblogs.com_liangjiongyao_p_9120535.html]

node和npm验证：

> node -v
    v8.11.3
     
    > npm -v
    6.9.0

如果node镜像速度太慢，建议使用taobao的cnpm代替npm，使用方法：[https://npm.taobao.org/][https_npm.taobao.org]

后面就可以直接使用cnpm xxx代替npm xxx，当然这两个命令是等价的，只不过cnpm使用的是tabao镜像源，速度更快。

#### 安装mysql ####

假设mysql已安装好，或者使用已有的mysql服务，这里使用已有的mysql服务。

#### 安装redis ####

假设redis已安装好，或者使用已有的redis服务，这里使用已有的redis服务。

#### 下载源码 ####

git clone https://github.com/thx/rap2-delos.git

#### 修改配置文件 ####

进入目录：rap2-delos/src/config

目录文件如下：

├── config.dev.ts  
├── config.local.ts  
├── config.prod.ts  
└── index.ts

修改三个config文件的mysql数据库配置和redis配置：

serve: { 
       port: 8080,
    },
    ...
    db: { 
       dialect: 'mysql',
       host: '192.168.20.61',
       port: 3306,
       username: 'root',
       password: 'root',
       database: 'RAP2_DELOS_APP',
       pool: { 
         max: 5,
         min: 0,
         idle: 10000,
       },
       logging: false,
     },

其他两个配置文件也修改对应的db配置，redis配置只需修改prod，因为安装在本机，所以local和dev的redis配置可以不用修改。

端口默认是80，这里修改为8080。

之前尝试过只修改prod配置，但是create-db好像不成功，为保证100%成功，直接改三个文件。

其中prod的配置略有区别但道理都是一样：

serve: { 
        port: (process.env.EXPOSE_PORT && parseInt(process.env.EXPOSE_PORT)) || 8080,
    },
    ...
    db: { 
        dialect: 'mysql',
        host: process.env.MYSQL_URL || '192.168.20.61',
        port: (process.env.MYSQL_PORT && parseInt(process.env.MYSQL_PORT)) || 3306,
        username: process.env.MYSQL_USERNAME || 'root',
        password: process.env.MYSQL_PASSWD || 'root',
        database: process.env.MYSQL_SCHEMA || 'RAP2_DELOS_APP',
        pool: { 
            max: 80,
            min: 0,
            idle: 20000,
            acquire: 20000,
        },
        logging: false,
    },
    redis: { 
        host: process.env.REDIS_URL || 'localhost',
        port: (process.env.REDIS_PORT && parseInt(process.env.REDIS_PORT)) || 6379
    }

#### MySQL创建schema ####

在配置的mysql数据库中创建rap2需要的schema：

CREATE DATABASE IF NOT EXISTS RAP2_DELOS_APP DEFAULT CHARSET utf8 COLLATE utf8_general_ci;

#### 编译 ####

# 切换到根目录
    cd ../..
    # 安装依赖包
    npm install
    # 安装PM2
    # 可能会出现什么gcc版本过低等问题，出现后请自行升级
    npm install -g pm2
    # 安装TypeScript编译包
    npm install -g typescript
    # 编译
    # 修改了项目的代码或配置文件之后一定重新编译，不然修改不起作用
    # 如果报错说没有权限创建文件夹，可以在后面加上--unsafe-perm参数
    npm run build

#### 初始化数据库 ####

# 初始化数据库
    # 确保数据库可连，控制台会打印初始化内容和进度
    npm run create-db
    # 检查
    npm run check

#### 启动后端 ####

# 启动
    npm run start
    # 控制台输出成功

#### 检查是否启动成功 ####

访问服务器8080端口，出现如下信息表明启动成功：  
![在这里插入图片描述][20190603111348613.png]

#### 查看后端日志 ####

有时前端报错，需要查看后端日志，操作如下：

# 查询pm2进程
    pm2 ls
    ┌──────────────────┬────┬─────────┬──────┬───────┬────────┬─────────┬────────┬──────┬───────────┬──────┬──────────┐
    │ App name         │ id │ version │ mode │ pid   │ status │ restart │ uptime │ cpu  │ mem       │ user │ watching │
    ├──────────────────┼────┼─────────┼──────┼───────┼────────┼─────────┼────────┼──────┼───────────┼──────┼──────────┤
    │ rap-server-delos │ 0  │ 1.0.0   │ fork │ 15499 │ online │ 0       │ 8h     │ 0.2% │ 35.7 MB   │ root │ disabled │
    └──────────────────┴────┴─────────┴──────┴───────┴────────┴─────────┴────────┴──────┴───────────┴──────┴──────────┘
    # 拿到后端的pm2 id 为0
    # 查看实时日志
    pm2 logs 0
    # 日志将会以类似tail的方式打开，再次操作即可看见错误信息

### 前端 ###

前端和后端启动过程差不多：

# 获取源代码
    git clone https://github.com/thx/rap2-dolores.git
     
    # 修改配置文件
    cd rap2-dolores/src/config
    # 文件目录如下
    ├── config.dev.js
    ├── config.prod.js
    └── index.js
    # 修改两个配置文件的如下部分
    serve: 'http://192.168.5.224:8080'
    # 注意ip不能写localhost，即使是在同一个机器上写的前端和后端
     
    # 回到根目录
    cd ../..
    # 安装依赖包
    npm install
    # 编译
    # 修改了项目的代码或配置文件之后一定重新编译，不然修改不起作用
    # 如果报错说没有权限创建文件夹，可以在后面加上--unsafe-perm参数
    npm run build
     
    # 安装serve
    npm install -g serve 
    # 启动
    # 其中./build是编译生成的文件路径，8090是前端访问的端口
    serve -s ./build -p 8090
    # 这里启动后会阻塞会话，可以使用nohup，并且指定全路径启动
    nohup serve -s /root/rap/build -p 8090 &

访问服务器8090端口：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE_size_16_color_FFFFFF_t_70]

## RAP2操作指南 ##

### 账号系统 ###

可直接申请账号，申请账号后可登陆。

### 权限系统 ###

*  登陆后可查看所有公开仓库（那些稀奇古怪的仓库是初始化数据，到时可以用管理员账户删除）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE_size_16_color_FFFFFF_t_70 1]但仅仅有查看查库列表的权限，如果需要查看仓库内容的权限，请继续往下看
 *  登陆后可创建仓库
 *  自己创建的仓库只能自己修改，可以编辑仓库添加成员，加入的成员可以修改和添加接口  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE_size_16_color_FFFFFF_t_70 2]
 *  可以创建团队，然后创建团队的API仓库，这样团队里的人就都有权限修改API  
    ![在这里插入图片描述][20190603112745452.gif]

### API管理 ###

api可以随时创建、修改、删除，并且保存后会mock接口会马上生效。mock-server基于mockjs，接口的入参和出参都可以根据一些特殊规则来生成：

*  创建API  
    ![在这里插入图片描述][20190603112834634.gif]
 *  定义入参出参：  
    入参有parameter和body两种方式，mock后，并不会检查参数是否满足生成规则，只会检查必填参数是否填写，生成规则适用于随机生成一个参数用于测试API：  
    ![在这里插入图片描述][20190603112916341.gif]
 *  入参和出参规则
    
    <table> 
     <tbody> 
      <tr> 
       <th>类型</th> 
       <th>生成规则</th> 
       <th>初始值</th> 
       <th>导入写法</th> 
       <th colspan="1">描述</th> 
       <th colspan="1">举例</th> 
      </tr> 
      <tr> 
       <td>string</td> 
       <td>min-max</td> 
       <td>任意字符串</td> 
       <td>{"name|min-max": "xyz"}</td> 
       <td colspan="1">名称为name的属性，其值为“xyz”字符串重复n次，min&lt;=n&lt;=max</td> 
       <td colspan="1"><img width="100" src="https://img-blog.csdnimg.cn/20190603114905560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"></td> 
      </tr> 
      <tr> 
       <td>count</td> 
       <td>任意字符串</td> 
       <td>{"name|count": "xyz"}</td> 
       <td colspan="1">名称为name的属性，其值为“xyz”重复count次</td> 
       <td colspan="1"><img width="100" src="https://img-blog.csdnimg.cn/20190603114945435.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </td> 
      </tr> 
      <tr> 
       <td>number</td> 
       <td>+1</td> 
       <td>任意整数</td> 
       <td>{"name|+1": value}</td> 
       <td colspan="1">作为array属性中某个object对象的属性name，列表中对象的该属性会从value开始自增</td> 
       <td colspan="1"><img width="100" src="https://img-blog.csdnimg.cn/20190603115012429.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </td> 
      </tr> 
      <tr> 
       <td colspan="1">min-max</td> 
       <td colspan="1">任意数字，可以是小数</td> 
       <td colspan="1">{"name|min-max": 5}</td> 
       <td colspan="1">名称为name的属性，其值为min-max的随机整数</td> 
       <td colspan="1"><img width="100" src="https://img-blog.csdnimg.cn/2019060311504561.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </td> 
      </tr> 
      <tr> 
       <td colspan="1">min-max.dmin-dmax</td> 
       <td colspan="1">任意数字，可以是小数</td> 
       <td colspan="1">{ 'name|min-max.dmin-dmax': 1.2} </td> 
       <td colspan="1">名称为name的属性，其值为整数部分为min-max，小数部分保留dmin-dmax位的小数 其中小数部分或整数部分可以固定 </td> 
       <td colspan="1"><p><img width="100" src="https://img-blog.csdnimg.cn/20190603115130532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </p> <p><img width="100" src="https://img-blog.csdnimg.cn/20190603115200114.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </p></td> 
      </tr> 
      <tr> 
       <td> boolean</td> 
       <td colspan="1">1</td> 
       <td colspan="1">true/false</td> 
       <td colspan="1">{"name|1": true}</td> 
       <td colspan="1">名称为name的属性，其值为true/false的概率都是1/2</td> 
       <td colspan="1"><img width="100" src="https://img-blog.csdnimg.cn/20190603115229841.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </td> 
      </tr> 
      <tr> 
       <td colspan="1">min-max</td> 
       <td colspan="1">true/false</td> 
       <td colspan="1">{"name|min-max": value}</td> 
       <td colspan="1">名称为name的属性，其值为 value 的概率是 min / (min + max) 值为 !value 的概率是 max / (min + max) </td> 
       <td colspan="1"><img width="100" src="https://img-blog.csdnimg.cn/20190603115257583.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </td> 
      </tr> 
      <tr> 
       <td>object</td> 
       <td colspan="1">count</td> 
       <td colspan="1">&nbsp;</td> 
       <td colspan="1">{"name|count": {"key": value}}</td> 
       <td colspan="1">名称为name的属性，其值为对象中任取count个属性组成的新对象</td> 
       <td colspan="1"><img width="100" src="https://img-blog.csdnimg.cn/20190603115322827.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </td> 
      </tr> 
      <tr> 
       <td colspan="1">min-max</td> 
       <td colspan="1">&nbsp;</td> 
       <td colspan="1">{"name|min-max": {"key": value}}</td> 
       <td colspan="1">名称为name的属性，其值为对象中任取min-max个属性组成的新对象</td> 
       <td colspan="1"><img width="100" src="https://img-blog.csdnimg.cn/20190603115423636.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </td> 
      </tr> 
      <tr> 
       <td>array</td> 
       <td colspan="1">min-max</td> 
       <td colspan="1">&nbsp;</td> 
       <td colspan="1">{"name|min-max": [{"key": value}]} </td> 
       <td colspan="1">名称为name的属性，其值为数组中对象重复min-max次</td> 
       <td colspan="1"><img width="100" src="https://img-blog.csdnimg.cn/20190603115450237.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </td> 
      </tr> 
      <tr> 
       <td colspan="1">count</td> 
       <td colspan="1">&nbsp;</td> 
       <td colspan="1">{"name|count": [{"key": value}]} </td> 
       <td colspan="1">名称为name的属性，其值为数组中对象重复count次</td> 
       <td colspan="1"><img width="100" src="https://img-blog.csdnimg.cn/20190603115518700.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </td> 
      </tr> 
      <tr> 
       <td colspan="1">function</td> 
       <td colspan="1">&nbsp;</td> 
       <td colspan="1">函数体</td> 
       <td colspan="1">{"name": function(){}}</td> 
       <td colspan="1">名称为name的属性，其值为执行函数 function返回值 函数的上下文为属性 'name' 所在的对象</td> 
       <td colspan="1"><img width="100" src="https://img-blog.csdnimg.cn/20190603115551849.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </td> 
      </tr> 
      <tr> 
       <td colspan="1">regexp</td> 
       <td colspan="1">&nbsp;</td> 
       <td colspan="1">/regexp/</td> 
       <td colspan="1">{"name": /regexp/}</td> 
       <td colspan="1">名称为name的属性，其值为满足regexp正则表达式的任意值</td> 
       <td colspan="1"><img width="100" src="https://img-blog.csdnimg.cn/20190603115613794.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </td> 
      </tr> 
      <tr> 
       <td>占位符(string)</td> 
       <td colspan="1">&nbsp;</td> 
       <td colspan="1">@placeholder_name</td> 
       <td colspan="1">{"name": "@placeholder_name"}</td> 
       <td colspan="1">名称为name的属性，其值为placeholder_name函数随机生成的值生成</td> 
       <td colspan="1"><img width="100" src="https://img-blog.csdnimg.cn/20190603115641911.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE,size_16,color_FFFFFF,t_70"> </td> 
      </tr> 
      <tr> 
       <td colspan="5">更多占位符请参考mockjs文档 <a href="http://mockjs.com/0.1/#Mock.Random" rel="nofollow">http://mockjs.com/0.1/#Mock.Random</a> </td> 
      </tr> 
     </tbody> 
    </table>

*  导入功能：  
    导入时，属性值不能为null，否则点击提交API会卡住，查看后台日志已报错，所有属性都不支持null值，即使导入成功，提交编辑的时候也会卡住（F12查看network已经失败，页面不会有明显提示）  
    ![在这里插入图片描述][20190603115932560.gif]

[https_github.com_thx_rap]: https://github.com/thx/rap
[https_github.com_thx_rap2-delos]: https://github.com/thx/rap2-delos
[http_github.com_thx_rap2-dolores]: http://github.com/thx/rap2-dolores
[https_www.cnblogs.com_liangjiongyao_p_9120535.html]: https://www.cnblogs.com/liangjiongyao/p/9120535.html
[https_npm.taobao.org]: https://npm.taobao.org/
[20190603111348613.png]: /images/20220123/edb9c5a98bd74b02a6d0e8df813fd1ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE_size_16_color_FFFFFF_t_70]: /images/20220123/3d0f903dd0854adcb0d072f5330dca74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE_size_16_color_FFFFFF_t_70 1]: /images/20220123/cbf38e18ced344d4832b5f7ed0501010.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NMX1lE_size_16_color_FFFFFF_t_70 2]: /images/20220123/6f7de64774874bd2964f180d46ec96a8.png
[20190603112745452.gif]: /images/20220123/28567f93034e4b5ea2647c00bca19bce.png
[20190603112834634.gif]: /images/20220123/6f905d20d8b6482db6b1771fc165d18d.png
[20190603112916341.gif]: /images/20220123/d5cc651230ae4c5cad48082ffb1f2318.png
[20190603115932560.gif]: /images/20220123/354202dbacac47b9a694b294a7916930.png