【Flask】测试平台开发,集成禅道
概述:
由于公司多数测试人员还是在使用禅道,为了方便,就将禅道直接集成在我们的测试平台中
一般可以有几种实现方法
- 调用禅道的API集成
- 集成本地部署的禅道-可能有跨域问题,需要解决
由于我这里已经部署了一台本地的禅道系统,那么这里我将以最简单的方式集成,通过代理集成到测试平台系统中,代理这里我们又可以分为以下方式
- 前端vue代理
- 后端代理
- Nginx代理
一般我们选择nginx这种方式进行集成,能够高并发,满足业务需求使用,先来看看本地开发环境式如何使用
访问nginx的官网下载nginx
nginx
首页如下
在这里我下载的是中间的稳定版本下载在本地你任意一个磁盘,然后解压,解压后效果如下
打开nginx的配置文件,配置如下
worker_processes 1;
events { worker_connections 1024; }http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;server {listen 81;server_name 172.16.60.60;# 前端系统代理(Vue)location / {proxy_pass http://localhost:9528;proxy_set_header Host $host:$server_port;proxy_set_header X-Real-IP $remote_addr;}# 禅道代理(完美复刻直接访问环境)location /zentao/ {# 1. 目标地址:禅道服务器(与直接访问完全一致)proxy_pass http://172.16.50.80/zentao/;# 2. 复刻直接访问的请求头(关键!)proxy_set_header Host 172.16.50.80; # 强制使用禅道原始 Host(直接访问时的 Host)proxy_set_header X-Real-IP $remote_addr;proxy_set_header Referer http://172.16.50.80/zentao/; # 模拟原域名 Refererproxy_set_header User-Agent $http_user_agent; # 传递客户端浏览器信息# 3. 复刻直接访问的 Cookie 环境(核心!)proxy_cookie_path / /; # Cookie 路径与直接访问一致(根路径 /)proxy_cookie_domain 172.16.50.80 172.16.60.60; # 将 Cookie 域名为 Nginx 服务器 IP# 4. 关闭 Nginx 缓冲(确保请求与直接访问完全一致)proxy_request_buffering off;proxy_buffering off;# 5. 移除安全限制头(允许表单提交和跳转)proxy_hide_header Content-Security-Policy;proxy_hide_header X-Frame-Options;# 6. 重定向处理(登录后跳转 Nginx 地址)proxy_redirect http://172.16.50.80/ http://172.16.60.60:81/; # 注意末尾斜杠!}}
}
注意
ngin每次配置操作,启用时最好都检查一下语法,windows操作命令如下
nginx -t 检查语法
nginx -s reload 重启nginx
nginx -s stop 停用
start nginx 启动
编写前端vue的页面展示部分以及路由
<template><div class="zentao-container"><!-- 尺寸控制栏 --><div class="zentao-header"><div class="header-title">禅道项目管理系统(rebort)</div><div class="header-actions"><!-- 全屏切换按钮 --><el-buttonicon="el-icon-full-screen"size="mini"@click="toggleFullScreen":title="isFullScreen ? '退出全屏' : '进入全屏'"/><!-- 固定尺寸按钮(可选) --><el-buttonicon="el-icon-sizer"size="mini"@click="resetSize"title="重置尺寸"/></div></div><!-- 禅道 iframe --><iframeref="zentaoIframe":src="iframeSrc"class="zentao-iframe":style="{ height: iframeHeight, width: iframeWidth }"sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups"/></div>
</template><script>
export default {data() {return {iframeSrc: '/zentao/user-login.html', // 禅道登录页地址iframeWidth: '100%', // 初始宽度(可固定为具体值,如 '1200px')iframeHeight: '80vh', // 初始高度(80% 视窗高度,避免全屏)isFullScreen: false // 全屏状态标记};},methods: {// 切换全屏/退出全屏toggleFullScreen() {const container = document.querySelector('.zentao-container');if (!this.isFullScreen) {// 进入全屏if (container.requestFullscreen) {container.requestFullscreen();} else if (container.mozRequestFullScreen) { // Firefoxcontainer.mozRequestFullScreen();} else if (container.webkitRequestFullscreen) { // Chrome/Safaricontainer.webkitRequestFullscreen();} else if (container.msRequestFullscreen) { // IE/Edgecontainer.msRequestFullscreen();}this.isFullScreen = true;} else {// 退出全屏if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}this.isFullScreen = false;}},// 重置尺寸为初始值resetSize() {this.iframeWidth = '100%';this.iframeHeight = '80vh';this.isFullScreen = false;// 若处于全屏状态,先退出全屏if (document.fullscreenElement) {document.exitFullscreen();}}},mounted() {// 监听全屏状态变化(处理用户按 ESC 退出全屏的情况)document.addEventListener('fullscreenchange', () => {this.isFullScreen = !!document.fullscreenElement;});document.addEventListener('mozfullscreenchange', () => {this.isFullScreen = !!document.mozFullScreenElement;});document.addEventListener('webkitfullscreenchange', () => {this.isFullScreen = !!document.webkitFullscreenElement;});document.addEventListener('msfullscreenchange', () => {this.isFullScreen = !!document.msFullscreenElement;});}
};
</script><style scoped>
/* 容器样式 */
.zentao-container {position: relative;width: 100%;border: 1px solid #e6e6e6;border-radius: 4px;overflow: hidden;
}/* 头部控制栏 */
.zentao-header {display: flex;justify-content: space-between;align-items: center;padding: 8px 16px;background-color: #f5f5f5;border-bottom: 1px solid #e6e6e6;
}.header-title {font-weight: 500;color: #333;
}.header-actions {display: flex;gap: 8px;
}/* iframe 样式 */
.zentao-iframe {border: none;transition: all 0.3s ease;
}/* 全屏状态样式(可选) */
::v-deep .zentao-container:fullscreen {background-color: #fff;z-index: 9999;
}
::v-deep .zentao-container:-webkit-full-screen {background-color: #fff;z-index: 9999;
}
</style>
最终集成后效果如下
如果是在生产环境下使用,我们可能会考虑使用加密的方式
server {listen 443 ssl; # 监听 HTTPS 端口server_name project.example.com; # 生产环境域名# SSL 证书配置(替换为实际证书路径)ssl_certificate /etc/nginx/ssl/project.crt;ssl_certificate_key /etc/nginx/ssl/project.key;# SSL 安全配置ssl_protocols TLSv1.2 TLSv1.3; # 禁用不安全协议ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512;ssl_prefer_server_ciphers on;ssl_session_cache shared:SSL:10m;ssl_session_timeout 10m;# 强制 HTTP 跳转 HTTPSreturn 301 https://$host$request_uri;
}# HTTP 重定向到 HTTPS
server {listen 80;server_name project.example.com;return 301 https://$host$request_uri;
}
限制请求速率,防止攻击
http {# 配置请求限制limit_req_zone $binary_remote_addr zone=zentao_req:10m rate=10r/s; # 限制单 IP 10 请求/秒limit_conn_zone $binary_remote_addr zone=zentao_conn:10m; # 限制并发连接
}server {location /zentao/ {proxy_pass http://172.16.50.80/zentao/;# 应用请求限制limit_req zone=zentao_req burst=20 nodelay; # 突发允许 20 请求limit_conn zentao_conn 50; # 单 IP 最大 50 并发连接}
}
静态资源缓存优化,较少后端请求
location ~* /zentao/(css|js|images|fonts)/ {proxy_pass http://172.16.50.80;proxy_cache zentao_cache; # 定义缓存区proxy_cache_valid 200 304 8h; # 缓存 8 小时proxy_cache_valid any 1m; # 非 200/304 缓存 1 分钟proxy_cache_use_stale error timeout updating http_500 http_502 http_503 http_504;add_header X-Proxy-Cache $upstream_cache_status; # 响应头显示缓存状态(HIT/MISS)
}
健康检查与自动恢复
通过 ngx_http_proxy_module
配置后端服务健康检查,避免请求转发到故障节点:
location /zentao/ {proxy_pass http://172.16.50.80/zentao/;proxy_next_upstream error timeout http_500 http_502 http_503 http_504; # 失败时自动切换备用节点(需配合 upstream)proxy_connect_timeout 3s; # 连接超时 3 秒proxy_read_timeout 10s; # 读取超时 10 秒
}
日志与监控
- 访问日志:配置详细日志格式,记录请求来源、URL、状态码、响应时间,便于故障排查:
log_format main '$remote_addr [$time_local] "$request" $status $body_bytes_sent "$http_referer" "$http_user_agent" $request_time';access_log /var/log/nginx/zentao_access.log main; # 禅道访问日志