GitHub Actions gibi bir sürekli entegrasyon sistemine Lighthouse ekleme
Lighthouse CI, sürekli entegrasyon sırasında Lighthouse'u kullanmaya yönelik bir araç paketidir. Lighthouse CI, geliştirici iş akışlarına birçok farklı şekilde dahil edilebilir. Bu kılavuzda şu konular ele alınmaktadır:
- Lighthouse CI CLI'yi kullanma.
- CI sağlayıcınızı Lighthouse CI'yı çalıştıracak şekilde yapılandırma.
- Lighthouse CI için GitHub Action ve durum kontrolü ayarlama. Bu işlem, GitHub pull isteklerinde Lighthouse sonuçlarını otomatik olarak gösterir.
- Lighthouse raporları için performans kontrol paneli ve veri deposu oluşturma.
Genel bakış
Lighthouse CI, performans izleme için Lighthouse'u kullanmayı kolaylaştıran ücretsiz bir araç paketidir. Tek bir Lighthouse raporu, bir web sayfasının çalıştırıldığı anda gösterdiği performansın anlık görüntüsünü sağlar; Lighthouse CI, bu bulguların zaman içinde nasıl değiştiğini gösterir. Bu, belirli kod değişikliklerinin etkisini tanımlamak veya sürekli entegrasyon işlemleri sırasında performans eşiklerine ulaşılmasını sağlamak için kullanılabilir. Performans izleme, Lighthouse CI'nın en yaygın kullanım alanı olsa da Lighthouse raporunun SEO veya erişilebilirlik gibi diğer yönlerini izlemek için de kullanılabilir.
Lighthouse CI'nın temel işlevi, Lighthouse CI komut satırı arayüzü tarafından sağlanır. (Not: Bu, Lighthouse KSA'dan ayrı bir araçtır.) Lighthouse CI CLI, Lighthouse CI'yı kullanmak için bir dizi komut sağlar. Örneğin, autorun
komutu birden fazla Lighthouse çalıştırmasını yürütür, ortanca Lighthouse raporunu tanımlar ve raporu depolama için yükler. Bu davranış, ek bayraklar iletilerek veya Lighthouse CI'nın yapılandırma dosyası lighthouserc.js
özellenerek yoğun bir şekilde özelleştirilebilir.
Lighthouse CI'nın temel işlevi temel olarak Lighthouse CI CLI'de kapsüllenmiş olsa da Lighthouse CI genellikle aşağıdaki yaklaşımlardan biriyle kullanılır:
- Sürekli entegrasyon kapsamında Lighthouse CI'yı çalıştırma
- Her pull isteğinde çalışan ve yorum yapan bir Lighthouse CI GitHub Action kullanma
- Lighthouse Server tarafından sağlanan kontrol paneli aracılığıyla zaman içindeki performansı izleme.
Tüm bu yaklaşımlar Lighthouse CI CLI üzerine inşa edilmiştir.
Lighthouse CI'ya alternatif olarak, üçüncü taraf performans izleme hizmetleri veya CI sürecinde performans verilerini toplamak için kendi komut dosyanızı yazma da yer alır. Performans izleme sunucunuzun ve test cihazlarınızın yönetimini başka birinin yönetmesini tercih ediyorsanız veya bu özellikleri kendiniz oluşturmak zorunda kalmadan bildirim özelliklerinden (e-posta veya Slack entegrasyonu gibi) yararlanmak istiyorsanız üçüncü taraf hizmeti kullanmayı düşünmelisiniz.
Yerel olarak Lighthouse CI'yı kullanma
Bu bölümde Lighthouse CI CLI'nın yerel olarak nasıl çalıştırılacağı ve yükleneceği ve lighthouserc.js
ürününün nasıl yapılandırılacağı açıklanmaktadır. Lighthouse CI CLI'yi yerel olarak çalıştırmak, lighthouserc.js
ürününüzün doğru şekilde yapılandırıldığından emin olmanın en kolay yoludur.
Lighthouse CI CLI'yi yükleyin.
npm install -g @lhci/cli
Lighthouse CI, projenizin deposunun kök konumuna bir
lighthouserc.js
dosyası eklenerek yapılandırılır. Bu dosya zorunludur ve Lighthouse CI ile ilgili yapılandırma bilgilerini içerir. Lighthouse CI, git deposu olmadan kullanılacak şekilde yapılandırılabilir ancak bu makaledeki talimatlarda, proje deponuzun git kullanacak şekilde yapılandırıldığı varsayılır.Kod deponuzun kök dizininde bir
lighthouserc.js
yapılandırma dosyası oluşturun.touch lighthouserc.js
Aşağıdaki kodu
lighthouserc.js
hesabına ekleyin. Bu kod boş bir Lighthouse CI yapılandırmasıdır. Bu yapılandırmaya sonraki adımlarda ekleyeceksiniz.module.exports = { ci: { collect: { /* Add configuration here */ }, upload: { /* Add configuration here */ }, }, };
Bu Lighthouse CI her çalıştığında sitenize hizmet vermek için bir sunucu başlatır. Bu sunucu, başka hiçbir sunucu çalışmıyorken bile Lighthouse'un sitenizi yüklemesini sağlar. Lighthouse CI çalışmayı bitirdiğinde, sunucu otomatik olarak kapatılır. Yayının doğru şekilde çalıştığından emin olmak için
staticDistDir
veyastartServerCommand
özelliklerini yapılandırmanız gerekir.Siteniz statikse statik dosyalarınızın nerede bulunduğunu belirtmek için
staticDistDir
özelliğinici.collect
nesnesine ekleyin. Lighthouse CI, sitenizi test ederken bu dosyaları sunmak için kendi sunucusunu kullanır. Siteniz statik değilse sunucunuzu başlatan komutu belirtmek içinstartServerCommand
özelliğinici.collect
nesnesine ekleyin. Lighthouse CI, test sırasında yeni bir sunucu işlemi başlatır ve daha sonra kapatır.// Static site example collect: { staticDistDir: './public', }
// Dynamic site example collect: { startServerCommand: 'npm run start', }
Lighthouse CI'nın Lighthouse'u çalıştırması gereken URL'leri belirtmek için
ci.collect
nesnesineurl
özelliğini ekleyin.url
özelliğinin değeri bir URL dizisi olarak sağlanmalıdır. Bu dizi, bir veya daha fazla URL içerebilir. Lighthouse CI, varsayılan olarak her URL'ye karşı Lighthouse'u üç kez çalıştırır.collect: { // ... url: ['http://localhost:8080'] }
target
özelliğinici.upload
nesnesine ekleyin ve değeri'temporary-public-storage'
olarak ayarlayın. Lighthouse CI tarafından toplanan Lighthouse raporları, herkese açık geçici depolama alanına yüklenir. Rapor yedi gün boyunca orada kalır ve daha sonra otomatik olarak silinir. Bu kurulum kılavuzunda, kurulumu hızlı olduğundan "geçici ve herkese açık depolama alanı" yükleme seçeneği kullanılmaktadır. Lighthouse raporlarını depolamanın diğer yolları hakkında bilgi edinmek için belgelere bakın.upload: { target: 'temporary-public-storage', }
Raporun depolanacağı konum şuna benzer:
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
(Rapor zaten silinmiş olduğundan bu URL çalışmaz.)
autorun
komutunu kullanarak terminalde Lighthouse CI CLI'yi çalıştırın. Bu işlem, Lighthouse'u üç kez çalıştırır ve ortanca değeri olan Lighthouse raporunu yükler.lhci autorun
Lighthouse CI'yı doğru şekilde yapılandırdıysanız bu komutu çalıştırdığınızda şuna benzer bir çıkış oluşturulur:
✅ .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.
Konsol çıkışında
GitHub token not set
mesajını yoksayabilirsiniz. GitHub jetonu, yalnızca Lighthouse CI'yı GitHub İşlemi ile kullanmak istiyorsanız gereklidir. GitHub Action'ının nasıl ayarlanacağı bu makalenin ilerleyen kısımlarında açıklanmaktadır.Çıkışta
https://storage.googleapis.com...
ile başlayan bağlantıyı tıkladığınızda, ortalama Lighthouse çalıştırmasına karşılık gelen Lighthouse raporuna yönlendirilirsiniz.autorun
tarafından kullanılan varsayılanlar, komut satırı veyalighthouserc.js
aracılığıyla geçersiz kılınabilir. Örneğin, aşağıdakilighthouserc.js
yapılandırması,autorun
her yürütüldüğünde beş Lighthouse çalıştırmasının toplanması gerektiğini belirtir.numberOfRuns
özelliğini kullanmak içinlighthouserc.js
uygulamasını güncelleyin:module.exports = { // ... collect: { numberOfRuns: 5 }, // ... }, };
autorun
komutunu yeniden çalıştırın:lhci autorun
Terminal çıkışı, Lighthouse'un varsayılan üçten çok beş kez çalıştırıldığını göstermelidir:
✅ .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.
Diğer yapılandırma seçenekleri hakkında bilgi edinmek için Lighthouse CI yapılandırma belgelerine bakın.
Lighthouse CI'yı çalıştırmak için CI işleminizi ayarlayın
Lighthouse CI, en sevdiğiniz CI aracıyla kullanılabilir. Lighthouse CI belgelerinin CI Sağlayıcınızı Yapılandırın bölümü, Lighthouse CI'nın yaygın CI araçlarının yapılandırma dosyalarına nasıl ekleneceğini gösteren kod örnekleri içerir. Özellikle bu kod örnekleri, CI sürecinde performans ölçümleri toplamak için Lighthouse CI'nın nasıl çalıştırılacağını gösterir.
Performans ölçümlerini toplamak için Lighthouse CI'yı kullanmak, performans izlemeye başlamak için iyi bir noktadır. Ancak ileri düzey kullanıcılar, belirli Lighthouse denetimlerini geçme veya tüm performans bütçelerini karşılama gibi önceden tanımlanmış kriterleri karşılamıyorsa derlemeleri başarısız olmak için bir adım daha ileri gitmek ve Lighthouse CI'yı kullanmak isteyebilir. Bu davranış, lighthouserc.js
dosyasının assert
özelliği aracılığıyla yapılandırılır.
Lighthouse CI, üç onaylama düzeyini destekler:
off
: Onayları yoksaywarn
: stderr'e yazdırma hatalarıerror
: stderr'e yazdırma hataları ve Lighthouse CI'dan sıfır olmayan bir çıkış koduyla çıkış
Aşağıda, iddiaları içeren bir lighthouserc.js
yapılandırması örneği verilmiştir. Lighthouse'un performans ve erişilebilirlik kategorilerinin puanları için onaylar ayarlar. Bunu denemek için aşağıda gösterilen onaylamaları lighthouserc.js
dosyanıza ekleyin ve Lighthouse CI'yı yeniden çalıştırın.
module.exports = {
ci: {
collect: {
// ...
},
assert: {
assertions: {
'categories:performance': ['warn', {minScore: 1}],
'categories:accessibility': ['error', {minScore: 1}]
}
},
upload: {
// ...
},
},
};
Oluşturduğu konsol çıkışı aşağıdaki gibi görünür:
Lighthouse CI onayları hakkında daha fazla bilgi için belgelere bakın.
Lighthouse CI'yı çalıştırmak için GitHub Action oluşturun
Lighthouse CI'yı çalıştırmak için bir GitHub Action kullanılabilir. Bu işlem, GitHub deposunun herhangi bir dalına her kod değişikliği aktarıldığında yeni bir Lighthouse raporu oluşturur. Her bir pull isteğinde bu sonuçları görüntülemek için bunu bir durum kontrolü ile birlikte kullanın.
Kod deponuzun kök dizininde
.github/workflows
adlı bir dizin oluşturun. Projenizin iş akışları bu dizine gider. İş akışı, önceden belirlenmiş bir zamanda çalışan (örneğin, kod aktarıldığında) bir veya daha fazla işlemden oluşan bir süreçtir.mkdir .github mkdir .github/workflows
.github/workflows
uygulamasındalighthouse-ci.yaml
adlı bir dosya oluşturun. Bu dosya, yeni bir iş akışının yapılandırmasını saklar.touch lighthouse-ci.yaml
Aşağıdaki metni
lighthouse-ci.yaml
kampanyasına ekleyin.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!"
Bu yapılandırma, depoya her yeni kod aktarıldığında çalışacak tek bir işten oluşan bir iş akışı oluşturur. Bu işin dört adımı vardır:
- Lighthouse CI'nın çalıştırılacağı depoya göz atın
- Düğümü yükleyin ve yapılandırın
- Gerekli npm paketlerini yükleyin
- Lighthouse CI'yı çalıştırıp sonuçları geçici bir herkese açık depolama alanına yükleyin.
Bu değişiklikleri uygulayın ve GitHub'a aktarın. Yukarıdaki adımları doğru bir şekilde uyguladıysanız GitHub'a kod aktardığınızda yeni eklediğiniz iş akışı çalıştırılır.
Lighthouse CI'nın tetiklediğini onaylamak ve oluşturduğu raporu görüntülemek için projenizin İşlemler sekmesine gidin. En son kaydetme işleminizin altında Proje derle ve Lighthouse CI Çalıştır iş akışını göreceksiniz.
İşlemler sekmesinden belirli bir kayda karşılık gelen Lighthouse raporuna gidebilirsiniz. Kaydetmeyi, Lighthouse CI iş akışı adımını ve ardından Lighthouse CI'yı çalıştır adımının sonuçlarını genişletin.
Lighthouse CI'yı çalıştırmak için bir GitHub Action'ı ayarladınız. Bu özellik, GitHub durum kontrolü ile birlikte kullanıldığında çok faydalı olur.
GitHub durum denetimi ayarlayın
Durum denetimi (yapılandırılmışsa), her PR'de görünen ve genellikle bir testin sonuçları veya bir derlemenin başarısı gibi bilgileri içeren bir mesajdır.
Aşağıdaki adımlarda, Lighthouse CI için durum denetiminin nasıl ayarlanacağı açıklanmaktadır.
Lighthouse CI GitHub Uygulaması sayfasına gidin ve Yapılandır'ı tıklayın.
(İsteğe bağlı) GitHub'da birden fazla kuruluşun parçasıysanız Lighthouse CI'yı kullanmak istediğiniz depoya sahip olan kuruluşu seçin.
Lighthouse CI'yı tüm depolarda etkinleştirmek istiyorsanız Tüm depolar'ı, yalnızca belirli kod depolarında kullanmak istiyorsanız Yalnızca kod depolarını seç'i ve ardından depoları seçin. Ardından Yükle ve Yetkilendir'i tıklayın.
Gösterilen jetonu kopyalayın. Bu adı bir sonraki adımda kullanacaksınız.
Jetonu eklemek için GitHub deponuzun Ayarlar sayfasına gidip Gizli Anahtarlar'ı, ardından Yeni gizli anahtar ekle'yi tıklayın.
Ad alanını
LHCI_GITHUB_APP_TOKEN
olarak ayarlayın ve Değer alanını son adımda kopyaladığınız jetona ayarlayın ve ardından Gizli anahtar ekle düğmesini tıklayın.lighthouse-ci.yaml
dosyasına gidin ve yeni ortam gizli anahtarını "run Lighthouse CI" komutuna ekleyin.
- 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: $
- Durum denetimi kullanıma hazır. Bunu test etmek için yeni bir pull isteği oluşturun veya mevcut bir pull isteğine bir kaydetme aktarın.
Lighthouse CI Server'ı kurma
Lighthouse CI sunucusu, geçmiş Lighthouse raporlamasını keşfetmek için bir kontrol paneli sağlar. Ayrıca Lighthouse raporları için özel, uzun vadeli bir veri deposu olarak da çalışabilir.
- Karşılaştırılacak kaydetmeleri seçin.
- İki kaydetme arasındaki Lighthouse puanının miktarı.
- Bu bölümde yalnızca iki kaydetme arasında değişen metrikler gösterilir.
- Regresyonlar pembe renkle vurgulanır.
- İyileştirmeler mavi renkle vurgulanır.
Lighthouse CI Server, kendi altyapılarını dağıtma ve yönetme konusunda rahat olan kullanıcılar için idealdir.
Dağıtım için Heroku ve Docker'ı kullanmayla ilgili tarifler de dahil olmak üzere Lighthouse CI sunucusunu ayarlama hakkında bilgi edinmek için bu instructions bakın.