【DevOps】如何将 Jenkins 中 `publishHTML` 生成的 `index.html` 页面展示到第三方平台页面上

一、

要将 Jenkins 中 publishHTML 生成的 index.html 页面展示到第三方平台页面上，可以通过以下几种方式来实现：

1. 使用 Jenkins 构建后的 URL 直接访问

Jenkins 中的 publishHTML 插件生成的报告通常可以通过 Jenkins 的 Web 界面访问。如果第三方平台允许嵌入外部链接，你可以直接嵌入 Jenkins 中的报告 URL。

步骤：

1. 确保 Jenkins 是公开可访问的，或者确保第三方平台可以访问 Jenkins 的 URL。
2. 找到 Jenkins 构建页面中生成的报告的 URL，通常形式类似于：

   http://your-jenkins-server/job/your-job-name/lastBuild/HTML_Report/
   

3. 在第三方平台中使用 <iframe> 标签嵌入这个 URL：

   <iframe src="http://your-jenkins-server/job/your-job-name/lastBuild/HTML_Report/" width="100%" height="600px"></iframe>
   

2. 将生成的 HTML 报告上传到第三方平台

如果第三方平台支持上传 HTML 文件，你可以将 Jenkins 中生成的 index.html 及其相关资源（如 CSS、JS 文件）下载并上传到第三方平台。

步骤：

1. 在 Jenkins 中找到生成的 index.html 和相关的资源文件。
2. 下载这些文件到本地。
3. 登录第三方平台，将这些文件上传到该平台的文件系统中。
4. 确保所有资源文件（如 CSS 和 JS）都与 index.html 文件路径保持一致。

3. 自动上传 Jenkins 生成的 HTML 报告到第三方服务器

你可以通过 Jenkins Pipeline 在构建完成后，使用脚本将生成的 HTML 报告自动上传到第三方服务器（如 SFTP、Web 服务器等）。

步骤：

1. 在 Jenkins Pipeline 中添加一个步骤，通过 scp 或 rsync 命令将 HTML 报告文件上传到目标服务器。

   pipeline {
       agent any
       stages {
           stage('Build and Test') {
               steps {
                   // 运行单元测试并生成报告
                   sh "mvn clean verify -Dmaven.test.failure.ignore=true"
                   
                   // 生成 Jacoco 报告
                   jacoco execPattern: '**/target/*.exec', 
                          classPattern: '**/target/classes', 
                          sourcePattern: '**/src/main/java', 
                          excludes: '**/dto/**,**/dao/**,**/vo/**,**/enum/**,**/constant/**,**/log/**,**/enums/**,**/constants/**',
                          changeBuildStatus: true,
                          thresholds: [
                              lineCoverage: '60', 
                              branchCoverage: '80',
                              methodCoverage: '90',
                              classCoverage: '90'
                          ]
                   
                   // 上传生成的HTML报告到第三方服务器
                   sh """
                   scp -r target/site/* user@your-server:/path/to/your/directory/
                   """
               }
           }
       }
   }
   

2. 在第三方平台配置一个链接或页面来访问上传后的 HTML 报告。

4. 使用 Jenkins 插件发布到第三方平台

一些第三方平台可能有 Jenkins 插件，可以自动将 Jenkins 的构建报告发布到这些平台上。查找并配置相应的 Jenkins 插件以实现自动发布。

总结：

• 简单嵌入：如果第三方平台允许嵌入外部链接，直接嵌入 Jenkins 生成的 URL 是最简单的方式。
• 手动上传：如果需要将文件上传到第三方平台，则可以手动下载并上传，或通过脚本自动化。
• 自动化发布：通过 Jenkins Pipeline 自动上传报告文件到第三方服务器或存储平台。

选择适合你需求的方式来实现报告的展示。

二、

使用 scp 命令将 Jenkins 生成的 HTML 报告文件上传到服务器后，您需要确保这些文件在服务器上能够通过 Web 服务器进行访问。以下是如何在前台展示这些文件的步骤：

1. 确认 Web 服务器配置

首先，确保您的目标服务器上配置了 Web 服务器（如 Apache、Nginx、或其他 HTTP 服务器）。这些服务器可以将您上传的 HTML 文件作为静态网页展示。

2. 上传报告文件

假设您已经使用 scp 命令将 Jenkins 生成的 HTML 文件上传到了目标服务器的某个目录，例如 /path/to/your/directory/。

3. 配置 Web 服务器指向目标目录

配置您的 Web 服务器，使其能够通过 URL 访问到您上传的目录。例如：

对于 Nginx：

1. 打开 Nginx 配置文件（通常在 /etc/nginx/sites-available/default 或 /etc/nginx/nginx.conf 中）。
2. 添加一个新的 server 块或在现有块中配置 location 指令：

server {
    listen 80;
    server_name your-domain.com;

    location /report/ {
        alias /path/to/your/directory/;
        index index.html;
    }
}

这会使得您上传的 HTML 文件可以通过 http://your-domain.com/report/ 访问到。

3. 重新加载 Nginx 配置：

sudo systemctl reload nginx

对于 Apache：

1. 打开 Apache 配置文件（通常在 /etc/apache2/sites-available/000-default.conf 中）。
2. 修改或添加 DocumentRoot 或 Alias 以指向您上传的目录：

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot /path/to/your/directory/

    <Directory /path/to/your/directory/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

3. 重新启动 Apache：

sudo systemctl restart apache2

4. 访问上传的报告

配置好 Web 服务器后，您可以通过 Web 浏览器访问上传的报告。例如，如果您的域名是 your-domain.com，并且您将报告放在 /path/to/your/directory/，那么可以通过以下 URL 访问：

