Lighthouse einem Continuous Integration-System wie GitHub Actions hinzufügen
Lighthouse CI ist eine Suite von Tools, mit denen Lighthouse während der Continuous Integration verwendet werden kann. Lighthouse CI kann auf viele verschiedene Arten in Entwickler-Workflows eingebunden werden. In dieser Anleitung werden folgende Themen behandelt:
- Mit der Lighthouse CI-Befehlszeile.
- Konfigurieren Sie Ihren CI-Anbieter für die Ausführung von Lighthouse CI.
- GitHub-Aktion und Statusprüfung für Lighthouse CI einrichten Dadurch werden Lighthouse-Ergebnisse automatisch in GitHub-Pull-Anfragen angezeigt.
- Erstellen eines Dashboards zur Leistungsüberwachung und eines Datenspeichers für Lighthouse-Berichte.
Übersicht
Lighthouse CI ist eine Suite kostenloser Tools, die die Verwendung von Lighthouse für das Leistungsmonitoring erleichtern. Ein einzelner Lighthouse-Bericht bietet eine Momentaufnahme der Leistung einer Webseite zum Zeitpunkt der Ausführung. Lighthouse CI zeigt, wie sich diese Ergebnisse im Laufe der Zeit verändert haben. Damit können Sie die Auswirkungen bestimmter Codeänderungen ermitteln oder dafür sorgen, dass Leistungsschwellenwerte während Continuous-Integration-Prozessen eingehalten werden. Obwohl das Leistungsmonitoring der häufigste Anwendungsfall für Lighthouse CI ist, kann es auch verwendet werden, um andere Aspekte des Lighthouse-Berichts zu überwachen, z. B. SEO oder Barrierefreiheit.
Die Hauptfunktion von Lighthouse CI wird über die Lighthouse CI-Befehlszeile bereitgestellt. (Hinweis: Dies ist ein anderes Tool als die Lighthouse-Befehlszeile.) Die Lighthouse CI-Befehlszeile bietet eine Reihe von Befehlen für die Verwendung von Lighthouse CI. Mit dem Befehl autorun werden beispielsweise mehrere Lighthouse-Ausführungen ausgeführt, der Lighthouse-Bericht mit dem Medianwert ermittelt und der Bericht zur Speicherung hochgeladen. Dieses Verhalten kann durch die Übergabe zusätzlicher Flags oder durch die Anpassung der Konfigurationsdatei von Lighthouse CI (lighthouserc.js) stark angepasst werden.
Obwohl die Hauptfunktionen von Lighthouse CI hauptsächlich in der Lighthouse CI-Befehlszeile enthalten sind, wird Lighthouse CI in der Regel über einen der folgenden Ansätze verwendet:
- Lighthouse CI im Rahmen von Continuous Integration ausführen
- Verwendung einer Lighthouse CI GitHub Action, die bei jeder Pull-Anfrage ausgeführt wird und diese kommentiert
- Leistung im Zeitverlauf über das von Lighthouse Server bereitgestellte Dashboard verfolgen.
Alle diese Ansätze basieren auf der Lighthouse CI-Befehlszeile.
Alternativen zu Lighthouse CI sind Dienste von Drittanbietern für das Leistungsmonitoring oder das Schreiben eines eigenen Skripts, um während des CI-Prozesses Leistungsdaten zu erfassen. Sie sollten einen Drittanbieterdienst in Betracht ziehen, wenn Sie die Verwaltung Ihres Leistungsmessungsservers und Ihrer Testgeräte lieber anderen überlassen möchten oder wenn Sie Benachrichtigungsfunktionen (z. B. E-Mail- oder Slack-Integration) wünschen, ohne diese Funktionen selbst erstellen zu müssen.
Lighthouse CI lokal verwenden
In diesem Abschnitt wird erläutert, wie Sie die Lighthouse CI-Befehlszeile lokal ausführen und installieren und wie Sie lighthouserc.js konfigurieren. Die einfachste Möglichkeit, um zu prüfen, ob Ihre lighthouserc.js-Datei richtig konfiguriert ist, besteht darin, die Lighthouse CI-Befehlszeile lokal auszuführen.
Installieren Sie die Lighthouse CI-Befehlszeile.
npm install -g @lhci/cliLighthouse CI wird konfiguriert, indem Sie eine
lighthouserc.js-Datei im Stammverzeichnis des Repositorys Ihres Projekts platzieren. Diese Datei ist obligatorisch und enthält Konfigurationsinformationen zu Lighthouse CI. Lighthouse CI kann zwar für die Verwendung ohne Git-Repository konfiguriert werden, in der Anleitung in diesem Artikel wird jedoch davon ausgegangen, dass Ihr Projekt-Repository für die Verwendung von Git konfiguriert ist.Erstellen Sie im Stammverzeichnis Ihres Repositorys eine
lighthouserc.js-Konfigurationsdatei.touch lighthouserc.jsFügen Sie den folgenden Code zu
lighthouserc.jshinzu. Dieser Code ist eine leere Lighthouse CI-Konfiguration. Diese Konfiguration wird in späteren Schritten erweitert.module.exports = { ci: { collect: { /* Add configuration here */ }, upload: { /* Add configuration here */ }, }, };Jedes Mal, wenn Lighthouse CI ausgeführt wird, wird ein Server gestartet, um Ihre Website bereitzustellen. Dieser Server ermöglicht es Lighthouse, deine Website auch dann zu laden, wenn keine anderen Server ausgeführt werden. Wenn Lighthouse CI abgeschlossen ist, wird der Server automatisch heruntergefahren. Damit die Bereitstellung ordnungsgemäß funktioniert, sollten Sie entweder das Attribut
staticDistDiroderstartServerCommandkonfigurieren.Wenn Ihre Website statisch ist, fügen Sie dem Objekt
ci.collectdas AttributstaticDistDirhinzu, um anzugeben, wo sich Ihre statischen Dateien befinden. Lighthouse CI verwendet einen eigenen Server, um diese Dateien beim Testen Ihrer Website bereitzustellen. Wenn Ihre Website nicht statisch ist, fügen Sie dem Objektci.collectdas AttributstartServerCommandhinzu, um den Befehl anzugeben, mit dem Ihr Server gestartet wird. Lighthouse CI startet während des Tests einen neuen Serverprozess und beendet ihn danach.// Static site example collect: { staticDistDir: './public', }// Dynamic site example collect: { startServerCommand: 'npm run start', }Fügen Sie dem Objekt
ci.collectdie Propertyurlhinzu, um die URLs anzugeben, für die Lighthouse CI Lighthouse ausführen soll. Der Wert des Attributsurlsollte als Array von URLs angegeben werden. Dieses Array kann eine oder mehrere URLs enthalten. Standardmäßig führt Lighthouse CI Lighthouse dreimal für jede URL aus.collect: { // ... url: ['http://localhost:8080'] }Fügen Sie dem
ci.upload-Objekt das Attributtargethinzu und legen Sie den Wert auf'temporary-public-storage'fest. Die von Lighthouse CI erfassten Lighthouse-Berichte werden in einen temporären öffentlichen Speicher hochgeladen. Der Bericht bleibt dort sieben Tage lang gespeichert und wird dann automatisch gelöscht. In dieser Einrichtungsanleitung wird die Uploadoption „Temporärer öffentlicher Speicher“ verwendet, da sie schnell einzurichten ist. Informationen zu anderen Möglichkeiten, Lighthouse-Berichte zu speichern, finden Sie in der Dokumentation.upload: { target: 'temporary-public-storage', }Der Speicherort des Berichts sieht in etwa so aus:
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html(Diese URL funktioniert nicht, da der Bericht bereits gelöscht wurde.)
Führen Sie die Lighthouse CI-Befehlszeile über das Terminal mit dem Befehl
autorunaus. Dadurch wird Lighthouse dreimal ausgeführt und der mittlere Lighthouse-Bericht hochgeladen.lhci autorunWenn Sie Lighthouse CI richtig konfiguriert haben, sollte die Ausgabe dieses Befehls in etwa so aussehen:
✅ .lighthouseci/ directory writable ✅ Configuration file found ✅ Chrome installation found ⚠️ GitHub token not set Healthcheck passed! Started a web server on port 65324... Running Lighthouse 3 time(s) on http://localhost:65324/index.html Run #1...done. Run #2...done. Run #3...done. Done running Lighthouse! Uploading median LHR of http://localhost:65324/index.html...success! Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html No GitHub token set, skipping GitHub status check. Done running autorun.Sie können die Meldung
GitHub token not setin der Konsolenausgabe ignorieren. Ein GitHub-Token ist nur erforderlich, wenn Sie Lighthouse CI mit einer GitHub-Aktion verwenden möchten. Wie Sie eine GitHub-Aktion einrichten, wird später in diesem Artikel erläutert.Wenn Sie auf den Link in der Ausgabe klicken, der mit
https://storage.googleapis.com...beginnt, gelangen Sie zum Lighthouse-Bericht, der dem Medianwert der Lighthouse-Ausführung entspricht.Die von
autorunverwendeten Standardwerte können über die Befehlszeile oderlighthouserc.jsüberschrieben werden. Die folgendelighthouserc.js-Konfiguration gibt beispielsweise an, dass bei jeder Ausführung vonautorunfünf Lighthouse-Ausführungen erfasst werden sollen.Aktualisieren Sie
lighthouserc.js, um das AttributnumberOfRunszu verwenden:module.exports = { // ... collect: { numberOfRuns: 5 }, // ... }, };Führen Sie den Befehl
autorunnoch einmal aus:lhci autorunIn der Terminalausgabe sollte angezeigt werden, dass Lighthouse fünfmal statt der standardmäßigen drei Male ausgeführt wurde:
✅ .lighthouseci/ directory writable ✅ Configuration file found ✅ Chrome installation found ⚠️ GitHub token not set Healthcheck passed! Automatically determined ./dist as `staticDistDir`. Set it explicitly in lighthouserc.json if incorrect. Started a web server on port 64444... Running Lighthouse 5 time(s) on http://localhost:64444/index.html Run #1...done. Run #2...done. Run #3...done. Run #4...done. Run #5...done. Done running Lighthouse! Uploading median LHR of http://localhost:64444/index.html...success! Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html No GitHub token set, skipping GitHub status check. Done running autorun.Weitere Informationen zu anderen Konfigurationsoptionen finden Sie in der Konfigurationsdokumentation für Lighthouse CI.
CI-Prozess für die Ausführung von Lighthouse CI einrichten
Lighthouse CI kann mit Ihrem bevorzugten CI-Tool verwendet werden. Der Abschnitt Configure Your CI Provider (CI-Anbieter konfigurieren) der Lighthouse CI-Dokumentation enthält Codebeispiele, die zeigen, wie Lighthouse CI in die Konfigurationsdateien gängiger CI-Tools eingebunden wird. In diesen Codebeispielen wird gezeigt, wie Sie Lighthouse CI ausführen, um während des CI-Prozesses Leistungsmessungen zu erfassen.
Die Verwendung von Lighthouse CI zum Erfassen von Leistungsmesswerten ist ein guter Ausgangspunkt für das Leistungsmonitoring. Fortgeschrittene Nutzer können jedoch einen Schritt weiter gehen und Lighthouse CI verwenden, um Builds abzubrechen, wenn sie vordefinierte Kriterien nicht erfüllen, z. B. bestimmte Lighthouse-Prüfungen nicht bestehen oder nicht alle Leistungsbudgets einhalten. Dieses Verhalten wird über das Attribut assert der Datei lighthouserc.js konfiguriert.
Lighthouse CI unterstützt drei Assertion-Ebenen:
off: Assertions ignorierenwarn: Fehler in stderr ausgebenerror: Fehler werden in stderr ausgegeben und Lighthouse CI wird mit einem Exit-Code ungleich null beendet.
Im Folgenden finden Sie ein Beispiel für eine lighthouserc.js-Konfiguration, die Assertions enthält. Es werden Assertions für die Ergebnisse der Lighthouse-Kategorien „Leistung“ und „Barrierefreiheit im Internet“ festgelegt. Fügen Sie dazu die unten gezeigten Assertions in die Datei lighthouserc.js ein und führen Sie Lighthouse CI noch einmal aus.
module.exports = {
ci: {
collect: {
// ...
},
assert: {
assertions: {
'categories:performance': ['warn', {minScore: 1}],
'categories:accessibility': ['error', {minScore: 1}]
}
},
upload: {
// ...
},
},
};
Die generierte Konsolenausgabe sieht so aus:
Weitere Informationen zu Lighthouse CI-Assertions finden Sie in der Dokumentation.
GitHub Action zum Ausführen von Lighthouse CI einrichten
Eine GitHub-Aktion kann verwendet werden, um Lighthouse CI auszuführen. Dadurch wird jedes Mal ein neuer Lighthouse-Bericht generiert, wenn eine Codeänderung an einen Zweig eines GitHub-Repositorys übertragen wird. Verwenden Sie dies in Verbindung mit einer Statusprüfung, um diese Ergebnisse für jede Pull-Anfrage anzuzeigen.
Erstellen Sie im Stammverzeichnis Ihres Repositorys ein Verzeichnis mit dem Namen
.github/workflows. Die Workflows für Ihr Projekt werden in diesem Verzeichnis gespeichert. Ein Workflow ist ein Prozess, der zu einem vordefinierten Zeitpunkt ausgeführt wird (z. B. wenn Code per Push übertragen wird) und aus einer oder mehreren Aktionen besteht.mkdir .github mkdir .github/workflowsErstellen Sie in
.github/workflowseine Datei mit dem Namenlighthouse-ci.yaml. Diese Datei enthält die Konfiguration für einen neuen Workflow.touch lighthouse-ci.yamlFügen Sie in
lighthouse-ci.yamlden folgenden Text hinzu:name: Build project and run Lighthouse CI on: [push] jobs: lhci: name: Lighthouse CI runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - name: Use Node.js 10.x uses: actions/setup-node@v1 with: node-version: 10.x - name: npm install run: | npm install - name: run Lighthouse CI run: | npm install -g @lhci/cli@0.3.x lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"Mit dieser Konfiguration wird ein Workflow eingerichtet, der aus einem einzelnen Job besteht, der immer dann ausgeführt wird, wenn neuer Code in das Repository übertragen wird. Dieser Job umfasst vier Schritte:
- Repository auschecken, für das Lighthouse CI ausgeführt wird
- Node installieren und konfigurieren
- Erforderliche npm-Pakete installieren
- Lighthouse CI ausführen und die Ergebnisse in einen temporären öffentlichen Speicher hochladen.
Führen Sie ein Commit dieser Änderungen durch und übertragen Sie sie per Push an GitHub. Wenn Sie die oben genannten Schritte korrekt ausgeführt haben, wird durch das Übertragen von Code an GitHub der gerade hinzugefügte Workflow ausgeführt.
Wenn Sie prüfen möchten, ob Lighthouse CI ausgelöst wurde, und den generierten Bericht aufrufen möchten, rufen Sie den Tab Aktionen Ihres Projekts auf. Der Workflow Build project and Run Lighthouse CI sollte unter Ihrem letzten Commit aufgeführt sein.
Über den Tab Aktionen können Sie den Lighthouse-Bericht für einen bestimmten Commit aufrufen. Klicken Sie auf den Commit und dann auf den Workflow-Schritt Lighthouse CI. Maximieren Sie dann die Ergebnisse des Schritts Lighthouse CI ausführen.
Sie haben gerade eine GitHub-Aktion zum Ausführen von Lighthouse CI eingerichtet. Dies ist am nützlichsten, wenn es in Verbindung mit einer GitHub-Statusprüfung verwendet wird.
GitHub-Statusprüfung einrichten
Eine Statusprüfung ist, falls konfiguriert, eine Nachricht, die bei jedem PR angezeigt wird und in der Regel Informationen wie die Ergebnisse eines Tests oder den Erfolg eines Builds enthält.
In den folgenden Schritten wird beschrieben, wie Sie eine Statusprüfung für Lighthouse CI einrichten.
Rufen Sie die Seite der Lighthouse CI-GitHub-Anwendung auf und klicken Sie auf Configure (Konfigurieren).
Optional: Wenn Sie auf GitHub zu mehreren Organisationen gehören, wählen Sie die Organisation aus, die Inhaber des Repositorys ist, für das Sie Lighthouse CI verwenden möchten.
Wählen Sie Alle Repositories aus, wenn Sie Lighthouse CI in allen Repositories aktivieren möchten, oder wählen Sie Nur ausgewählte Repositories aus, wenn Sie es nur in bestimmten Repositories verwenden möchten, und wählen Sie dann die Repositories aus. Klicken Sie dann auf Installieren und autorisieren.
Kopieren Sie das angezeigte Token. Sie benötigen sie im nächsten Schritt.
Rufen Sie die Seite Settings (Einstellungen) Ihres GitHub-Repositorys auf, klicken Sie auf Secrets und dann auf Add a new secret (Neues Secret hinzufügen), um das Token hinzuzufügen.
Legen Sie im Feld Name den Wert
LHCI_GITHUB_APP_TOKENund im Feld Wert das Token fest, das Sie im letzten Schritt kopiert haben. Klicken Sie dann auf den Button Secret hinzufügen.Öffnen Sie die Datei
lighthouse-ci.yamlund fügen Sie das neue Secret für die Umgebung dem Befehl „run Lighthouse CI“ hinzu.
- name: run Lighthouse CI
run: |
npm install -g @lhci/cli@0.3.x
lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+ env:
+ LHCI_GITHUB_APP_TOKEN: $
- Die Statusprüfung ist einsatzbereit. Erstellen Sie eine neue Pull-Anfrage oder übertragen Sie einen Commit per Push an eine vorhandene Pull-Anfrage, um ihn zu testen.
Lighthouse CI-Server einrichten
Der Lighthouse CI-Server bietet ein Dashboard, über das Sie sich bisherige Lighthouse-Berichte ansehen können. Er kann auch als privater, langfristiger Datenspeicher für Lighthouse-Berichte dienen.
- Wählen Sie die Commits aus, die Sie vergleichen möchten.
- Der Betrag, um den sich der Lighthouse-Wert zwischen den beiden Commits geändert hat.
- In diesem Abschnitt werden nur Messwerte angezeigt, die sich zwischen den beiden Commits geändert haben.
- Regressionen sind rosa hervorgehoben.
- Verbesserungen sind blau hervorgehoben.
Lighthouse CI Server eignet sich am besten für Nutzer, die ihre eigene Infrastruktur bereitstellen und verwalten können.
Informationen zum Einrichten des Lighthouse CI-Servers, einschließlich Anleitungen zur Verwendung von Heroku und Docker für die Bereitstellung, finden Sie in dieser Anleitung.