Zum Hauptinhalt springen




So fügen Sie Lighthouse zu einem kontinuierlichen Integrationssystem wie GitHub Actions hinzu.

Es erscheint in:
Schnelle Ladezeiten

CI Scheinwerfer ist eine Reihe von Tools zur Verwendung von Lighthouse während der kontinuierlichen Integration. Lighthouse CI kann auf viele verschiedene Arten in Entwickler-Workflows integriert werden. Dieser Leitfaden behandelt die folgenden Themen:

  • Verwenden der Lighthouse CI-CLI.
  • Konfigurieren Sie Ihren CI-Anbieter für die Ausführung von Lighthouse CI.
  • ein einrichten GitHub-Aktion y
    Gesundheitskontrolle
    für Lighthouse CI. Dadurch werden Lighthouse-Ergebnisse automatisch in GitHub-Pull-Requests angezeigt.
  • Erstellen eines Leistungs-Dashboards und Data Warehouse für Lighthouse-Berichte.

Übersicht

Lighthouse CI ist eine Reihe kostenloser Tools, die die Verwendung von Lighthouse zur Leistungsüberwachung einfach machen. Ein einzelner Lighthouse-Bericht bietet eine Momentaufnahme der Leistung einer Webseite zum Zeitpunkt ihrer Ausführung; Lighthouse CI zeigt, wie sich diese Erkenntnisse im Laufe der Zeit verändert haben. Dies kann verwendet werden, um die Auswirkungen bestimmter Codeänderungen zu identifizieren oder sicherzustellen, dass Leistungsschwellenwerte während kontinuierlicher Integrationsprozesse eingehalten werden. Obwohl die Leistungsüberwachung der häufigste Anwendungsfall für Lighthouse CI ist, können damit auch andere Aspekte des Lighthouse-Berichts überwacht werden, beispielsweise SEO oder Barrierefreiheit.

Die Hauptfunktionalität von Lighthouse CI wird über die Befehlszeilenschnittstelle von Lighthouse CI bereitgestellt. (Hinweis: Dies ist ein separates Tool Leuchtturm CLI.) Die Lighthouse CI CLI bietet eine Reihe von
Befehle
Lighthouse CI zu verwenden. Zum Beispiel er Autorun Der Befehl führt mehrere Lighthouse-Läufe aus, ermittelt den durchschnittlichen Lighthouse-Bericht und lädt den Bericht in den Speicher hoch. Dieses Verhalten kann durch die Übergabe zusätzlicher Flags oder durch Anpassen der Lighthouse CI-Konfigurationsdatei stark angepasst werden. lighthouserc.js.

Obwohl die Kernfunktionalität von Lighthouse CI hauptsächlich in der Lighthouse CI-CLI gekapselt ist, wird Lighthouse CI typischerweise über einen der folgenden Ansätze verwendet:

  • Betrieb von Lighthouse CI als Teil der kontinuierlichen Integration
  • Verwendung einer Lighthouse CI GitHub-Aktion, die jede Pull-Anfrage ausführt und kommentiert
  • Verfolgen Sie die Leistung im Laufe der Zeit über das von Lighthouse Server bereitgestellte Dashboard.

Alle diese Ansätze basieren auf der Lighthouse CI CLI.

Zu den Alternativen zu Lighthouse CI gehören Leistungsüberwachungsdienste von Drittanbietern oder das Schreiben eines eigenen Skripts zum Sammeln von Leistungsdaten während des CI-Prozesses. Sie sollten die Nutzung eines Drittanbieterdienstes in Betracht ziehen, wenn Sie die Verwaltung Ihres Leistungsüberwachungsservers und Ihrer Testgeräte lieber jemand anderem überlassen möchten oder wenn Sie Benachrichtigungsfunktionen (z. B. E-Mail oder Slack-Integration) wünschen, ohne diese erstellen zu müssen. Funktionen selbst.

Verwenden Sie Lighthouse CI lokal

