流量回放系統的設計與實現--流量錄製模組

背景

    網際網路應用提供服務，與使用者的操作產生互動，其行為產生的流量蘊含著許多可挖掘的價值，如效能分析、資料對比、行為分析等等。使用者流量就如同是現實世界的石油，由其中我們可以提煉的演化的用法非常多。
    本系列從軟體測試角度對測試人員的流量展開了應用設計，形成一個集流量錄製、流量回放、實時對比、流量用例編輯、使用者管理於一體的流量管理平臺，以提高測試工作效率，多方面的驗證軟體產品質量。

    本系統採用前後端分離架構，由於系統架構複雜，本文僅就 流量錄製 模組的設計與實現，做分析講解，其它模組將在後續文章中拆分講述。

架構設計

實現效果

錄製任務建立，代理並監控日誌：

根據流量生成用例：

功能設計

流量錄製模組主要包含的功能是：

• 任務資訊列表
• 建立錄製任務
• 修改任務資訊
• 執行任務
• 實時檢視流量日誌
• 檢視詳情資訊
• 自定義生成流量用例並儲存
• 用例列表
• 用例詳情、編輯

    系統所有的列表和詳情資料，都離不開“增、刪、改、查”4個介面，系統的刪除目前都是邏輯刪除，通過置狀態值來控制顯示，以備後續的資料回覆和問題追蹤。
    其中的比較特殊的是 實時流量日誌展示 功能，由於http介面的非同步特性，很難保證日誌資料的實時性和序列化。因此這裡採用的websocket長連線為主，http介面為輔的雙重保證。也是得益mitmproxy專案的開源，我結合系統api，對其介面方法進行了二次自定義開發，以適應本系統的資料需求，保持資料的準確性。

問題與解決方案

一、多工不同的配置需求如何隔離？

解決方案：
在系統首次啟動前，需先執行已經封裝的DockerFile，建立我們所需的映象。系統通過docker service，根據任務配置的資訊（host、代理等），建立docker容器。實際此時的docker映象，已經封裝了容器執行時所需的工具和基本的配置。每個容器建立掛載在各自獨立的埠下，以達到隔離。

二、如何獲取實時流量日誌？

解決方案：
容器中的mitmproxy有多種啟動方式，各有不同的使用場景，其中mitmweb方式啟動的代理會有一個socket服務，通過對該介面的自定義開發，讓其支援我們的跨域連線，並解析其報文資訊，再通過前端渲染，即可達到實時日誌的展現功能。

三、日誌太多介面卡死怎麼辦？

解決方案：
日誌內容大小最好根據實際的使用場景做限制，同時前端採用虛擬列表，只渲染在可視區域及少量即將可視的DOM資料，根據資料長度計算容器的高度。可以自己寫元件去建立、銷燬Dom，本系統中使用的是結合react-virtualized和antd的virtualizedtableforantd4元件，這樣做到日誌展示模組的穩定與效能優化。

四、流量生成用例時，資料量很大怎麼處理？

解決方案：
對於大量資料的錄製用例，在生成用例時，會根據勾選的流量ID，通過請求傳值給自定義的dump介面，生成可以用於回放的dump檔案並儲存。同時為了便於前臺展示，和後續的編輯，流量需要入庫到用例表。資料量超過限制大小時，後臺會捨棄部分冗餘欄位值，切片入庫，保證系統的穩定性。

五、https流量如何處理？

解決方案：
https流量需要通過安裝mitmproxy的中間人證照，才能解析獲取。這裡有個注意點，安卓移動裝置6.0後，無法通過偽造證照去解析https。簡單的做法是，拿到伺服器證照，用openssl生成pem證照。在系統中針對專案進行pem證照的配置，當該專案的代理啟動時，以此證照去解析指定域名的https請求，這樣就是解決所有來源請求的https資料了。

核心程式碼實現

本功能模組的核心部分是圍繞著容器管理指令碼，進行資料準備、配置管理和容器管理。

前端虛擬表元件設計

import React, { useRef, useEffect, useMemo } from 'react';
import { Table } from 'antd';
import { useVT } from 'virtualizedtableforantd4';

const MyRow = React.forwardRef((props, ref) => {
  const { children, ...rest } = props;
  return <tr {...rest} ref={ref}>{children}</tr>;
});
function CustomRowsHooks(props) {
  const columns = useRef(props.columns);
  const [VT, setVT] = useVT(() => ({ scroll: { y: 600 }, debug: true }));
  useMemo(() => setVT({ body: { row: MyRow } }), [setVT]);
  return (
    <Table
      {...props}
      components={VT}
      scroll={{ y: 600 }}
      dataSource={props.dataSource}
      columns={columns.current}
    />
  );
}

export default CustomRowsHooks;

服務端核心指令碼

完整指令碼程式碼如下：

