Acțiuni GitHub sunt utilizate pentru automatizarea fluxurilor de lucru de inginerie software. Similar cu instrumentele precum CircleCI, Jenkins, Travis și multe altele, GitHub Actions oferă un API declarativ pentru definirea fluxurilor de lucru. Aceste fluxuri de lucru pot include lucrări pentru a construi, testa și implementa aplicații.

Lighthouse este un proiect open-source de la Google pentru îmbunătățirea calității paginilor web. Oferă valori centrate pe utilizator pentru auditarea SEO, performanță, accesibilitate, cele mai bune practici și aplicații web progresive. Pentru o scufundare mai profundă despre Lighthouse vă rugăm să citiți „Cum să analizați performanța site-ului web cu Lighthouse”. Această postare va demonstra următoarele:

  • Implementarea de bază a Lighthouse într-un flux de lucru GitHub Actions.
  • Configurare avansată pentru a afișa rezultatele Lighthouse în comentarii de solicitare pull
  • Încărcări de rapoarte S3 Lighthouse.
  • Notificări slabe.

Lighthouse Check GitHub Action

Această postare va oferi un ghid de utilizare Acțiune de verificare a farului pentru automatizarea auditurilor Lighthouse. Poate fi folosit într-un flux de lucru – declanșat de orice eveniment. Această postare va arăta cum să utilizați acțiunea atunci când este declanșată de un eveniment de cerere de extragere.

Exemplu de bază

Cu următorii pași putem crea un flux de lucru de bază.

  1. Creați și verificați o nouă sucursală la nivel local.
  2. Creați un fișier în proiectul dvs. cu o cale similară cu următoarea .github/workflows/my-workflow.yml (înlocuind my-workflow cu orice nume la alegere).
  3. Populați fișierul de sus cu exemplul de mai jos, înlocuind urls câmp cu o listă separată prin virgule a adreselor URL pe care doriți să le testați.
  4. Modificați modificările la nivel local și împingeți ramura în sus la telecomandă.
  5. Din noua filială, deschideți o cerere de extragere

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

Și Voilà? – avem un flux de lucru cu Lighthouse! Presupunând că aveți activate GitHub Actions în repo, ar trebui să vedeți ceva de genul mai jos (notă: în momentul redactării acestui document, Acțiunile GitHub sunt în modul „beta” și necesită înregistrare).

Cum se utilizeaza Lighthouse in GitHub Actions
Filele depozitului GitHub

Dând clic pe „Acțiuni”, se vor afișa toate fluxurile de lucru în curs de desfășurare și anterioare.

1611480426 602 Cum se utilizeaza Lighthouse in GitHub Actions
Lista fluxurilor de lucru Acțiuni GitHub

După ce urmați pașii din exemplul nostru de bază, ar trebui să vedeți un articol pe această listă. Dacă faceți clic pe, ne vom afișa rezultatele Lighthouse tipărite pe consolă.

1611480427 56 Cum se utilizeaza Lighthouse in GitHub Actions
Rezultatele farului sunt tipărite în consolă

Din configurația noastră, avem și rezultate capturate în rapoarte HTML salvate ca „artefacte”.

1611480427 100 Cum se utilizeaza Lighthouse in GitHub Actions
Dând clic pe meniul derulant „Artefacte”, se descarcă rapoartele HTML
1611480428 798 Cum se utilizeaza Lighthouse in GitHub Actions
Raport complet Lighthouse ca fișier HTML descărcat din „Artefacte”

Exemplu avansat

Lighthouse Check Action oferă un set complet de clopote și fluiere prin utilizare lighthouse-check Modul NPM sub capotă. Putem face mult mai mult cu asta. Să continuăm!

Trageți cereri Comentarii

Prin utilizarea acestei funcții, comentariile sunt postate cu rezultatele Lighthouse la fiecare comitere. O putem face urmând pașii de mai jos.

  1. Creați un utilizator nou sau găsiți unul existent pentru a acționa ca „bot”.
  2. Creați un jeton de acces personal din acest cont de utilizator.
  3. Creați un secret GitHub pentru a păstra valoarea criptată de sus. În exemplul nostru îl numim LIGHTHOUSE_CHECK_GITHUB_ACCESS_TOKEN.
  4. Actualizați fișierul fluxului de lucru cu diferențele prezentate mai jos.
  5. Angajează-te și împinge.