http://your-domain.com/report/index.html

5. 集成到第三方平台

现在，您可以将这个 URL 集成到您的第三方平台。例如：

• 嵌入链接：在第三方平台的页面上直接添加一个指向该 URL 的链接。
• 嵌入 iframe：如果第三方平台支持，您可以使用 <iframe> 标签嵌入报告页面：

  <iframe src="http://your-domain.com/report/index.html" width="100%" height="600px"></iframe>
  

总结

通过 scp 上传报告文件后，确保服务器上有适当的 Web 服务器配置，将这些文件目录暴露为一个 URL 访问路径，然后通过 URL 将其展示在前台。这样，您就可以在第三方平台上通过链接或嵌入的方式展示 Jenkins 生成的报告。

三、

要在第三方页面上直接展示 Jenkins 生成的 index.html 报告内容，而不通过点击 URL 的方式，你可以考虑以下几种方法：

1. 使用 JavaScript Fetch API 动态加载内容

你可以使用 JavaScript 的 fetch API 在第三方平台页面上动态加载 index.html 的内容，并将其嵌入到页面中。

示例代码：

假设你已经将 index.html 文件托管在一个公开访问的 Web 服务器上，可以通过以下方式动态加载并嵌入内容：

<div id="report-container"></div>

<script>
  fetch('http://your-domain.com/report/index.html')
    .then(response => response.text())
    .then(data => {
      document.getElementById('report-container').innerHTML = data;
    })
    .catch(error => console.error('Error loading the report:', error));
</script>

这个代码会将 index.html 的内容加载并嵌入到第三方页面上的 #report-container 这个 <div> 容器中，用户无需点击链接就可以直接看到报告内容。

2. 使用 iframe 自动加载内容

你也可以使用 iframe 标签直接将 index.html 嵌入到第三方平台页面中，这种方法会在页面加载时自动显示报告内容。

示例代码：

<iframe src="http://your-domain.com/report/index.html" width="100%" height="600px"></iframe>

3. 服务器端代理请求

如果你有服务器端控制权，可以设置一个服务器端代理来请求 index.html 的内容，并将其嵌入到第三方页面中。

服务器端代理示例（Node.js Express）：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/report', async (req, res) => {
  try {
    const response = await axios.get('http://your-domain.com/report/index.html');
    res.send(response.data);
  } catch (error) {
    res.status(500).send('Error loading the report');
  }
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

在你的第三方平台页面上，可以使用以下方式嵌入内容：

<iframe src="http://your-server.com/report" width="100%" height="600px"></iframe>

4. 直接在页面中嵌入报告内容

如果你能够提前获取到 index.html 的内容，也可以直接将其静态地嵌入到第三方页面中，而不依赖于动态加载或服务器端请求。

总结

• JavaScript Fetch API 是一种动态加载内容的方法，适合直接从远程服务器获取 HTML 内容并嵌入页面。
• iframe 是最简单的方法，可以直接在页面中嵌入整个报告。
• 服务器端代理请求 可以用于更复杂的场景，如需要在服务器端进行内容处理或合并。
• 直接嵌入静态内容 适用于内容不经常变化的场景。

这些方法都能实现将报告的内容直接嵌入到第三方平台页面中，用户无需点击链接即可查看报告内容。选择具体方法取决于你的项目需求和技术栈。

四、

要在第三方平台页面上正常展示 Jenkins 生成的 HTML 报告，并且支持继续点击链接以浏览其他页面（即保持目录结构和资源链接的完整性），需要确保以下几点：

1. 完整上传目录结构：必须将 target/site/ 目录下的所有文件和子目录完整地上传到服务器上。这样可以确保 index.html 中的所有资源链接（如 CSS、JS 文件）和其他 HTML 文件都能被正确访问。

2. Web 服务器配置支持子目录和相对路径：确保您的 Web 服务器配置能够正确处理 target/site/ 目录中的相对路径和子目录结构。这意味着 Web 服务器应该能够递归地提供所有相关文件的访问。

实现步骤：

假设您已经通过 scp 命令将 target/site/ 目录完整地上传到了目标服务器的 /path/to/your/directory/ 目录中。

1. 确保 Web 服务器配置正确

确保 Web 服务器配置能正确处理并提供 /path/to/your/directory/ 下所有文件和子目录的访问。

对于 Nginx：

server {
    listen 80;
    server_name your-domain.com;

    location /report/ {
        alias /path/to/your/directory/;
        index index.html;
        autoindex on;  # 启用目录浏览，如果需要的话
    }
}

alias 指令将 /report/ 路径映射到您上传的目录。autoindex on; 允许您在没有 index.html 文件的子目录中浏览文件列表。

对于 Apache：

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot /path/to/your/directory/

    <Directory /path/to/your/directory/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

这确保了 Apache 会递归处理 /path/to/your/directory/ 目录中的所有文件和子目录。

2. 验证 Web 服务器配置

上传文件后，访问：

http://your-domain.com/report/index.html

验证 index.html 是否能够正确加载，并且页面中的所有链接是否都能正常访问。

3. 集成到第三方平台

确认上述 URL 可以正常访问后，您可以将这个 URL 嵌入到第三方平台页面中。例如：

• 直接嵌入链接：

  <a href="http://your-domain.com/report/index.html" target="_blank">查看测试报告</a>
  

• 使用 iframe：

  <iframe src="http://your-domain.com/report/index.html" width="100%" height="600px"></iframe>
  

通过这种方式，您可以在第三方平台页面上嵌入完整的 Jenkins 生成的 HTML 报告，用户可以继续点击报告中的链接以查看相关的子页面和资源。这种方法能确保所有的报告页面和链接在第三方平台上都能正常工作。