Zum Hauptinhalt springen

Cómo agregar Lighthouse a un sistema de integración continua, como GitHub Actions.

Es erscheint in:
Schnelle Ladezeiten

CI Scheinwerfer es un conjunto de herramientas para utilizar Lighthouse durante la integración continua. Lighthouse CI se puede incorporar a los flujos de trabajo de los desarrolladores de muchas formas diferentes. Esta guía cubre los siguientes temas:

  • Usando la CLI de Lighthouse CI.
  • Configuración de su proveedor de CI para ejecutar Lighthouse CI.
  • Configurar un Acción de GitHub y
    comprobación del estado
    para Lighthouse CI. Esto mostrará automáticamente los resultados de Lighthouse en las solicitudes de extracción de GitHub.
  • Creación de un panel de rendimiento y un almacén de datos para informes Lighthouse.

Übersicht

Lighthouse CI es un conjunto de herramientas gratuitas que facilitan el uso de Lighthouse para la supervisión del rendimiento. Un solo informe Lighthouse proporciona una instantánea del rendimiento de una página web en el momento en que se ejecuta; Lighthouse CI muestra cómo estos hallazgos han cambiado con el tiempo. Esto se puede usar para identificar el impacto de cambios de código particulares o garantizar que se cumplan los umbrales de rendimiento durante los procesos de integración continua. Aunque la supervisión del rendimiento es el caso de uso más común de Lighthouse CI, se puede utilizar para supervisar otros aspectos del informe Lighthouse, por ejemplo, SEO o accesibilidad.

La funcionalidad principal de Lighthouse CI la proporciona la interfaz de línea de comandos de Lighthouse CI. (Nota: esta es una herramienta separada de la Leuchtturm CLI.) La CLI de Lighthouse CI proporciona un conjunto de
comandos
para usar Lighthouse CI. Por ejemplo, el autorun El comando ejecuta múltiples ejecuciones de Lighthouse, identifica el informe medio de Lighthouse y carga el informe para su almacenamiento. Este comportamiento se puede personalizar en gran medida pasando indicadores adicionales o personalizando el archivo de configuración de Lighthouse CI, lighthouserc.js.

igraal_de-de

Aunque la funcionalidad principal de Lighthouse CI se encapsula principalmente en la CLI de Lighthouse CI, Lighthouse CI se utiliza normalmente a través de uno de los siguientes enfoques:

  • Ejecución de Lighthouse CI como parte de la integración continua
  • Uso de una acción Lighthouse CI GitHub que se ejecuta y comenta en cada solicitud de extracción
  • Seguimiento del rendimiento a lo largo del tiempo a través del panel proporcionado por Lighthouse Server.

Todos estos enfoques se basan en la CLI de Lighthouse CI.

Las alternativas a Lighthouse CI incluyen servicios de monitoreo de rendimiento de terceros o escribir su propio script para recopilar datos de rendimiento durante el proceso de CI. Debería considerar el uso de un servicio de terceros si prefiere dejar que otra persona se encargue de la administración de su servidor de monitoreo de rendimiento y dispositivos de prueba, o si desea capacidades de notificación (como correo electrónico o integración de Slack) sin tener que crearlas. características usted mismo.

Usar Lighthouse CI localmente

