概述：

由于公司多數測試人員還是在使用禪道，為了方便，就將禪道直接集成在我們的測試平臺中

一般可以有幾種實現方法

• 調用禪道的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;  # 禪道訪問日志

?

?