GitHub Actions se utilizan para automatizar los flujos de trabajo de ingeniería de software. Al igual que herramientas como CircleCI, Jenkins, Travis y muchas otras, GitHub Actions proporciona una API declarativa para definir flujos de trabajo. Estos flujos de trabajo pueden incluir trabajos para construir, probar y desplegar aplicaciones.

Lighthouse es un proyecto de código abierto de Google para mejorar la calidad de las páginas web. Proporciona métricas centradas en el usuario para auditar el SEO, el rendimiento, la accesibilidad, mejores prácticas y las aplicaciones web progresivas. Para profundizar en Lighthouse, lee "Cómo analizar el rendimiento de un sitio web con Lighthouse". Este post demostrará lo siguiente:

  • Implementación básica de Lighthouse en un flujo de trabajo de GitHub Actions.
  • Configuración avanzada para mostrar los resultados de Lighthouse en los comentarios de las solicitudes de extracción.
  • Reporte de informes Lighthouse en S3.
  • Notificaciones de Slack.

Lighthouse Comprobación de GitHub Action

Esta entrada proporcionará una guía para utilizar Lighthouse Check Action para automatizar las auditorías de Lighthouse. Se puede utilizar dentro de un flujo de trabajo, desencadenado por cualquier evento. Este post demostrará cómo utilizar la acción cuando se desencadena por un evento de solicitud de extracción.

Ejemplo básico

Con los siguientes pasos podemos crear un flujo de trabajo básico.

  1. Crea y cambia a una nueva rama localmente.
  2. Cree un archivo en su proyecto con una ruta similar a la siguiente .github/workflows/mi-flujo-de-trabajo.yml (sustituyendo mi-flujo-de-trabajo por cualquier nombre de tu elección).
  3. Rellene el archivo anterior con el ejemplo que se muestra a continuación, sustituyendo el campo urls por una lista separada por comas de las URLs que deseas probar.
  4. Confirme los cambios localmente y envíe la rama a la remota.
  5. Desde tu nueva rama, abre un pull request.
name: Lighthouse Check
on: [pull_request]

jobs:
  lighthouse-check:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master
    - run: mkdir /tmp/artifacts
    - name: Run Lighthouse
      uses: foo-software/lighthouse-check-action@master
      with:
        outputDirectory: /tmp/artifacts
        urls: 'https://www.foo.software,https://www.foo.software/contact'
    - name: Upload artifacts
      uses: actions/upload-artifact@master
      with:
        name: Lighthouse reports
        path: /tmp/artifacts
yaml

Y Voilà? - ¡Nosotros tenemos un flujo de trabajo con Lighthouse! Asumiendo que tienes las Github Actions habilitadas en tu repo, tú deberías ver algo como lo siguiente (nota: en el momento de escribir esto las Github Actions están en modo "beta" y requieren registro).

Tabs del repositorio de GitHub 

Al hacer clic en "Acciones" se enumeran todos los flujos de trabajo que se están ejecutando y los anteriores.

Flujo de trabajo de la lista de Github Actions

Después de seguir los pasos de nuestro ejemplo básico, tú deberías ver un elemento en esta lista. Al hacer clic en él se nos mostrarán los resultados de Lighthouse impresos en la consola.

Resultados de Lighthouse impresos en consola

Desde nuestra configuración, también tenemos resultados capturados en informes HTML guardados como "artefactos".

Al hacer clic en el desplegable "Artefactos" se descargan los informes HTML
Informe completo de Lighthouse como archivo HTML descargado de "Artifacts"

Ejemplo avanzado

Lighthouse Check Action ofrece un conjunto completo de campanas y silbatos utilizando el módulo de NPM( lighthouse-check) bajo el capó. Hay mucho más que podemos hacer con esto. ¡Vamos a proceder!

Comentarios del Pull Request

Al utilizar esta función, los comentarios se publican con los resultados de Lighthouse en cada confirmación. Nosotros podemos hacerlo siguiendo los siguientes pasos.

  1. Crea un nuevo usuario o busca uno ya existente para que actúe como "bot".
  2. Crear un token de acceso personal desde esta cuenta de usuario.
  3. Crea un secreto de GitHub para mantener el valor encriptado desde arriba. En nuestro ejemplo lo nombramos LIGHTHOUSE_CHECK_GITHUB_ACCESS_TOKEN.
  4. Actualizar nuestro archivo de flujo de trabajo con el diff que se muestra a continuación.
  5. Commit y push.
with:
+  accessToken: ${{ secrets.LIGHTHOUSE_CHECK_GITHUB_ACCESS_TOKEN }}
  outputDirectory: /tmp/artifacts
yaml

Con esto, hemos creado un bot para publicar los resultados de Lighthouse en los pull requests

Lighthouse resultados como comentarios en los Pull Request

Reporte de informes S3

En nuestro ejemplo, nosotros persistimos los resultados cargando los informes como artefactos en nuestro flujo de trabajo. Esta solución podría ser suficiente en algunos casos, pero los artefactos no se almacenan permanentemente. Para ver los informes, tenemos que navegar en el flujo de trabajo y descargar manualmente los informes desde la vista de artefactos.