Esta sección explica cómo ejecutar e instalar la CLI de Lighthouse CI localmente y cómo configurar lighthouserc.js. Ejecutar la CLI de Lighthouse CI localmente es la forma más fácil de asegurarse de que su lighthouserc.js ist richtig konfiguriert.

  1. Instale la CLI de Lighthouse CI.

    npm install -g @lhci/cli

    Lighthouse CI se configura colocando un lighthouserc.js archivo en la raíz del repositorio de su proyecto. Este archivo es obligatorio y contendrá información de configuración relacionada con Lighthouse CI. Aunque Lighthouse CI puede configurado para ser utilizado sin un repositorio de git, las instrucciones de este artículo asumen que el repositorio de su proyecto está configurado para usar git.

  2. En la raíz de su repositorio, cree un lighthouserc.js archivo de configuración.

    touch lighthouserc.js

  3. Agregue el siguiente código a lighthouserc.js. Este código es una configuración de Lighthouse CI vacía. Agregará a esta configuración en pasos posteriores.

    module.exports = {
    ci: {
    collect: {
    },
    upload: {
    },
    },
    };

  4. Cada vez que se ejecuta Lighthouse CI, inicia un servidor para servir su sitio. Este servidor es lo que permite a Lighthouse cargar su sitio incluso cuando no hay otros servidores en ejecución. Cuando Lighthouse CI termine de ejecutarse, apagará automáticamente el servidor. Para asegurarse de que la publicación funcione correctamente, debe configurar el
    staticDistDir

    oder
    startServerCommand

    propiedades.

    Si su sitio es estático, agregue el staticDistDir propiedad a la ci.collect
    objeto para indicar dónde se encuentran sus archivos estáticos. Lighthouse CI utilizará su propio servidor para servir estos archivos mientras prueba su sitio. Si su sitio no es estático, agregue el startServerCommand propiedad a la
    ci.collect objeto para indicar el comando que inicia su servidor. Lighthouse CI iniciará un nuevo proceso de servidor durante la prueba y lo apagará después.


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


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

  5. Ergänzen Sie die
    URL

    propiedad a la ci.collect objeto para indicar URL (s) en las que Lighthouse CI debe ejecutar Lighthouse. El valor de la URL la propiedad debe proporcionarse como una matriz de URL; esta matriz puede contener una o más URL. De forma predeterminada, Lighthouse CI ejecutará Lighthouse tres veces en cada URL.

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

    Nota: El servidor que configuró en el paso anterior debería poder publicar estas URL. Por lo tanto, si está ejecutando Lighthouse CI localmente, estas URL probablemente deberían incluir localhost en lugar de su host de producción.

  6. Ergänzen Sie die
    Ziel

    propiedad a la ci.upload objeto y establezca el valor en
    'temporary-public-storage'. Los informes de Lighthouse recopilados por Lighthouese CI se cargarán en un almacenamiento público temporal. El informe permanecerá allí durante siete días y luego se eliminará automáticamente. Esta guía de configuración utiliza la opción de carga de «almacenamiento público temporal» porque es rápida de configurar. Para obtener información sobre otras formas de almacenar informes Lighthouse, consulte la
    Dokumentation.

    upload: {
    target: 'temporary-public-storage',
    }

    La ubicación de almacenamiento del informe será similar a esta:

    https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html

    (Esta URL no funcionará porque el informe ya se eliminó).

  7. Ejecute la CLI de Lighthouse CI desde la terminal utilizando el autorun mando. Esto ejecutará Lighthouse tres veces y cargará el informe de Lighthouse mediano.

    lhci autorun

    Si ha configurado correctamente Lighthouse CI, la ejecución de este comando debería producir un resultado similar a este:

    ✅  .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
    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.

    Puedes ignorar el GitHub token not set mensaje en la salida de la consola. Un token de GitHub solo es necesario si desea utilizar Lighthouse CI con una acción de GitHub. Más adelante en este artículo se explica cómo configurar una acción de GitHub.

    Al hacer clic en el enlace en la salida que comienza con
    https://storage.googleapis.com... lo llevará al informe de Lighthouse correspondiente a la carrera mediana de Lighthouse.

    Los valores predeterminados utilizados por autorun se puede anular a través de la línea de comando o
    lighthouserc.js. Por ejemplo, el lighthouserc.js La configuración siguiente indica que se deben recopilar cinco ejecuciones de Lighthouse cada vez autorun
    ejecuta.

  8. Aktualisieren lighthouserc.js usar el numberOfRuns Eigentum:

    module.exports = {
    collect: {
    numberOfRuns: 5
    },
    },
    };

  9. Vuelva a ejecutar el autorun mando:

    lhci autorun

    La salida del terminal debe mostrar que Lighthouse se ha ejecutado cinco veces en lugar de las tres predeterminadas:

    ✅  .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
    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.

    Para conocer otras opciones de configuración, consulte Lighthouse CI
    documentación de configuración.

Configure su proceso de CI para ejecutar Lighthouse CI