with:
+  accessToken: ${{ secrets.LIGHTHOUSE_CHECK_GITHUB_ACCESS_TOKEN }}
  outputDirectory: /tmp/artifacts

Cu aceasta, am creat un bot pentru a posta rezultatele Lighthouse la solicitările de extragere?!

1611480428 758 Cum se utilizeaza Lighthouse in GitHub Actions
Rezultatul farului ca comentarii PR

S3 Raportează încărcări

În exemplul nostru, persistăm rezultatele încărcând rapoarte ca artefacte în fluxul nostru de lucru. Această soluție ar putea fi suficientă în unele cazuri, dar artefactele nu sunt stocate permanent. Pentru a vizualiza rapoarte, trebuie să navigăm în fluxul de lucru și să descărcăm manual rapoarte din vizualizarea artefactului.

Dar dacă vrem un mod mai fiabil de stocare și referință a rapoartelor? Aici intră în joc funcția S3. Putem configura stocarea AWS S3 urmând pașii de mai jos.

  1. Creați un cont AWS dacă nu aveți deja unul.
  2. Creați o găleată S3 dacă nu aveți deja unul.
  3. Achiziționați un ID cheie de acces AWS și o cheie de acces secret.
  4. Creați secrete GitHub pentru aceste două valori. În exemplul nostru vom folosi LIGHTHOUSE_CHECK_AWS_ACCESS_KEY_ID și LIGHTHOUSE_CHECK_AWS_SECRET_ACCESS_KEY, respectiv.
  5. Adăugați numele cupei și regiune (exemplu: us-east-1) ca secrete GitHub: LIGHTHOUSE_CHECK_AWS_BUCKET și LIGHTHOUSE_CHECK_AWS_REGION.

Apoi, vom actualiza configurația noastră cu următoarea diferență.

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 }}

În următorul nostru commit și push, rapoartele sunt încărcate automat în S3 ✅! De asemenea, avem o legătură între ele în comentariile noastre PR.

1611480429 847 Cum se utilizeaza Lighthouse in GitHub Actions
Comentariu PR rezultat far cu raport S3 legat

Notificări slabe

Care este o caracteristică nouă într-un flux de lucru DevOps fără notificări Slack? Unul într-adevăr trist. Să intensificăm lucrurile adăugând notificări la un canal Slack pentru ca întreaga noastră echipă să le poată vedea. Putem realiza acest lucru în pașii de mai jos.

  1. Creați un „Incoming Webhook” în spațiul de lucru Slack și autorizați un canal.
  2. Adăugați adresa URL Webhook ca Secret GitHubLIGHTHOUSE_CHECK_WEBHOOK_URL.
  3. Adăugați datele GitHub și URL-ul Webhook la configurația noastră cu diferența de mai jos. Datele GitHub vor fi redate în notificările noastre. Transmitem datele GitHub prin configurare cu „Context” 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'

Următorul nostru commit și push introduce notificări Slack! Link-ul „Auditul farului” din captura de ecran de mai jos navighează la raportul S3 așa cum este configurat✨.

1611480430 16 Cum se utilizeaza Lighthouse in GitHub Actions
Notificare Lighthouse Slack

Menținerea unei evidențe istorice

Verificarea automată a farului Foo este instrumentul pe care îl putem folosi pentru a gestiona o evidență istorică a auditurilor Lighthouse. Ne putem conecta la acesta cu Lighthouse Check GitHub! Procedând astfel, puteți rula Lighthouse de la distanță față de într-un mediu GitHub local, dockerizat. Cu aceasta putem fi siguri că rezultatele noastre Lighthouse nu sunt fragile din schimbarea infrastructurii GitHub. Urmează pași documentați pentru conectarea cu Automated Lighthouse Check.

1611480430 872 Cum se utilizeaza Lighthouse in GitHub Actions
O înregistrare istorică a auditurilor farurilor cu „Automated Lighthouse Check”

Ce acum?

Puteți găsi un exemplu complet din cele de mai sus în Documentația acțiunii de verificare a farului. Sper că acest articol poate oferi o completare utilă la fluxul de lucru DevOps! Cu Lighthouse integrat într-o conductă CI / CD, putem rămâne complet echipați pentru a asigura o înaltă calitate în SEO site-ul web, performanță, accesibilitate, cele mai bune practici și aplicații web progresive.