TeserHome地址：https://testerhome.com/opensource_projects/60
前端：https://github.com/pencil1/ApiTestWeb 實現技術：js + vue + element-ui
後端：https://github.com/pencil1/ApiTestManage 實現技術：python + flask + httprunnerhtml
windows版前端
準備工做：
一、python3環境
二、把項目下載並解壓到一個文件夾vue
後臺配置
一、安裝虛擬環境：pip install virtualenvnode
建立虛擬環境：virtualenv test（test爲虛擬機名）python
二、激活虛擬環境：到虛擬環境下執行activate.bat文件linux
三、項目根目錄下pip install -r requirements.txtnginx
四、第一次使用，首先要設置flask的app：
windows：set FLASK_APP=manage.py
linux：export FLASK_APP=manage.pygit
五、而後建立管理員帳號（帳號：admin，密碼：123456）：flask initdatagithub
六、啓動：python manage.pynpm
前端配置
一、安裝 node 版本8以上便可，官網下載msi文件https://nodejs.org/en/download/，直接無腦下一步安裝; 確保 node -V
檢查npm是否默認帶了的：npm -V
二、安裝 yarn 工具包：python npm install -g yarn 不行就試試 npm install -g yarn
三、安裝依賴：yarn install
四、啓動（項目根目錄下）：yarn serve
登陸（admin、123456）：
linux版：
安裝虛擬環境，參考個人另外一篇：https://www.cnblogs.com/zhongyehai/p/11037363.html
後臺：
上傳解壓，並進入ApiTestManage-master目錄
安裝依賴包（這臺機器已升級pip3），在解壓出來的ApiTestManage-master目錄下：pip3 install -r requirements.txt
安裝完成（安裝須要一些時間）
第一次使用：
首先要設置flask的app：export FLASK_APP=manage.py
而後建立管理員帳號（帳號：admin，密碼：123456）：flask initdata
因爲這裏有報錯的坑，而暫時沒有解決，因此直接拿在windows上部署的數據過來替換
把啓動的端口和ip改一下：host='0.0.0.0', port=8080
啓動並訪問
這樣後端的環境問題就算解決了，先停掉，解決前端的環境
前端：
去node官網下載node（版本不要過低）：https://nodejs.org/zh-cn/download/
解壓
建立軟鏈接
到前端的目錄下安裝yarn工具包：npm install -g yarn
爲保險起見，給yarn建立一個軟鏈接
安裝依賴包: yarn install
配置文件：vue.config.js
devServer: {
host: '127.0.0.1',
port: 8023, # 前端的端口
proxy: {
'/api/': {
target: 'http://x.x.x.x:8024', # 後端的ip和端口
changeOrigin: true,
}
},
}
須要注意的有2個點：
host訪問前端的地址
target地址，當跨域調用api時的地址，該地址須要與nginx裏面的proxy_pass和後臺啓動地址一致
# 手動執行啓動命令：yarn serve
執行打包命令：yarn build
生成dist文件，將該文件存放於服務器的某個路徑，該路徑須要和nginx.conf裏面的root一致
後臺服務啓動：gunicorn -c gunicorn_config.py manage:app
gunicorn_config.py裏面的關鍵參數說明：bind = 'x.x.x.x:8080'（啓動服務的地址，注意：nginx裏面的proxy_pass 須要與這個一致）
仍是會報錯，這裏採用nohup的形式啓動：nohup python3 manage.py
配置Nginx，安裝好Nginx後。nginx.conf
#include /etc/nginx/conf.d/*.conf;
server {
listen 8023; 前端的端口
server_name test-platform;
charset utf-8;
client_max_body_size 75M;
location / {
root /test/test-platform/ApiTestWeb-master/dist;
index index.html;
location /api{
proxy_pass http://x.x.x.x:8024; # 後端地址和端口
}
location /reports/{
alias /home/reports/;
}
}
}
}
啓動Nginx
訪問：