Lighthouse CI se puede utilizar con su herramienta de CI favorita. los Configure su proveedor de CI
La sección de la documentación de Lighthouse CI contiene ejemplos de código que muestran cómo incorporar Lighthouse CI en los archivos de configuración de herramientas de CI comunes. Específicamente, estos ejemplos de código muestran cómo ejecutar Lighthouse CI para recopilar medidas de rendimiento durante el proceso de CI.

El uso de Lighthouse CI para recopilar medidas de rendimiento es un buen lugar para comenzar con la supervisión del rendimiento. Sin embargo, los usuarios avanzados pueden querer ir un paso más allá y usar Lighthouse CI para fallar en las compilaciones si no cumplen con los criterios predefinidos, como aprobar auditorías específicas de Lighthouse o cumplir con todos los presupuestos de desempeño. Este comportamiento se configura a través del
assert

Eigentum der lighthouserc.js Verfahren.

Lighthouse CI admite tres niveles de afirmaciones:

  • off: ignorar afirmaciones
  • warn: imprime fallas en stderr
  • Error: imprime fallas en stderr y sale de Lighthouse CI con un valor distinto de cero
    código de salida

A continuación se muestra un ejemplo de lighthouserc.js configuración que incluye aserciones. Establece afirmaciones para las puntuaciones de las categorías de accesibilidad y rendimiento de Lighthouse. Para probar esto, agregue las afirmaciones que se muestran a continuación a su lighthouserc.js y luego vuelva a ejecutar Lighthouse CI.

module.exports = {
ci: {
collect: {
},
assert: {
assertions: {
'categories:performance': ['warn', {minScore: 1}],
'categories:accessibility': ['error', {minScore: 1}]
}
},
upload: {
},
},
};

La salida de la consola que genera se ve así:

lhci-warning-8663364

Para obtener más información sobre las afirmaciones de Lighthouse CI, consulte la
Dokumentation.

Configurar una acción de GitHub para ejecutar Lighthouse CI

Esta sección asume que está familiarizado con las solicitudes de extracción de git, GitHub y GitHub.

EIN Acción de GitHub se puede utilizar para ejecutar Lighthouse CI. Esto generará un nuevo informe Lighthouse cada vez que se envíe un cambio de código a cualquier rama de un repositorio de GitHub. Use esto junto con un comprobación del estado
para mostrar estos resultados en cada solicitud de extracción.

github-action1-7329948
  1. En la raíz de su repositorio, cree un directorio llamado
    .github/workflows. das
    flujos de trabajo
    para su proyecto irá en este directorio. Un flujo de trabajo es un proceso que se ejecuta en un momento predeterminado (por ejemplo, cuando se envía un código) y se compone de una o más acciones.

    mkdir .github
    mkdir .github/workflows

  2. Im .github/workflows crea un archivo llamado lighthouse-ci.yaml. Este archivo contendrá la configuración para un nuevo flujo de trabajo.

    touch lighthouse-ci.yaml

  3. Agregue el siguiente texto a lighthouse-ci.yaml.

    name: Build project and run Lighthouse CI
    on: [push]
    jobs:
    lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest
    steps:
    - uses: actions/[email protected]
    - name: Use Node.js 10.x
    uses: actions/setup-[email protected]
    with:
    node-version: 10.x
    - name: npm install
    run: |
    npm install

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

    Esta configuración establece un flujo de trabajo que consta de un único trabajo que se ejecutará cada vez que se envíe un nuevo código al repositorio. Este trabajo tiene cuatro pasos:

    • Consulte el repositorio en el que se ejecutará Lighthouse CI
    • Instalar y configurar Node
    • Instalar los paquetes npm necesarios
    • Ejecute Lighthouse CI y cargue los resultados en un almacenamiento público temporal.
  4. Confirme estos cambios y envíelos a GitHub. Si ha seguido correctamente los pasos anteriores, enviar código a GitHub activará la ejecución del flujo de trabajo que acaba de agregar.

  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 comprobación del estado.

Configurar una verificación de estado de GitHub

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.

Configurar el servidor Lighthouse CI

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

Error: Beachtung: Geschützter Inhalt.