In diesem Abschnitt wird erläutert, wie Sie die Lighthouse CI CLI lokal ausführen und installieren und wie Sie sie konfigurieren lighthouserc.js. Die lokale Ausführung der Lighthouse CI CLI ist der einfachste Weg, um sicherzustellen, dass Ihre lighthouserc.js ist richtig konfiguriert.

  1. Installieren Sie die Lighthouse CI-CLI.

    npm Installieren -g @lhci/cli

    Lighthouse CI wird durch Platzieren eines konfiguriert lighthouserc.js Datei im Stammverzeichnis des Repositorys Ihres Projekts. Diese Datei ist erforderlich und enthält Konfigurationsinformationen zu Lighthouse CI. Obwohl Lighthouse CI das kann Für die Verwendung ohne Git-Repository konfiguriertBei den Anweisungen in diesem Artikel wird davon ausgegangen, dass das Repository Ihres Projekts für die Verwendung von Git konfiguriert ist.

  2. Erstellen Sie im Stammverzeichnis Ihres Repositorys eine lighthouserc.js Konfigurationsdatei.

    touch lighthouserc.js

  3. Fügen Sie den folgenden Code hinzu lighthouserc.js. Bei diesem Code handelt es sich um eine leere Lighthouse-CI-Konfiguration. Sie werden diese Konfiguration in späteren Schritten ergänzen.

    Modul.Exporte = {
    ci: {
    collect: {
    },
    upload: {
    },
    },
    };

  4. Jedes Mal, wenn Lighthouse CI ausgeführt wird, startet es einen Server, der Ihre Site bedient. Dieser Server ermöglicht es Lighthouse, Ihre Site zu laden, auch wenn keine anderen Server ausgeführt werden. Wenn Lighthouse CI seine Ausführung beendet, wird der Server automatisch heruntergefahren. Um sicherzustellen, dass die Veröffentlichung ordnungsgemäß funktioniert, müssen Sie die konfigurieren
    staticDistDir

    oder
    startServerCommand

    Eigenschaften.

    Wenn Ihre Website statisch ist, fügen Sie Folgendes hinzu staticDistDir Eigentum an die ci.collect
    -Objekt, um anzugeben, wo sich Ihre statischen Dateien befinden. Lighthouse CI verwendet seinen eigenen Server, um diese Dateien beim Testen Ihrer Website bereitzustellen. Wenn Ihre Website nicht statisch ist, fügen Sie Folgendes hinzu startServerCommand Eigentum an die
    ci.collect -Objekt, um den Befehl anzugeben, der Ihren Server startet. Lighthouse CI startet während des Tests einen neuen Serverprozess und fährt ihn anschließend herunter.


    collect: {
    staticDistDir: './public',
    }


    collect: {
    startServerCommand: 'npm run start',
    }

  5. Ergänzen Sie die
    URL

    Eigentum an die ci.collect Objekt, um URL(s) anzugeben, auf denen Lighthouse CI Lighthouse ausführen soll. Der Wert der URL Die Eigenschaft muss als Array von URLs bereitgestellt werden. Dieses Array kann eine oder mehrere URLs enthalten. Standardmäßig führt Lighthouse CI Lighthouse dreimal auf jeder URL aus.

    collect: {
    URL: ['http://localhost:8080']
    }

    Hinweis: Der Server, den Sie im vorherigen Schritt konfiguriert haben, sollte diese URLs bereitstellen können. Wenn Sie Lighthouse CI also lokal ausführen, sollten diese URLs wahrscheinlich Folgendes enthalten: localhost anstelle Ihres Produktionshosts.

  6. Ergänzen Sie die
    Ziel

    Eigentum an die ci.upload Objekt und setzen Sie den Wert auf
    'temporärer-öffentlicher-speicher'. Von Lighthouse CI gesammelte Lighthouse-Berichte werden in den temporären öffentlichen Speicher hochgeladen. Der Bericht bleibt dort sieben Tage lang bestehen und wird dann automatisch gelöscht. In dieser Einrichtungsanleitung wird die Upload-Option „temporärer öffentlicher Speicher“ verwendet, da sie schnell eingerichtet werden kann. Informationen zu anderen Möglichkeiten zum Speichern von Lighthouse-Berichten finden Sie im
    Dokumentation.

    upload: {
    Ziel: 'temporärer-öffentlicher-speicher',
    }

    Der Speicherort des Berichts sieht folgendermaßen 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.)

  7. Führen Sie die Lighthouse CI-CLI vom Terminal aus mit dem aus Autorun Befehl. Dadurch wird Lighthouse dreimal ausgeführt und der Medium Lighthouse-Bericht geladen.

    lhci Autostart

    Wenn Sie Lighthouse CI erfolgreich konfiguriert haben, sollte die Ausführung dieses Befehls zu einer Ausgabe ähnlich der folgenden führen:

    ✅  .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 Zeit(s) on http://localhost:65324/index.html
    Run
    Run
    Run
    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 das ignorieren GitHub-Token nicht festgelegt Meldung in der Konsolenausgabe. Ein GitHub-Token ist nur erforderlich, wenn Sie Lighthouse CI mit einer GitHub-Aktion verwenden möchten. Später in diesem Artikel erklären wir, wie man eine GitHub-Aktion konfiguriert.

    Durch Klicken auf den Link in der Ausgabe, der mit beginnt
    https://storage.googleapis.com... Sie gelangen zum Lighthouse-Bericht für den Lighthouse Medium Run.

    Die von verwendeten Standardwerte Autorun kann über die Befehlszeile oder überschrieben werden
    lighthouserc.js. Zum Beispiel er lighthouserc.js Die folgende Konfiguration gibt an, dass jedes Mal fünf Lighthouse-Läufe erfasst werden sollten Autorun
    ausführen.

  8. Aktualisieren lighthouserc.js Benutze die numberOfRuns Eigentum:

    Modul.Exporte = {
    collect: {
    numberOfRuns: 5
    },
    },
    };

  9. Führen Sie die erneut aus Autorun Befehl:

    lhci Autostart

    Die Terminalausgabe sollte zeigen, dass Lighthouse fünf Mal statt der standardmäßigen drei 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 im lighthouserc.json wenn incorrect.

    Started a web server on port 64444...
    Running Lighthouse 5 Zeit(s) on http://localhost:64444/index.html
    Run
    Run
    Run
    Run
    Run
    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 Konfigurationsoptionen finden Sie unter Lighthouse CI
    Konfigurationsdokumentation.