Pero, ¿Si queremos una forma más fiable de almacenar y referenciar los informes? Aquí es donde entra en juego la función S3. Nosotros podemos configurar el almacenamiento de AWS S3 siguiendo los siguientes pasos.

  1. Cree una cuenta de AWS, si, tú no tienes una.
  2. Crea un S3 bucket, si, tú no tienes uno.
  3. Adquiere un identificador de clave de acceso de AWS y una clave de acceso secreta.
  4. Crea secretos de GitHub para estos dos valores. En nuestro ejemplo nosotros usaremos LIGHTHOUSE_CHECK_AWS_ACCESS_KEY_ID  y LIGHTHOUSE_CHECK_AWS_SECRET_ACCESS_KEY, respectivamente.
  5. Añade el nombre del cubo y la región (ejemplo: us-east-1) como secretos de GitHub: LIGHTHOUSE_CHECK_AWS_BUCKET y LIGHTHOUSE_CHECK_AWS_REGION.

A continuación, nosotros actualizaremos nuestra configuración con el siguiente diff.

with:
  accessToken: ${{ secrets.LIGHTHOUSE_CHECK_GITHUB_ACCESS_TOKEN }}
+  awsAccessKeyId: ${{ secrets.LIGHTHOUSE_CHECK_AWS_ACCESS_KEY_ID }}
+  awsBucket: ${{ secrets.LIGHTHOUSE_CHECK_AWS_BUCKET }}
+  awsRegion: ${{ secrets.LIGHTHOUSE_CHECK_AWS_REGION }}
+  awsSecretAccessKey: ${{ secrets.LIGHTHOUSE_CHECK_AWS_SECRET_ACCESS_KEY }}
yaml

¡En nuestro próximo commit y push, los informes se suben automáticamente a S3 ✅! También los tenemos enlazados en los comentarios de nuestro PR.

Lighthouse resultados PR commentarios con reporte del enlace del S3

Notificaciones de Slack

¿Qué es una nueva función en un flujo de trabajo de DevOps sin las notificaciones de Slack? Una tristeza sin duda. Vamos a acelerar las cosas añadiendo notificaciones a un canal de Slack para que todo nuestro equipo las vea. Nosotros podemos lograr esto en los siguientes pasos.

  1. Cree un "Webhook entrante" en su espacio de trabajo de Slack y autorice un canal.
  2. Añade la URL del Webhook como secreto de GitHub  - LIGHTHOUSE_CHECK_WEBHOOK_URL.
  3. Añade los datos de GitHub y la URL del Webhook a nuestra configuración con el siguiente diff. Los datos de GitHub se renderizarán en nuestras notificaciones. Nosotros pasamos los datos de GitHub a través de la configuración con el "contexto" de GitHub.
with:
  accessToken: ${{ secrets.LIGHTHOUSE_CHECK_GITHUB_ACCESS_TOKEN }}  +  author: ${{ github.actor }}
  awsAccessKeyId: ${{ secrets.LIGHTHOUSE_CHECK_AWS_ACCESS_KEY_ID }}
  awsBucket: ${{ secrets.LIGHTHOUSE_CHECK_AWS_BUCKET }}
  awsRegion: ${{ secrets.LIGHTHOUSE_CHECK_AWS_REGION }}
  awsSecretAccessKey: ${{ secrets.LIGHTHOUSE_CHECK_AWS_SECRET_ACCESS_KEY }}
+  branch: ${{ github.ref }}
  outputDirectory: /tmp/artifacts
+  sha: ${{ github.sha }}
+  slackWebhookUrl: ${{ secrets.LIGHTHOUSE_CHECK_WEBHOOK_URL }}
  urls: 'https://www.foo.software,https://www.foo.software/contact'
yaml

¡Nuestro próximo commit y push introduce las notificaciones de Slack! El enlace "Lighthouse audit" está en la siguiente captura de pantalla, navega por el informe del S3 tal y como está configurado✨.

Lighthouse Slack notificación

Mantener un registro histórico

Foo's Automated Lighthouse Check es una herramienta que podemos utilizar para gestionar un registro histórico de las auditorías de Lighthouse. Nosotros podemos conectarnos a ella con el GitHub de Lighthouse Check. De esta forma podemos ejecutar Lighthouse de forma remota frente a un entorno local y dockerizado de GitHub. Con esto nosotros podemos estar seguros de que nuestros resultados de Lighthouse no son defectuosos por el cambio de infraestructura de GitHub. Siga los pasos documentados para conectarse con Automated Lighthouse Check.

Un registro histórico de las auditorías de Lighthouse con "Automated Lighthouse Check"

¿Y ahora qué?

Puede encontrar un ejemplo completo de lo anterior en la documentación de Lighthouse Check Action. ¡Espero que este artículo sea un complemento útil para su flujo de trabajo en DevOps!. Con Lighthouse integrado en un pipeline de CI/CD, podemos estar totalmente equipados para asegurar una alta calidad en el SEO del sitio web, el rendimiento, la accesibilidad, las mejores prácticas y las aplicaciones web progresivas.

Traducido del artículo de Adam Henson - How to use Lighthouse in GitHub Actions