概述：

由于公司多数测试人员还是在使用禅道，为了方便，就将禅道直接集成在我们的测试平台中

一般可以有几种实现方法

• 调用禅道的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;  # 禅道访问日志