Konfigurieren Sie Ihren CI-Prozess für die Ausführung von Lighthouse CI

Lighthouse CI kann mit Ihrem bevorzugten CI-Tool verwendet werden. Die Richten Sie Ihren CI-Anbieter ein
Der Dokumentationsabschnitt zu Lighthouse CI enthält Codebeispiele, die zeigen, wie Lighthouse CI in die Konfigurationsdateien gängiger CI-Tools integriert wird. Diese Codebeispiele zeigen insbesondere, wie Lighthouse CI ausgeführt wird, um Leistungsmetriken während des CI-Prozesses zu sammeln.

Die Verwendung von Lighthouse CI zum Sammeln von Leistungsmetriken ist ein guter Ausgangspunkt für die Leistungsüberwachung. Fortgeschrittene Benutzer möchten jedoch möglicherweise noch einen Schritt weiter gehen und Lighthouse CI verwenden, um Builds fehlzuschlagen, wenn sie vordefinierte Kriterien nicht erfüllen, z. B. das Bestehen bestimmter Lighthouse-Audits oder die Einhaltung aller Leistungsbudgets. Dieses Verhalten wird über konfiguriert
behaupten

Eigentum der lighthouserc.js Verfahren.

Lighthouse CI unterstützt drei Ebenen von Behauptungen:

  • aus:Behauptungen ignorieren
  • warnen: Fehler nach stderr drucken
  • Error: Fehler an stderr ausgeben und Lighthouse CI mit einem Wert ungleich Null verlassen
    Exit-Code

Unten finden Sie ein Beispiel dafür lighthouserc.js Konfiguration, die Behauptungen enthält. Legt Behauptungen für die Leistungs- und Barrierefreiheitskategoriebewertungen von Lighthouse fest. Um dies zu testen, fügen Sie die folgenden Aussagen zu Ihrem hinzu lighthouserc.js und führen Sie dann Lighthouse CI erneut aus.

Modul.Exporte = {
ci: {
collect: {
},
behaupten: {
assertions: {
'categories:performance': ['warn', {minScore: 1}],
'categories:accessibility': ['error', {minScore: 1}]
}
},
upload: {
},
},
};

Die generierte Konsolenausgabe sieht folgendermaßen aus:

lhci-warning-8663364

Weitere Informationen zu den Ansprüchen von Lighthouse CI finden Sie im
Dokumentation.

Konfigurieren einer GitHub-Aktion zum Ausführen von Lighthouse CI

In diesem Abschnitt wird davon ausgegangen, dass Sie mit Git, GitHub und GitHub-Pull-Requests vertraut sind.

EIN GitHub-Aktion kann zum Ausführen von Lighthouse CI verwendet werden. Dadurch wird jedes Mal ein neuer Lighthouse-Bericht generiert, wenn eine Codeänderung in einen Zweig eines GitHub-Repositorys übertragen wird. Verwenden Sie dies in Verbindung mit a Gesundheitskontrolle
um diese Ergebnisse bei jeder Pull-Anfrage anzuzeigen.

