[技術項目3]--流量回放項目總結

1、背景

最近做了一個測試項目-流量回放。我主要負責前端的工作。

 

該項目主要功能是回放線上的接口數據，用以進行自動化測試，畢竟線上的數據大，場景多。拿到這批數據測試用例后，無論是用來壓測還是用來進行接口自動化價值都是很大的

 

流量回放的價值：通過記錄線上流量，在開發或者測試環境回放，來發現系統是否能夠正常運行，降低代碼變動整體系統帶來的風險。

 

 

2、技術背景

• 后端用的springboot，前端vue
• 后端主要是從es中讀取數據，將接口的url、入參數、出參數等需要的數據，進行過濾，放到對應的數據庫中。然后組裝對應接口的用例，生成最終的測試用例，將數據流出供下面業務場景使用
• 前端搭建測試平台，主要功能有項目管理：以項目和業務做區分，管理項目中的接口；用例執行：單條多條用例執行；任務管理：建立任務，以任務的維度進行管理對應接口的用例

 

流程圖

 

 

3、主要功能展示

 

 

主要分為3大塊：接口庫、流量回放、系統配置

3.1、接口庫

以項目的維度將接口分類，一個項目下多個接口，一個接口對應多條用例【該功能是對拿到的數據進行的延伸功能】

最終頁面是一個接口對應的用例頁面。可以對單用例執行，單接口多用例執行，對該接口的用例進行增刪改查，可批量導入用例

 

3.2、流量回放

這個是主要的功能，以創建計划的維度將計划與接口關聯。當然每個接口都有用例的屬性，自然三者進行了關聯

• 計划：創建了某個計划就可以選擇關聯多個接口，可以將該計划整個運行，可以單個接口運行，當然也可以一個接口下的某個用例運行。最終生成這個計划的報告。ps該計划的報告肯定是多條，每個維度運行一次就生成一次報告。報告中有該計划每次任務維度的報告。有整個計划的報告

 

• 計划下接口：就是一個計划可以關聯多個接口。每個接口進行更新，就是定時拉取該接口下從es拿到的回放的接口數據。

 

• 接口下用例：這個就是對單個接口進行的操作。運行用例時因為有對應操作，所以可以手動設置期望結果，如code=100等；可以自動設置期望結果：將上次運行的接口設置為期望結果；因為有些接口是post請求，對一些一次性操作的參數需要修改下，如參數中的郵箱等，所以設置了批量修改參數，對該接口下用例進行批量替換參數；進行比對的時候有些返回接口不需要比對，如時間等，所以可以設置忽略項，運行時比對就忽略了該項；單個接口可以編輯它的參數域名地址期望結果；

 

3.3、系統配置

就是為接口運行進行的輔助功能設置

• 用戶列表：不用說了，就是該項目的用戶表
• 環境配置：設置的環境信息，對應有環境的header

 

4、部署總結

 

最終前后端都完成后，進行的服務器的部署，將項目放到服務器上，在jenkins上部署了對應的項目，以便有代碼更新時，可以方便部署

 

4.1、Jenkins配置項目

配置對應的git地址；配置對應的運行腳本；運行完成后將對應的包放到服務器上固定的位置A（npm run build:prod后打成一個dist的文件夾，需要將文件夾壓縮成dist.zip的包）這個備注中說明下如何打包成壓縮文件

rm -rf /neworiental/latest/aliceVue/* && unzip -d /neworiental/latest/aliceVue/ /neworiental/backupalice/dist.zip

　　

4.2、服務器配置

在上一步驟中的A位置創建文件夾，放項目的包

在/neworienta目錄創建backupalice目錄

在/neworiental/latest/創建aliceVue目錄

 

 

設置nginx：

cd /usr/local/nginx/conf/site

vim alice.conf

 

====前端nginx====
server {
    listen 80;
    server_name   alice.xdf.cn;

   location /alice {
            alias /neworiental/latest/aliceVue/;
            index index.html;
            try_files $uri $uri/ /alice/index.html;
    }

    error_page 500 502 503 504 /50json.html;
    location = /50json.html {
        root   /usr/share/nginx/html;
    }

    location ~* ^/prod-api/(.*) {
        proxy_set_header       Host $host;
        proxy_set_header  X-Real-IP  $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_connect_timeout 600;
        proxy_send_timeout 600;
        proxy_read_timeout 600;
        if ($request_uri ~ /prod-api/(.+))
        {
            set $p1 $1;
        }

        proxy_pass http://alice-api/alice/$p1;

   }

}



后端配置server
upstream alice-api {
        server 127.0.0.1:9898;
        keepalive 1000;
}

　　

重啟nginx

../../sbin/nginx -s reload

5、前端打包后，自動生成dist.zip壓縮包

vue項目運行后生成dist.zip壓縮文件

 

5.1、下載插件

filemanager-webpack-plugin

npm install filemanager-webpack-plugin --save-dev

 

5.2、配置使用

 

老版本在webpack.prod.js文件下

新版本在vue.config.js文件下

 

上方引用：

const FileManagerPlugin = require('filemanager-webpack-plugin')

在configureWebpack中增加plugins。如紅框中所示

 

 

 

 

6、項目總結

這算是完整的第二個項目，第一個項目缺少了部署這一步，這個項目從最開始到上線每個流程都參與進來了。在這個項目中前后端不是一個人，更多的需要前端先去mock數據，然后在跟后端聯調。最終的部署上線流程因為是第一次做，學到了很多，可能現在還是比葫蘆畫瓢的去配置各種東西，不太知道原理，但是最起碼入門了。相信接觸的新事物多了，以后會越來越熟練的。