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資料，然後在跟後端聯調。最終的部署上線流程因為是第一次做，學到了很多，可能現在還是比葫蘆畫瓢的去配置各種東西，不太知道原理，但是最起碼入門了。相信接觸的新事物多了，以後會越來越熟練的。