Jekyll 网站的 Lighthouse GitLab CI 超时

Question

我还没有找到 Jekyll + Lighthouse GitLab 作业的任何完整示例。 Jekyll 构建作业基于 ruby:2.6 图像。我在我的 .gitlab-ci.yml 中添加了一个报告阶段，我在其中安装了 LHCI 执行所需的 nodejs、npm 和 chromium。

# requiring the environment of Ruby 2.6.x
image: ruby:2.6

# add bundle cache to 'vendor' for speeding up builds
cache:
  paths:
    - vendor/

variables:
  JEKYLL_ENV: production

stages:
  - deploy
  - report

pages:
  stage: deploy
  before_script:
  - apt-get update -qq && apt-get install -y
  - bundle install --path vendor
  script:
  - bundle exec jekyll build -d public/
  artifacts:
    paths:
    - public
  only:
  - master

static_review_report:
  stage: report
  before_script:
  - apt-get update -qq && apt-get install -y
  - apt-get install -y chromium
  - apt-get install -y nodejs
  - apt-get install -y npm
  - bundle install --path vendor
  - bundle exec jekyll build -d public/
  - npm install -g @lhci/cli@0.8.x
  script:
  - lhci autorun || echo "LHCI failed!"
  artifacts:
    paths:
    - public
  allow_failure: true
  only:
  - master

我的.lighouserc.json