github-action1-7329948
  1. Erstellen Sie im Stammverzeichnis Ihres Repositorys ein Verzeichnis mit dem Namen
    .github/workflows. das
    Arbeitsabläufe
    für Ihr Projekt wird in diesem Verzeichnis abgelegt. Ein Workflow ist ein Prozess, der zu einem vorgegebenen Zeitpunkt ausgeführt wird (z. B. wenn Code übermittelt wird) und aus einer oder mehreren Aktionen besteht.

    mkdir .github
    mkdir .github/workflows

  2. Im .github/workflows Erstellen Sie eine Datei mit dem Namen Leuchtturm-ci.yaml. Diese Datei enthält die Einstellungen für einen neuen Workflow.

    touch Leuchtturm-ci.yaml

  3. Fügen Sie den folgenden Text hinzu Leuchtturm-ci.yaml.

    Süßkartoffel: Build project and run Lighthouse CI
    auf: [drücken]
    jobs:
    lhci:
    Süßkartoffel: Leuchtturm CI
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - Süßkartoffel: Use Node.js 10.x
    uses: actions/setup-node@v1
    mit:
    node-version: 10.x
    - Süßkartoffel: npm installieren
    run: |
    npm installieren

    - Süßkartoffel: run Lighthouse CI
    run: |
    npm install -g @lhci/[email protected]
    lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"

    Diese Konfiguration richtet einen Workflow ein, der aus einem einzelnen Job besteht, der jedes Mal ausgeführt wird, wenn neuer Code in das Repository übertragen wird. Dieser Job besteht aus vier Schritten:

    • Sehen Sie sich das Repository an, in dem Lighthouse CI ausgeführt wird
    • Installieren und konfigurieren Sie Node
    • Installieren Sie die erforderlichen npm-Pakete
    • Führen Sie Lighthouse CI aus und laden Sie die Ergebnisse in den temporären öffentlichen Speicher hoch.
  4. Übernehmen Sie diese Änderungen und übertragen Sie sie auf GitHub. Wenn Sie die oben genannten Schritte korrekt ausgeführt haben, löst das Übertragen des Codes an GitHub die Ausführung des soeben hinzugefügten Workflows aus.

  5. Para confirmar que Lighthouse CI se ha activado y ver el informe que generó, vaya a la Verhalten pestaña de su proyecto. Deberías ver el
    Construir proyecto y ejecutar Lighthouse CI flujo de trabajo enumerado en su confirmación más reciente.

    github-action2-9621453

    Puede navegar hasta el informe Lighthouse correspondiente a una confirmación en particular desde el Verhalten lengüeta. Haga clic en el compromiso, haga clic en el CI Scheinwerfer
    paso del flujo de trabajo, luego expanda los resultados del ejecutar Lighthouse CI paso.

    github-action3-4590666

    Acaba de configurar una acción de GitHub para ejecutar Lighthouse CI. Esto será más útil cuando se use junto con un GitHub Gesundheitskontrolle.

Einrichten einer GitHub-Statusprüfung

Una verificación de estado, si está configurada, es un mensaje que aparece en cada RP y generalmente incluye información como los resultados de una prueba o el éxito de una compilación.

github-action1-7329948

Los pasos siguientes explican cómo configurar una verificación de estado para Lighthouse CI.

  1. Gehe zum Página de la aplicación Lighthouse CI GitHub und klicken Sie auf Einrichten.

  2. (Opcional) Si formas parte de varias organizaciones en GitHub, elige la organización propietaria del repositorio para el que quieres usar Lighthouse CI.

  3. Bitte auswählen Todos los repositorios si desea habilitar Lighthouse CI en todos los repositorios o seleccione Seleccionar solo repositorios si solo desea usarlo en repositorios específicos, y luego seleccione los repositorios. Luego haga clic en
    Instalar y autorizar.

  4. Copie el token que se muestra. Lo usará en el siguiente paso.

  5. Para agregar el token, navegue hasta el Konfigurationen página de su repositorio de GitHub, haga clic en Misterios, luego haga clic en Agregar un nuevo secreto.

    github-action4-9799703
  6. Wähle aus Name campo a LHCI_GITHUB_APP_TOKEN y configurar el Wert
    campo al token que copió en el último paso y luego haga clic en el Agregar secreto Taste.

  7. La verificación de estado está lista para usarse. Para probarlo, crear una nueva solicitud de extracción
    o enviar una confirmación a una solicitud de extracción existente.

Konfigurieren Sie den Lighthouse CI-Server

El servidor Lighthouse CI proporciona un panel para explorar los informes históricos de Lighthouse. También puede actuar como un almacén de datos privado a largo plazo para los informes Lighthouse.

server1-1307565
server2-5267537
  1. Elija qué compromisos comparar.
  2. La cantidad que ha cambiado la puntuación de Lighthouse entre las dos confirmaciones.
  3. Esta sección solo muestra las métricas que han cambiado entre las dos confirmaciones.
  4. Las regresiones se resaltan en rosa.
  5. Las mejoras están resaltadas en azul.

Lighthouse CI Server se adapta mejor a los usuarios que se sienten cómodos implementando y administrando su propia infraestructura.

Para obtener información sobre cómo configurar el servidor Lighthouse CI, incluidas las recetas para usar Heroku y Docker para la implementación, consulte estos
Anleitung.

Erfahren Sie mehr