如何让Lambda返回含完整CSS的JMeter报告HTML并适配GitHub工作流？

问题根源 #

JMeter生成的HTML报告是多文件结构，index.html会引用同目录下css/、js/等静态资源。你当前的Lambda只返回了index.html的文本内容，浏览器加载时无法找到依赖的样式和脚本文件，导致样式缺失。

可行解决方案 #

1. 将静态资源内联到HTML中 #

把CSS、JS内容直接嵌入到index.html里，生成单文件的完整报告，这样返回的HTML就能独立展示样式。可以用BeautifulSoup来解析并替换外部资源引用：

from zipfile import ZipFile
from bs4 import BeautifulSoup
import os

def handler(event, context):
    # 解压报告压缩包到临时目录
    with ZipFile('/report/testreport.zip', 'r') as zip_ref:
        zip_ref.extractall('/tmp/report')
    
    report_root = '/tmp/report'
    html_file_path = os.path.join(report_root, 'index.html')
    
    # 读取并解析HTML
    with open(html_file_path, 'r', encoding='utf-8') as f:
        soup = BeautifulSoup(f.read(), 'html.parser')
    
    # 内联CSS文件
    for style_link in soup.find_all('link', rel='stylesheet'):
        css_file_path = os.path.join(report_root, style_link['href'])
        if os.path.exists(css_file_path):
            with open(css_file_path, 'r', encoding='utf-8') as css_f:
                css_content = css_f.read()
                # 替换link标签为style标签
                inline_style = soup.new_tag('style')
                inline_style.string = css_content
                style_link.replace_with(inline_style)
    
    # 内联JS文件（JMeter报告的JS影响交互功能，建议一并内联）
    for script_tag in soup.find_all('script', src=True):
        js_file_path = os.path.join(report_root, script_tag['src'])
        if os.path.exists(js_file_path):
            with open(js_file_path, 'r', encoding='utf-8') as js_f:
                js_content = js_f.read()
                # 替换带src的script标签为内联script
                inline_script = soup.new_tag('script')
                inline_script.string = js_content
                script_tag.replace_with(inline_script)
    
    # 生成内联后的完整HTML
    final_html = str(soup)
    
    return {
        "statusCode": 200,
        "headers": {
            "Content-Type": "text/html; charset=utf-8"
        },
        "body": final_html
    }

注意：Lambda环境默认没有BeautifulSoup库，需要将bs4及其依赖（如soupsieve）打包成Lambda层，或者一起包含在部署包中。

2. 直接上传完整报告目录到GitHub #

既然最终要上传到GitHub工作流，更直接的方式是把解压后的整个报告目录（包含index.html和所有静态资源）作为文件上传：

• 在Lambda中把解压后的/tmp/report目录重新打包成zip，通过API上传到GitHub仓库的指定分支，或者传递给GitHub Actions的artifact。
• 在GitHub工作流中，直接将完整报告目录部署到GitHub Pages，或者作为artifact存储，用户下载后打开index.html就能看到完整样式。

3. 优化GitHub工作流（跳过Lambda） #

如果报告生成逻辑允许，直接在GitHub Actions中运行JMeter生成报告，无需经过Lambda：

jobs:
  generate-report:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
      
      - name: Install JMeter
        run: sudo apt-get install -y jmeter
      
      - name: Run JMeter test and generate report
        run: jmeter -n -t ./test-plan.jmx -l results.jtl -e -o jmeter-report
      
      - name: Upload report artifact
        uses: actions/upload-artifact@v4
        with:
          name: jmeter-full-report
          path: jmeter-report/

这样生成的完整报告目录会被作为artifact上传，下载后直接打开index.html即可查看带样式的报告。

内容的提问来源于stack exchange，提问作者trung