{
  "ci": {
    "collect": {
      "url": [
        "https://csaba.page/",
        "https://csaba.page/about.html",
        "https://csaba.page/blog/",
        "https://csaba.page/blog/suunto-under-armour-integrations.html"
      ],
      "numberOfRuns": 1,
      "staticDistDir": "./public",
      "settings": {
        "preset": "desktop",
        "chromeFlags": "--no-sandbox --disable-dev-shm-usage --headless --in-process-gpu"
      }
    },
    "assert": {
      "preset": "lighthouse:recommended",
      "assertions": {
        "first-contentful-paint": [
          "warn",
          {
            "maxNumericValue": 2500,
            "aggregationMethod": "optimistic"
          }
        ],
        "interactive": [
          "warn",
          {
            "maxNumericValue": 5000,
            "aggregationMethod": "optimistic"
          }
        ],
        "uses-long-cache-ttl": "off",
        "uses-http2": "off"
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

问题是LHCI超时：

$ lhci autorun || echo "LHCI failed!"
✅  .lighthouseci/ directory writable
✅  Configuration file found
✅  Chrome installation found
Healthcheck passed!
Started a web server on port 36651...
Running Lighthouse 1 time(s) on https://csaba.page:36651/
Run #1...failed!
Error: Lighthouse failed with exit code 1
    at ChildProcess.<anonymous> (/usr/local/lib/node_modules/@lhci/cli/src/collect/node-runner.js:120:21)
    at ChildProcess.emit (events.js:314:20)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
Sun, 12 Dec 2021 21:46:08 GMT ChromeLauncher Waiting for browser.
Sun, 12 Dec 2021 21:46:08 GMT ChromeLauncher Waiting for browser...
Sun, 12 Dec 2021 21:46:09 GMT ChromeLauncher Waiting for browser.....
Sun, 12 Dec 2021 21:46:09 GMT ChromeLauncher Waiting for browser.....✓
Sun, 12 Dec 2021 21:46:09 GMT config:warn IFrameElements gatherer requested, however no audit requires it.
Sun, 12 Dec 2021 21:46:09 GMT config:warn FormElements gatherer requested, however no audit requires it.
Sun, 12 Dec 2021 21:46:09 GMT status Connecting to browser
Sun, 12 Dec 2021 21:46:09 GMT status Resetting state with about:blank
Sun, 12 Dec 2021 21:46:09 GMT status Benchmarking machine
Sun, 12 Dec 2021 21:46:10 GMT status Initializing…
Sun, 12 Dec 2021 21:46:10 GMT status Running defaultPass pass CSSUsage, JsUsage, ViewportDimensions, ConsoleMessages, AnchorElements, ImageElements, LinkElements, MetaElements, ScriptElements, IFrameElements, FormElements, MainDocumentContent, GlobalListeners, AppCacheManifest, Doctype, DOMStats, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, FontSize, EmbeddedContent, RobotsTxt, TapTargets, Accessibility, TraceElements, InspectorIssues, SourceMaps, FullPageScreenshot
Sun, 12 Dec 2021 21:46:10 GMT status Resetting state with about:blank
Sun, 12 Dec 2021 21:46:11 GMT status Cleaning browser cache
Sun, 12 Dec 2021 21:46:11 GMT status Preparing network conditions
Sun, 12 Dec 2021 21:46:11 GMT status Beginning devtoolsLog and trace
Sun, 12 Dec 2021 21:46:11 GMT status Loading page & waiting for onload
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: CSSUsage
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: JsUsage
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: ViewportDimensions
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: ConsoleMessages
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: AnchorElements
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: ImageElements
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: LinkElements
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: MetaElements
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: ScriptElements
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: IFrameElements
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: FormElements
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: MainDocumentContent
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: GlobalListeners
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: AppCacheManifest
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: Doctype
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: DOMStats
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: OptimizedImages
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: PasswordInputsWithPreventedPaste
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: ResponseCompression
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: TagsBlockingFirstPaint
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: FontSize
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: EmbeddedContent
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: RobotsTxt
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: TapTargets
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: Accessibility
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: TraceElements
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: InspectorIssues
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: SourceMaps
Sun, 12 Dec 2021 21:46:41 GMT status Gathering in-page: FullPageScreenshot
Sun, 12 Dec 2021 21:46:41 GMT status Gathering trace
Sun, 12 Dec 2021 21:46:41 GMT status Gathering devtoolsLog & network records
Sun, 12 Dec 2021 21:47:11 GMT status Disconnecting from browser...
Sun, 12 Dec 2021 21:47:11 GMT ChromeLauncher Killing Chrome instance 5432
Runtime error encountered: Waiting for DevTools protocol response has exceeded the allotted time. (Method: Network.emulateNetworkConditions)
LHError: PROTOCOL_TIMEOUT
    at Timeout.<anonymous> (/usr/local/lib/node_modules/@lhci/cli/node_modules/lighthouse/lighthouse-core/gather/driver.js:322:21)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7)
LHCI failed!

这个组合我没怎么查到，但是在这个ticket中https://github.com/GoogleChrome/lighthouse-ci/issues/504好像没有解决办法？我不相信在 GitLab 上托管 Jekyll SSG 网站的人会做 Lighthouse CI.

我解决了这个综合问题 https://github.com/GoogleChrome/lighthouse/issues/6512 并在 --no-sandbox 之外添加了 --disable-dev-shm-usage --headless --in-process-gpu Chromium 选项。我还在 lighthouserc 中添加了 desktop 预设，希望它能有所帮助。我希望这里有人有 .gitlab-ci.yml + .lighouserc.json 的工作集或一些提示。

Answer 1

日志中的这两行揭示了真正的问题：

Started a web server on port 36651...
Running Lighthouse 1 time(s) on https://csaba.page:36651/

现在我明白为什么测试失败了：https://csaba.page:36651/确实不可用，那个端口被关闭了。我意识到我需要将 .lighouserc.json 中的测试指向 localhost 而不是真正的 public 域，因为那是 LHCI 启动测试服务器的地方。

我以后会看看是否可以用 443 (https) 覆盖该随机端口，以便可以测试实时站点。如果您在 .lighouserc.json 的 url 部分引用 localhost 域，那么测试将自动将该端口插入 URL（就像对 public 领域）。参见 https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md

"URLs will have their port replaced with the port of the local server that Lighthouse CI starts for you. This allows you to write URLs as http://localhost/my-static-page.html without worrying about the chosen temporary port."

现在作业运行并且不会超时。

Jekyll 网站的 Lighthouse GitLab CI 超时

Lighthouse GitLab CI for a Jekyll website times out

jekyll

gitlab

lighthouse-ci