Ajouter Lighthouse à un système d'intégration continue tel que GitHub Actions
Lighthouse CI est une suite permettant d'utiliser Lighthouse pendant l'intégration continue. Lighthouse CI peut être intégrés aux workflows des développeurs de différentes manières. Ce guide aborde les points suivants : les sujets suivants:
- Utiliser la CLI Lighthouse CI
- Configurer votre fournisseur CI pour exécuter Lighthouse CI
- Configurer une action GitHub et état coche pour Lighthouse CI. Les résultats Lighthouse s'afficheront automatiquement sur Demandes d'extraction GitHub.
- Création d'un tableau de bord des performances et d'un data store pour les rapports Lighthouse
Présentation
Lighthouse CI est une suite d'outils sans frais qui facilite l'utilisation de Lighthouse pour la surveillance des performances. Un seul rapport Lighthouse fournit un instantané d'une page Web les performances de la page au moment de son exécution. Lighthouse CI montre comment les résultats ont changé au fil du temps. Cela peut servir à identifier l'impact modifications particulières du code ou s'assurer que les seuils de performances sont atteints pendant des processus d'intégration continue. Bien que la surveillance des performances d'utilisation courante de Lighthouse CI, il permet de surveiller d'autres aspects le rapport Lighthouse, comme le SEO ou l'accessibilité.
La fonctionnalité de base de Lighthouse CI est fournie par la commande Lighthouse CI
de commande. (Remarque: Cet outil est différent du Lighthouse
CLI). La
La CLI Lighthouse CI fournit un ensemble
commandes
pour utiliser Lighthouse CI. Par exemple, la commande autorun
exécute plusieurs
Lighthouse s'exécute, identifie le rapport Lighthouse médian et l'importe
pour le stockage. Ce comportement peut être hautement personnalisé en transmettant des options supplémentaires
ou en personnalisant le fichier de configuration de Lighthouse CI, lighthouserc.js
.
Bien que la fonctionnalité de base de Lighthouse CI soit principalement encapsulée la CLI Lighthouse CI, la CLI Lighthouse CI est généralement utilisée via l'un des approches suivantes:
- Exécuter Lighthouse CI dans le cadre de l'intégration continue
- Utiliser une action GitHub CI Lighthouse qui s'exécute et commente chaque extraction demander
- Suivi des performances au fil du temps via le tableau de bord fourni par Lighthouse Google Cloud.
Toutes ces approches sont basées sur la CLI Lighthouse CI.
Les alternatives à la CI Lighthouse incluent la surveillance des performances par un tiers ou écrire votre propre script pour collecter des données sur les performances pendant l'intégration continue processus. Vous devriez envisager d'utiliser un service tiers si vous préférez que quelqu'un d'autre gère votre serveur de surveillance des performances des appareils de test, ou des fonctionnalités de notification (comme les e-mails ou Slack) ; sans avoir à créer vous-même ces fonctionnalités.
Utiliser Lighthouse CI localement
Cette section explique comment exécuter et installer la CLI Lighthouse CI en local et comment
comment configurer lighthouserc.js
. L'exécution de la CLI Lighthouse CI en local
le moyen le plus simple de vous assurer que votre lighthouserc.js
est correctement configuré.
Installez la CLI Lighthouse CI.
npm install -g @lhci/cli
La configuration de Lighthouse CI est configurée en plaçant un fichier
lighthouserc.js
à la racine de dans le dépôt de votre projet. Ce fichier est obligatoire et contiendra Lighthouse CI les informations de configuration associées. Bien que Lighthouse CI puisse être configuré être utilisée sans Repo, les instructions de cet article supposent que le dépôt de votre projet est configuré utilisez git.À la racine de votre dépôt, créez une configuration
lighthouserc.js
. fichier.touch lighthouserc.js
Ajoutez le code suivant à
lighthouserc.js
. Ce code est vide Configuration CI Lighthouse. Vous ajouterez des éléments à cette configuration dans les étapes suivantes.module.exports = { ci: { collect: { /* Add configuration here */ }, upload: { /* Add configuration here */ }, }, };
Chaque fois que Lighthouse CI s'exécute, il démarre un serveur pour diffuser votre site. Ce serveur permet à Lighthouse de charger votre site même serveurs en cours d'exécution. Une fois l'exécution de Lighthouse CI terminée, automatiquement le serveur. Pour vous assurer que l'inférence fonctionne correctement, vous devez configurer
staticDistDir
oustartServerCommand
propriétés.Si votre site est statique, ajoutez la propriété
staticDistDir
àci.collect
pour indiquer l'emplacement de vos fichiers statiques. Lighthouse CI utilisent son propre serveur pour diffuser ces fichiers tout en testant votre site. Si votre site n'est pas statique, ajoutez la propriétéstartServerCommand
auci.collect
pour indiquer la commande qui démarre votre serveur. Lighthouse CI lancera un nouveau processus de serveur pendant les tests et l'arrêtera à la baisse.// Static site example collect: { staticDistDir: './public', }
// Dynamic site example collect: { startServerCommand: 'npm run start', }
Ajoutez le
url
à l'objetci.collect
pour indiquer les URL avec lesquelles la CI Lighthouse sur lequel vous devez exécuter Lighthouse. La valeur de la propriétéurl
doit être fournies sous la forme d'un tableau d'URL ; ce tableau peut contenir une ou plusieurs URL. Par par défaut, Lighthouse CI exécutera Lighthouse trois fois pour chaque URL.collect: { // ... url: ['http://localhost:8080'] }
Ajoutez le
target
à l'objetci.upload
et définissez sa valeur sur'temporary-public-storage'
Le ou les rapports Lighthouse collectés par Lighthouse CI sera importé dans un espace de stockage public temporaire. Le rapport y seront conservées pendant sept jours, puis seront automatiquement supprimées. Cette configuration utilise le "stockage public temporaire" car elle est rapide. à configurer. Pour en savoir plus sur les autres façons de stocker les rapports Lighthouse, consultez vers documentation.upload: { target: 'temporary-public-storage', }
L'emplacement de stockage du rapport se présente comme suit:
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
(Cette URL ne fonctionnera pas, car le rapport a déjà été supprimé.)
Exécutez la CLI Lighthouse CI à partir du terminal à l'aide de la commande
autorun
. Lighthouse sera exécuté trois fois et la valeur médiane de Lighthouse sera importée .lhci autorun
Si vous avez correctement configuré Lighthouse CI, l'exécution de cette commande devrait produit un résultat semblable à celui-ci:
✅ .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.
Vous pouvez ignorer le message
GitHub token not set
dans le résultat de la console. A Le jeton GitHub n'est nécessaire que si vous souhaitez utiliser la CI Lighthouse avec un dépôt GitHub action. La configuration d'une action GitHub est expliquée plus loin dans cet article.En cliquant sur le lien dans la sortie commençant par
https://storage.googleapis.com...
vous redirigera vers le rapport Lighthouse correspondant à l'exécution médiane de Lighthouse.Les valeurs par défaut utilisées par
autorun
peuvent être remplacées via la ligne de commande oulighthouserc.js
Par exemple, la configurationlighthouserc.js
ci-dessous indique que cinq exécutions Lighthouse doivent être collectées à chaque fois queautorun
s’exécute.Mettez à jour
lighthouserc.js
pour utiliser la propriéténumberOfRuns
:module.exports = { // ... collect: { numberOfRuns: 5 }, // ... }, };
Exécutez à nouveau la commande
autorun
:lhci autorun
Le résultat du terminal devrait indiquer que Lighthouse a été exécuté cinq fois au lieu de que les trois options par défaut:
✅ .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.
Pour en savoir plus sur les autres options de configuration, reportez-vous à la documentation de configuration documentation.
Configurez votre processus d'intégration continue (CI) pour exécuter Lighthouse CI
Vous pouvez utiliser Lighthouse CI avec votre outil d'intégration continue préféré. La page Configurer votre CI Fournisseur de la documentation de Lighthouse CI contient des exemples de code montrant comment d'intégrer Lighthouse CI dans les fichiers de configuration des outils CI courants. Plus précisément, ces exemples de code montrent comment exécuter Lighthouse CI pour collecter les mesures des performances pendant le processus CI.
L'utilisation de Lighthouse CI pour collecter des mesures de performances est un bon point de départ.
avec la surveillance des performances. Cependant, les utilisateurs avancés
peuvent vouloir passer à une étape
et utiliser la CI Lighthouse pour faire échouer les compilations si celles-ci ne répondent pas aux exigences
des critères comme la réussite à certains audits Lighthouse ou le respect de toutes les performances
les budgets. Vous pouvez configurer ce comportement via
assert
du fichier lighthouserc.js
.
Lighthouse CI accepte trois niveaux d'assertion:
off
: ignore les assertionswarn
: échecs d'impression sur stderrerror
: échecs d'impression vers stderr et quitter Lighthouse CI avec une valeur non nulle sortie code
Vous trouverez ci-dessous un exemple de configuration lighthouserc.js
qui inclut
assertions. Il définit des assertions pour les scores de performance de Lighthouse et
catégories d'accessibilité. Pour essayer, ajoutez les assertions ci-dessous à
votre fichier lighthouserc.js
, puis réexécutez Lighthouse CI.
module.exports = {
ci: {
collect: {
// ...
},
assert: {
assertions: {
'categories:performance': ['warn', {minScore: 1}],
'categories:accessibility': ['error', {minScore: 1}]
}
},
upload: {
// ...
},
},
};
La sortie de la console qu'il génère ressemble à ceci:
![Capture d'écran d'un message d'avertissement généré par Lighthouse CI](https://web.dev/static/articles/lighthouse-ci/image/screenshot-a-warning-mes-f1c97df5d1d.png?authuser=6&hl=fr)
Pour en savoir plus sur les assertions CI Lighthouse, consultez documentation.
Configurer une action GitHub pour exécuter Lighthouse CI
Une action GitHub peut être utilisée pour exécuter Lighthouse CI. Un nouveau rapport Lighthouse est généré chaque fois qu'un code la modification est transmise à n'importe quelle branche d'un dépôt GitHub. Utilisez cet outil en conjonction ayant un état coche pour afficher ces résultats à chaque demande d'extraction.
![Capture d'écran d'une vérification d'état GitHub](https://web.dev/static/articles/lighthouse-ci/image/screenshot-a-github-stat-667c532905358.png?authuser=6&hl=fr)
À la racine de votre dépôt, créez un répertoire nommé
.github/workflows
La workflows de votre projet se trouvent dans ce répertoire. Un flux de travail est un processus qui s'exécute à un moment prédéterminé (lors de l'envoi du code, par exemple) composé d'une ou de plusieurs actions.mkdir .github mkdir .github/workflows
Dans
.github/workflows
, créez un fichier nommélighthouse-ci.yaml
. Ce fichier contiendra la configuration d'un nouveau workflow.touch lighthouse-ci.yaml
Ajoutez le texte suivant à
lighthouse-ci.yaml
.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!"
Cette configuration met en place un workflow constitué d'un seul job qui s'exécutera chaque fois que du nouveau code est transféré vers le dépôt. Ce job comporte quatre étapes:
- Consultez le dépôt sur lequel la CI Lighthouse sera exécutée
- Installer et configurer un nœud
- Installer les packages npm requis
- Exécutez Lighthouse CI et importez les résultats dans un espace de stockage public temporaire.
Validez ces modifications et déployez-les sur GitHub. Si vous avez correctement suivi suivre les étapes ci-dessus, le transfert du code vers GitHub déclenchera l'exécution du workflow que vous venez d'ajouter.
Pour confirmer le déclenchement de la CI Lighthouse et afficher le rapport, accédez à l'onglet Actions de votre projet. Vous devriez voir Build project and Run Lighthouse CI (Créer un projet et exécuter Lighthouse CI) commit récent.
Vous pouvez accéder au rapport Lighthouse correspondant à un commit particulier dans l'onglet Actions. Cliquez sur le commit, puis sur Lighthouse CI. étape du workflow, puis développez les résultats de l'étape Exécuter Lighthouse CI.
Vous venez de configurer une action GitHub pour exécuter Lighthouse CI. Ce sera utile lorsqu'elle est utilisée avec un état GitHub coche.
Configurer une vérification d'état GitHub
Une vérification de l'état, si elle est configurée, est un message qui s'affiche à chaque RP et comprend généralement des informations telles que les résultats d'un test ou la réussite d'un créer.
![Capture d'écran des paramètres de GitHub Tabulation](https://web.dev/static/articles/lighthouse-ci/image/screenshot-the-github-s-67f929ea66a01.png?authuser=6&hl=fr)
Les étapes ci-dessous expliquent comment configurer une vérification de l'état pour Lighthouse CI.
Accédez à l'application GitHub Lighthouse CI. , puis cliquez sur Configurer.
(Facultatif) Si vous faites partie de plusieurs organisations sur GitHub, choisissez organisation qui possède le dépôt pour lequel vous souhaitez utiliser Lighthouse l'intégration continue.
Sélectionnez Tous les dépôts si vous souhaitez activer Lighthouse CI dans tous ou sélectionnez Sélectionner uniquement les dépôts si vous ne souhaitez utiliser dans des dépôts spécifiques, puis sélectionnez les dépôts. Cliquez ensuite sur Installation et Autoriser.
Copiez le jeton qui s'affiche. Vous l'utiliserez à l'étape suivante.
Pour ajouter le jeton, accédez à la page Paramètres de votre compte GitHub. cliquez sur Secrets, puis sur Add a new secret (Ajouter un secret).
Définissez le champ Nom sur
LHCI_GITHUB_APP_TOKEN
, puis la valeur. au jeton que vous avez copié à l'étape précédente, puis cliquez sur le bouton Ajouter secret.Accédez au fichier
lighthouse-ci.yaml
et ajoutez le nouveau secret d'environnement à la commande "run Lighthouse CI" (Exécuter Lighthouse CI). .
- 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: $
- La vérification de l'état est prête à l'emploi. Pour la tester, créez un mode d'envoi demande ou transmettre un commit à une demande d'extraction existante.
Configurer le serveur CI Lighthouse
Le serveur CI Lighthouse fournit un tableau de bord permettant d'explorer l'historique Rapports Lighthouse. Il peut également servir de datastore privé à long terme rapports Lighthouse.
![Capture d'écran du tableau de bord du serveur CI Lighthouse](https://web.dev/static/articles/lighthouse-ci/image/screenshot-the-lighthous-bf52f6dd2ad0e.png?authuser=6&hl=fr)
![Capture d'écran de la comparaison de deux rapports Lighthouse sur le serveur CI Lighthouse](https://web.dev/static/articles/lighthouse-ci/image/screenshot-comparing-li-a86afa61fb603.png?authuser=6&hl=fr)
- Choisissez les commits à comparer.
- Variation du score Lighthouse entre les deux commits
- Cette section n'affiche que les métriques qui ont changé entre les deux commits.
- Les régressions sont surlignées en rose.
- Les améliorations sont surlignées en bleu.
Le serveur CI Lighthouse est le plus adapté aux utilisateurs qui savent déployer et de gérer leur propre infrastructure.
Pour obtenir des informations sur la configuration du serveur CI Lighthouse, y compris des recettes pour avec Heroku et Docker pour le déploiement, reportez-vous à instructions.