Jak dodać Lighthouse do systemu ciągłej integracji, np. działań na GitHubie.
Lighthouse CI to pakiet narzędzi do korzystania z Lighthouse w ramach ciągłej integracji. Lighthouse CI można włączyć do przepływów pracy programisty na wiele różnych sposobów. Omawiamy w nim te tematy:
- Korzystanie z interfejsu wiersza poleceń w Lighthouse CI.
- Konfiguruję dostawcę CI do uruchamiania Lighthouse CI.
- Skonfigurowanie działania GitHub i sprawdzenia stanu funkcji Lighthouse CI. Spowoduje to automatyczne wyświetlanie wyników z Lighthouse w przypadku żądań pull w GitHubie.
- Tworzę panel wydajności i magazyn danych na potrzeby raportów Lighthouse.
Przegląd
Lighthouse CI to pakiet bezpłatnych narzędzi, które ułatwiają korzystanie z Lighthouse do monitorowania wydajności. Pojedynczy raport Lighthouse zawiera ogólne informacje o wydajności strony internetowej w momencie jej uruchamiania; Lighthouse CI pokazuje, jak te wyniki zmieniają się z czasem. Można dzięki temu określić wpływ konkretnych zmian w kodzie lub zadbać o osiągnięcie progów wydajności podczas ciągłych procesów integracji. Monitorowanie wydajności jest najpowszechniejszym przypadkiem użycia w Lighthouse CI, ale może służyć do monitorowania innych aspektów raportu Lighthouse, np. SEO czy ułatwień dostępu.
Podstawową funkcjonalność Lighthouse CI zapewnia interfejs wiersza poleceń Lighthouse CI. Uwaga: jest to narzędzie inne niż Lighthouse CLI. Interfejs wiersza poleceń Lighthouse CI udostępnia zestaw polecenia do korzystania z Lighthouse CI. Na przykład polecenie autorun uruchamia kilka uruchomień Lighthouse, identyfikuje medianę raportu Lighthouse i przesyła go do pamięci. To zachowanie można znacząco dostosować, przekazując dodatkowe flagi lub dostosowując plik konfiguracyjny Lighthouse CI (lighthouserc.js).
Główna funkcja narzędzia Lighthouse CI obejmuje głównie interfejs wiersza poleceń Lighthouse, ale jest zwykle używana w jednym z tych sposobów:
- Uruchamianie narzędzia Lighthouse CI w ramach ciągłej integracji
- za pomocą działania Lighthouse CI GitHub, które uruchamia i komentuje każde żądanie pull
- Śledzenie wydajności w czasie w panelu udostępnianym przez serwer Lighthouse.
Wszystkie te podejścia bazują na interfejsie wiersza poleceń CI w Lighthouse.
Alternatywne rozwiązania w Lighthouse CI to m.in. zewnętrzne usługi monitorowania wydajności lub napisanie własnego skryptu do zbierania danych o wydajności w trakcie procesu CI. Rozważ skorzystanie z usługi innej firmy, jeśli wolisz pozwolić komuś innemu zarządzać Twoim serwerem monitorowania wydajności i urządzeniami testowymi lub, jeśli chcesz korzystać z funkcji powiadomień (np. poczty e-mail lub integracji z Slackem) bez konieczności ich tworzenia.
Używaj Lighthouse CI lokalnie
W tej sekcji dowiesz się, jak lokalnie uruchamiać i instalować interfejs wiersza poleceń CI Lighthouse oraz jak skonfigurować lighthouserc.js. Uruchomienie interfejsu wiersza poleceń Lighthouse w Lighthouse to najprostszy sposób na sprawdzenie, czy lighthouserc.js jest prawidłowo skonfigurowany.
Zainstaluj interfejs wiersza poleceń Lighthouse.
npm install -g @lhci/cliAby skonfigurować Lighthouse CI, umieść plik
lighthouserc.jsw katalogu głównym repozytorium projektu. Ten plik jest wymagany i będzie zawierał informacje o konfiguracji związane z Lighthouse CI. Chociaż narzędzie Lighthouse CI można skonfigurować tak, aby można było używać go bez repozytorium git, w instrukcjach w tym artykule założono, że repozytorium projektu jest skonfigurowane pod kątem korzystania z git.W katalogu głównym repozytorium utwórz plik konfiguracji
lighthouserc.js.touch lighthouserc.jsDodaj ten kod do tablicy
lighthouserc.js. To jest pusta konfiguracja CI Lighthouse. Dodasz tę konfigurację w późniejszych krokach.module.exports = { ci: { collect: { /* Add configuration here */ }, upload: { /* Add configuration here */ }, }, };Przy każdym uruchomieniu Lighthouse CI uruchamia serwer, który wyświetla Twoją stronę. To właśnie dzięki temu narzędziu Lighthouse może załadować Twoją stronę, nawet gdy nie działają żadne inne serwery. Gdy Lighthouse CI zakończy działanie, automatycznie wyłączy serwer. Aby wyświetlanie reklam działało prawidłowo, skonfiguruj właściwości
staticDistDirlubstartServerCommand.Jeśli witryna jest statyczna, dodaj do obiektu
ci.collectwłaściwośćstaticDistDir, aby wskazać, gdzie znajdują się pliki statyczne. Lighthouse CI użyje własnego serwera do wyświetlania tych plików podczas testowania Twojej witryny. Jeśli witryna nie jest statyczna, dodaj do obiektuci.collectwłaściwośćstartServerCommand, aby wskazać polecenie uruchamiające serwer. Lighthouse CI uruchomi nowy proces serwera podczas testowania, a potem go wyłączy.// Static site example collect: { staticDistDir: './public', }// Dynamic site example collect: { startServerCommand: 'npm run start', }Dodaj do obiektu
ci.collectwłaściwośćurl, aby wskazać adresy URL, pod którymi ma działać Lighthouse w CI. Wartość właściwościurlpowinna być podana w postaci tablicy adresów URL. Tablica może zawierać 1 lub więcej adresów URL. Domyślnie Lighthouse CI uruchomi narzędzie Lighthouse 3 razy dla każdego adresu URL.collect: { // ... url: ['http://localhost:8080'] }Dodaj właściwość
targetdo obiektuci.uploadi ustaw wartość na'temporary-public-storage'. Raporty z Lighthouse CI zostaną przesłane do tymczasowej pamięci publicznej. Raport pozostaje tam przez 7 dni, a następnie zostanie automatycznie usunięty. W tym przewodniku konfiguracji jest używana opcja przesyłania „tymczasowa pamięć publiczna”, ponieważ konfiguracja jest łatwa. Informacje o innych sposobach przechowywania raportów z Lighthouse znajdziesz w dokumentacji.upload: { target: 'temporary-public-storage', }Lokalizacja miejsca na dane raportu będzie podobna do tej:
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html(Ten URL nie będzie działać, ponieważ raport został już usunięty).
Uruchom interfejs wiersza poleceń CI Lighthouse z terminala za pomocą polecenia
autorun. Spowoduje to uruchomienie Lighthouse 3 razy i przesłanie mediany raportu Lighthouse.lhci autorunJeśli masz poprawnie skonfigurowane narzędzie Lighthouse CI, uruchomienie tego polecenia powinno wygenerować dane wyjściowe podobne do tych:
✅ .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.Możesz zignorować komunikat
GitHub token not setw danych wyjściowych konsoli. Token GitHub jest wymagany tylko wtedy, gdy chcesz używać Lighthouse CI z działaniem GitHuba. Sposób konfigurowania działania GitHuba został opisany w dalszej części tego artykułu.Kliknięcie linku w danych wyjściowych zaczynających się od
https://storage.googleapis.com...spowoduje przejście do raportu Lighthouse dotyczącego mediany uruchomionej przez Lighthouse.Wartości domyślne używane przez
autorunmożna zastąpić za pomocą wiersza poleceń lublighthouserc.js. Na przykład poniższa konfiguracjalighthouserc.jswskazuje, że przy każdym wykonaniuautorunpowinno zostać zebranych 5 uruchomień Lighthouse.Zaktualizuj
lighthouserc.js, aby używać właściwościnumberOfRuns:module.exports = { // ... collect: { numberOfRuns: 5 }, // ... }, };Uruchom ponownie polecenie
autorun:lhci autorunDane wyjściowe w terminalu powinny wskazywać, że narzędzie Lighthouse zostało uruchomione 5 razy, a nie 3 domyślne:
✅ .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.Aby dowiedzieć się więcej o innych opcjach konfiguracji, zapoznaj się z dokumentacją konfiguracji w Lighthouse CI.
Skonfiguruj proces CI, aby uruchomić Lighthouse CI
z Lighthouse CI można używać z ulubionym narzędziem CI. Sekcja Skonfiguruj dostawcę CI w dokumentacji Lighthouse CI zawiera przykłady kodu, które pokazują, jak włączyć Lighthouse CI w pliki konfiguracyjne popularnych narzędzi CI. W szczególności te przykładowe fragmenty kodu pokazują, jak uruchomić Lighthouse CI, aby zbierać pomiary wydajności podczas procesu CI.
Zacznij od monitorowania wydajności za pomocą narzędzia Lighthouse CI do zbierania pomiarów skuteczności. Zaawansowani użytkownicy mogą jednak pójść o krok dalej i korzystać z Lighthouse CI, aby kompilować kompilacje, jeśli nie spełniają wstępnie zdefiniowanych kryteriów, takich jak zaliczenie konkretnych audytów w Lighthouse lub osiągnięcie wszystkich budżetów wydajności. To zachowanie można skonfigurować we właściwości assert pliku lighthouserc.js.
Lighthouse CI obsługuje 3 poziomy asercji:
off: ignoruj asercjewarn: błędy drukowania w formacie stderrerror: błędy drukowania w stderr i wyjściu z Lighthouse CI z kodem wyjścia o wartości innej niż 0.
Poniżej znajdziesz przykład konfiguracji lighthouserc.js, która zawiera asercje. Określa on wyniki kategorii wydajności i ułatwień dostępu w Lighthouse. Aby wypróbować tę funkcję, dodaj do pliku lighthouserc.js podane niżej asercje, a potem ponownie uruchom Lighthouse CI.
module.exports = {
ci: {
collect: {
// ...
},
assert: {
assertions: {
'categories:performance': ['warn', {minScore: 1}],
'categories:accessibility': ['error', {minScore: 1}]
}
},
upload: {
// ...
},
},
};
Wygenerowane dane wyjściowe konsoli wyglądają tak:
Więcej informacji o assercjach CI w Lighthouse znajdziesz w dokumentacji.
Skonfiguruj działanie GitHuba, aby uruchomić Lighthouse CI
Działanie GitHub może być używane do uruchamiania Lighthouse CI. Spowoduje to wygenerowanie nowego raportu Lighthouse za każdym razem, gdy zmiana w kodzie zostanie wypchnięta do dowolnej gałęzi repozytorium GitHub. Używaj ich w połączeniu ze sprawdzaniem stanu, aby wyświetlać te wyniki w przypadku każdego żądania pull.
W katalogu głównym repozytorium utwórz katalog o nazwie
.github/workflows. W tym katalogu znajdą się przepływy pracy Twojego projektu. Przepływ pracy to proces, który działa w ustalonym czasie (np. po przekazaniu kodu) i składa się z co najmniej 1 działania.mkdir .github mkdir .github/workflowsW usłudze
.github/workflowsutwórz plik o nazwielighthouse-ci.yaml. Ten plik będzie zawierać konfigurację nowego przepływu pracy.touch lighthouse-ci.yamlDodaj poniższy tekst do elementu
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!"Ta konfiguracja tworzy przepływ pracy składający się z jednego zadania, które będzie uruchamiane za każdym razem, gdy nowy kod zostanie wypchnięty do repozytorium. To zadanie składa się z 4 kroków:
- Sprawdź repozytorium, w którym będzie uruchamiany Lighthouse CI
- Instalowanie i konfigurowanie węzła
- Zainstaluj wymagane pakiety npm
- Uruchom Lighthouse CI i prześlij wyniki do tymczasowej pamięci publicznej.
Zatwierdź te zmiany i przekaż je do GitHuba. Po wykonaniu powyższych czynności przesłanie kodu do GitHuba uruchomi dodany przed chwilą przepływ pracy.
Aby sprawdzić, czy narzędzie Lighthouse CI zostało aktywowane, i wyświetlić wygenerowany raport, otwórz w projekcie kartę Działania. W najnowszym zatwierdzeniu powinien być widoczny przepływ pracy Build project and Run Lighthouse CI.
Na karcie Działania możesz przejść do raportu Lighthouse powiązanego z konkretnym zatwierdzeniem. Kliknij zatwierdzenie, wybierz krok przepływu pracy Lighthouse CI, a potem rozwiń wyniki run Lighthouse CI.
Właśnie udało Ci się skonfigurować działanie GitHub Action do uruchamiania Lighthouse CI. Będzie to najbardziej przydatne w połączeniu ze sprawdzaniem stanu na GitHubie.
Konfigurowanie sprawdzania stanu na GitHubie
Kontrola stanu, o ile jest skonfigurowana, to komunikat wyświetlany w każdym raporcie PR i zwykle zawiera informacje takie jak wyniki testu lub powodzenie kompilacji.
Poniżej znajdziesz instrukcje konfigurowania sprawdzania stanu funkcji Lighthouse CI.
Otwórz stronę aplikacji Lighthouse CI na GitHubie i kliknij Skonfiguruj.
(Opcjonalnie) Jeśli należysz do wielu organizacji w GitHubie, wybierz organizację będącą właścicielem repozytorium, dla którego chcesz używać narzędzia Lighthouse CI.
Wybierz Wszystkie repozytoria, jeśli chcesz włączyć Lighthouse CI we wszystkich repozytoriach, lub kliknij Wybierz tylko repozytoria, jeśli chcesz używać ich tylko w określonych repozytoriach, a potem wybierz repozytoria. Następnie kliknij Zainstaluj i autoryzuj.
Skopiuj wyświetlony token. Użyjesz go w następnym kroku.
Aby dodać token, otwórz stronę Ustawienia w swoim repozytorium GitHub, kliknij Obiekty tajne, a następnie Dodaj nowy obiekt tajny.
W polu Nazwa wpisz
LHCI_GITHUB_APP_TOKEN, w polu Wartość wpisz token skopiowany w ostatnim kroku, a następnie kliknij przycisk Dodaj obiekt tajny.Otwórz plik
lighthouse-ci.yamli dodaj nowy tajny klucz środowiska do polecenia „run 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: $
- Sprawdzanie stanu jest gotowe do użycia. Aby je przetestować, utwórz nowe żądanie pull lub wypchnij zatwierdzenie do istniejącego żądania pull.
Skonfiguruj serwer CI Lighthouse
Serwer Lighthouse CI udostępnia panel do przeglądania raportów historycznych. Może też służyć jako prywatny, długoterminowy magazyn danych na potrzeby raportów Lighthouse.
- Wybierz zatwierdzenia do porównania.
- Wartość wyniku Lighthouse zmieniła się między 2 zatwierdzeniami.
- Ta sekcja zawiera tylko wskaźniki, które zmieniły się między 2 zatwierdzeniami.
- Regresje są wyróżnione na różowo.
- Poprawki są zaznaczone na niebiesko.
Narzędzie Lighthouse CI Server najlepiej sprawdza się w przypadku użytkowników, którzy potrafią wdrażać własną infrastrukturę i nią zarządzać.
Więcej informacji o konfigurowaniu serwera Lighthouse CI, w tym o przepisach wdrażania Heroku i Dockera, znajdziesz w tych instructions.