#-*-coding:utf-8-*-
__author__="orion-c"

def buildContainer(taskInfo, mountPort, wsMountPort, projectDir):
    for i in range(5):
        if len(os.listdir(projectDir)) > 0:
            break
        time.sleep(1)
    if sys.platform.startswith('win'):
        projectDir = "/taskFile/"+projectDir.split('taskFile\\')[1]
    formatHost = {}
    try:
        if taskInfo:
            if taskInfo['hosts']:
                hosts = taskInfo['hosts'].split('\n')
                for host in hosts:
                    host = ' '.join(host.split())
                    host = host.split(' ')
                    if len(host) == 2:
                        formatHost[host[1]] = host[0]
            try:
                container = docker_client.containers.get(str(mountPort))
                if container.status == 'exited':
                    container.remove()
                    logger.info('移除容器成功：{}'.format(str(mountPort)))
            except:
                logger.info('can build')
            docker_client.containers.run(
                name=mountPort,
                image='myproxy:0.0.13',
                command='/bin/bash -c "sh /root/script/start_sync.sh"',
                volumes={
                    projectDir: {'bind': '/root/script', 'mode': 'rw'}
                },
                ports={'8080': mountPort, '8081': wsMountPort},
                extra_hosts=formatHost,
                stderr=True,
                detach=True
            )
            logger.info('任務 {} 建立容器 {} 成功，ws埠 {}'.format(taskInfo['id'], mountPort, wsMountPort))
            return str(mountPort)
    except Exception as e:
        logger.error(e)
        logger.error('建立容器：{} 失敗'.format(mountPort))
        logger.error('請檢查你的docker服務')

def copyDumpFile(projectDir, content):
    dumpFilePath = content['suiteInfo']['dumpFile']
    dumpFilePath = '../../' + dumpFilePath if os.path.isfile('../../' + dumpFilePath) else dumpFilePath
    replayDumpFile = projectDir + '/replayDumpFile'
    shutil.copyfile(dumpFilePath, replayDumpFile)

def makeSyncReplayShell(projectDir, mountPort, content):
    shellPath = '../../templte/start_sync.sh' if os.path.isfile('../../templte/start_sync.sh') else 'templte/start_sync.sh'
    with open(shellPath, 'r', encoding='utf-8') as shellFile:
        shellTemplte = shellFile.read()
        cmd = "mitmdump -nC /root/script/replayDumpFile -s /root/script/getReplayResponse.py --ssl-insecure --set ssl_version_client=all --set ssl_version_server=all"
        if content['proxySetting']:
            cmd = cmd + " --set http2=false --set mode=upstream:{proxySetting}".format(proxySetting=content['proxySetting'])
        if content['cerPem'] and content['domain']:
            cmd = cmd + " --certs {domain}=/root/script/cer.pem".format(domain= content['domain'])
        shellConfig = shellTemplte.format(cmd= cmd)
        with open(projectDir + '/start_sync.sh', 'w', encoding='utf-8') as file:
            file.write(shellConfig)

def makePem(content,projectDir):
    if content['cerPem'] and content['domain']:
        with open(projectDir + '/cer.pem', 'w', encoding='utf-8') as file:
            file.write(content['cerPem'])

def makeMiddlareScript(content,projectDir):
    responsePath = '../../templte/getReplayResponse.py' if os.path.isfile('../../templte/getReplayResponse.py') else 'templte/getReplayResponse.py'
    with open(responsePath, 'r', encoding='utf-8') as middlareFile:
        middlareTemplte = middlareFile.read()
        middlareConfig = middlareTemplte.format(appHost= app.config['HOST'],taskId=content['id'])
        with open(projectDir + '/getReplayResponse.py', 'w', encoding='utf-8') as file:
            file.write(middlareConfig)

def makeConfig(projectDir, mountPort, content):
    copyDumpFile(projectDir,content)
    makeSyncReplayShell(projectDir, mountPort,content)
    makePem(content, projectDir)
    makeMiddlareScript(content, projectDir)

@manager.option('-i','--taskId',dest='taskId',default='')
def runScript(taskId):
    now = datetime.now().strftime('%Y-%m-%d_%H_%M_%S')
    taskRootPath = encrypt_name(now)
    content = getTaskInfo(taskId)
    for i in range(2):
        if i == 0:
            proxyMountPort = freeport.get()
        else:
            wsMountPort = freeport.get()
    projectDir = createProjectDir(taskRootPath)
    makeConfig(projectDir, proxyMountPort, content)
    setTaskStatus(taskId, 2, taskRootPath)
    containName = buildContainer(content, proxyMountPort, wsMountPort, projectDir)
    if containName:
        setTaskStatus(taskId, 3, taskRootPath, containName, wsMountPort)
    else:
        setTaskStatus(taskId, 6)