GitHub İşlemler gibi sürekli entegrasyon sistemlerine Lighthouse ekleme.
Lighthouse CI, nasıl kullanabileceğinizi açıkladık. Lighthouse CI'yı geliştirici iş akışlarına birçok farklı şekilde entegre edildi. Bu kılavuzdaki konular şu konular:
- Lighthouse CI CLI'ı kullanma.
- CI sağlayıcınızı Lighthouse CI'yı çalıştıracak şekilde yapılandırma.
- GitHub İşlemi ayarlama ve durum kontrol yönelik bir teknik rapordur. Lighthouse sonuçları otomatik olarak şurada görüntülenir: GitHub pull istekleri.
- Lighthouse raporları için performans gösterge tablosu ve veri deposu oluşturma.
Genel Bakış
Lighthouse CI, şu işlemler için Lighthouse kullanımını kolaylaştıran ücretsiz bir araç paketidir: performans izleme araçlarıdır. Tek bir Lighthouse raporu bir web sitesinin anlık görüntüsünü sağlar sayfanın çalıştırıldığı sıradaki performansı; Lighthouse CI, bunların zamanla değişti. Bu sayede, risk yönetiminin etkisini belirlemek için belirli kod değişikliklerinin yapılmasını veya performans eşiklerine erişilmesini sürekli entegrasyon süreçleri olabilir. Performans izleme, her ne kadar gibi yaygın kullanım alanlarına sahip olsalar da, bir proje yöneticisinin göz önünde bulundurun. Örneğin, SEO veya erişilebilirlik.
Lighthouse CI'nın temel işlevi, Lighthouse CI komutu tarafından sağlanır.
satır arayüzü. (Not: Bu, Lighthouse aracından
KSA). İlgili içeriği oluşturmak için kullanılan
Lighthouse CI CLI, bir dizi
komutlar
. Örneğin, autorun
komutu birden fazla yürütür
Lighthouse çalışır, ortanca Lighthouse raporunu tanımlar ve raporu yükler
depolama alanı için. Bu davranış, ek işaretler iletilerek büyük ölçüde özelleştirilebilir
veya Lighthouse CI'nın yapılandırma dosyasını (lighthouserc.js
) özelleştirme.
Lighthouse CI'nın temel işlevi öncelikle Lighthouse CI CLI, Lighthouse CI genellikle şu yaklaşımlardan yararlanabilirsiniz:
- Sürekli entegrasyon kapsamında Lighthouse CI'yı çalıştırma
- Her pull'da çalışan ve yorum yapan bir Lighthouse CI GitHub Action'ı kullanma istek
- Lighthouse tarafından sağlanan kontrol paneli ile zaman içindeki performansı izleme Sunucu.
Bu yaklaşımların tümü Lighthouse CI CLI üzerine kurulmuştur.
Lighthouse CI'nın alternatifleri arasında üçüncü taraf performans izleme bulunur. veya CI sırasında performans verilerini toplamak için kendi komut dosyanızı yazma bahsedeceğim. İzin vermek istiyorsanız üçüncü taraf bir hizmet kullanmayı performans izleme sunucunuzun yönetimini başka biri yapıyorsa ve veya bildirim özellikleri (e-posta ya da Slack gibi) istiyorsanız entegrasyonu) kendi kendinize oluşturmanız gerekmez.
Lighthouse CI'yı yerel olarak kullanma
Bu bölümde Lighthouse CI CLI'ın yerel olarak nasıl çalıştırılıp yükleneceği ve
lighthouserc.js
yapılandırması. Lighthouse CI CLI'ı yerel olarak çalıştırmak
lighthouserc.js
cihazınızın doğru şekilde yapılandırıldığından emin olmanın en kolay yolu.
Lighthouse CI CLI'ı yükleyin.
npm install -g @lhci/cli
Lighthouse CI, kök konumuna bir
lighthouserc.js
dosyası yerleştirilerek yapılandırılır. depolayabilmenizi sağlar. Bu dosya zorunludur ve Lighthouse CI içerir yapılandırma bilgileri. Lighthouse CI, her ne kadar aynı zamanda git olmadan kullanılamaz depo bu makaledeki talimatlarda, proje deponuzun git'i kullanın.Deponuzun kök düzeyinde bir
lighthouserc.js
yapılandırması oluşturun dosyası olduğundan emin olun.touch lighthouserc.js
Aşağıdaki kodu
lighthouserc.js
alanına ekleyin. Bu kod boş Lighthouse CI yapılandırması. Bu yapılandırmaya şunu ekleyeceksiniz: devam edebilirsiniz.module.exports = { ci: { collect: { /* Add configuration here */ }, upload: { /* Add configuration here */ }, }, };
Lighthouse CI her çalıştığında, sitenizi sunmak için bir sunucu başlatır. Bu sunucu, Lighthouse'un başka hiçbir yerde değilken bile sitenizi çalışıyor olabilir. Lighthouse CI çalışmayı tamamladığında sunucuyu otomatik olarak kapatır. Sunumun doğru şekilde çalıştığından emin olmak için
staticDistDir
veyastartServerCommand
özellikler.Siteniz statikse
staticDistDir
özelliğinici.collect
nesnesini tanımlayın. Lighthouse CI, sitenizi test ederken bu dosyaları sunmak için kendi sunucusunu kullanabilir. Eğer site statik değilsestartServerCommand
özelliğini Sunucunuzu başlatan komutu belirtenci.collect
nesnesi. Lighthouse CI, test sırasında yeni bir sunucu işlemi başlatır ve kapatır. düşebilir.// Static site example collect: { staticDistDir: './public', }
// Dynamic site example collect: { startServerCommand: 'npm run start', }
URL'yi
url
özelliğinici.collect
nesnesine ekleyerek Lighthouse CI'nın birlikte çalıştırmanız gerekir.url
özelliğinin değeri şöyle olmalıdır: bir URL dizisi olarak sağlanır; bu dizi bir veya daha fazla URL içerebilir. Ölçüt Lighthouse CI, her URL için Lighthouse'u üç kez çalıştırır.collect: { // ... url: ['http://localhost:8080'] }
URL'yi
target
özelliğinici.upload
nesnesine ekleyin ve değeri'temporary-public-storage'
. tarafından toplanan Lighthouse raporları Lighthouse CI, geçici olarak herkese açık depolama alanına yüklenir. Raporda orada yedi gün kalır ve sonra otomatik olarak silinir. Bu kurulum kılavuz, "herkese açık geçici depolama"yı kullanıyor hızlı olduğundan tıklayın. Lighthouse raporlarını depolamanın diğer yolları hakkında bilgi edinmek için değerini belgeleri inceleyin.upload: { target: 'temporary-public-storage', }
Raporun depolama konumu şuna benzer:
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
(Rapor zaten silindiği için bu URL çalışmaz.)
autorun
komutunu kullanarak terminalden Lighthouse CI CLI'ı çalıştırın. Bu, Lighthouse'u üç kez çalıştırır ve ortanca değerindeki Lighthouse'u yükler rapordur.lhci autorun
Lighthouse CI'yı doğru şekilde yapılandırdıysanız bu komutu çalıştırdığınızda şuna benzer çıktılar üretir:
✅ .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. CEVAP GitHub jetonu yalnızca GitHub ile Lighthouse CI kullanmak istediğinizde gereklidir İşlem. GitHub Action'ının nasıl kurulacağı bu makalenin ilerleyen kısımlarında açıklanmaktadır.Çıkıştaki şununla başlayan bağlantıyı tıklama:
https://storage.googleapis.com...
sizi Lighthouse raporuna yönlendirecek ortanca Lighthouse çalıştırmasına karşılık gelir.autorun
tarafından kullanılan varsayılanlar, komut satırı veyalighthouserc.js
. Örneğin, aşağıdakilighthouserc.js
yapılandırması herautorun
için beş Lighthouse çalıştırmasının toplanması gerektiğini gösterir yürütülür.numberOfRuns
özelliğini kullanmak içinlighthouserc.js
öğesini güncelleyin:module.exports = { // ... collect: { numberOfRuns: 5 }, // ... }, };
autorun
komutunu yeniden çalıştırın:lhci autorun
Terminal çıkışı, Lighthouse'un diğer işlemler yerine beş kez çalıştırıldığını göstermelidir değişiklik gösterir:
✅ .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'ya bakın. yapılandırma dokümanlarına göz atın.
Lighthouse CI'yı çalıştırmak için CI sürecinizi ayarlayın
Lighthouse CI, en sevdiğiniz CI aracıyla kullanılabilir. CI'nizi Yapılandırma Sağlayıcı Lighthouse CI dokümanlarının bölümü, ortak CI araçlarının yapılandırma dosyalarına Lighthouse CI'yı dahil etme. Bu kod örnekleri, verileri toplamak için Lighthouse CI'nın nasıl çalıştırılacağını gösterir. performans ölçümlerini karşılaştırabilirsiniz.
Performans ölçümleri toplamak için Lighthouse CI'yı kullanmak iyi bir başlangıç noktasıdır
performans izleme ile. Ancak ileri düzey kullanıcılar
ve Lighthouse CI'yı kullanarak, önceden tanımlanmış değerleri karşılamamaları halinde derlemelerde
gibi ölçütleri (ör. belirli Lighthouse denetimlerinden geçerken)
kullanabilirsiniz. Bu davranış
assert
özelliğinin lighthouserc.js
özelliğine sahip olduğundan emin olun.
Lighthouse CI, üç onay düzeyini destekler:
off
: Onayları yoksaywarn
: stderr yazdırma hatalarıerror
: stderr'e yapılan yazdırma hataları ve Lighthouse CI'dan sıfır olmayan bir değerle çıkış çıkış kod
Aşağıda, aşağıdakileri içeren bir lighthouserc.js
yapılandırması örneği verilmiştir:
onaylarıdır. Lighthouse'un performans puanı için onaylar belirler ve
erişilebilirlik kategorileri. Bunu denemek için aşağıda gösterilen iddiaları
lighthouserc.js
dosyanızı ve ardından 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 tarafından oluşturulan bir uyarı mesajının ekran görüntüsü](https://web.developers.google.cn/static/articles/lighthouse-ci/image/screenshot-a-warning-mes-f1c97df5d1d.png?authuser=5&hl=tr)
Lighthouse CI onayları hakkında daha fazla bilgi için belgeleri inceleyin.
Lighthouse CI çalıştırmak için GitHub Action'ı oluşturma
Çalıştırmak için GitHub Action kullanılabilir Lighthouse CI. Bu komut, bir kod kullanıldığında yeni bir Lighthouse raporu GitHub deposunun herhangi bir dalına aktarılır. Bunu birlikte kullanın bir duruma sahip kontrol et kullanabilirsiniz.
![GitHub durum kontrolünün ekran görüntüsü](https://web.developers.google.cn/static/articles/lighthouse-ci/image/screenshot-a-github-stat-667c532905358.png?authuser=5&hl=tr)
Deponuzun kök dizininde şu isimli bir dizin oluşturun:
.github/workflows
İlgili içeriği oluşturmak için kullanılan iş akışları bu dizine eklenir. İş akışı, önceden belirlenmiş bir zamanda çalışır (örneğin, kod aktarıldığında) ve bir veya daha fazla işlemden oluşur.mkdir .github mkdir .github/workflows
.github/workflows
ürünündelighthouse-ci.yaml
adlı bir dosya oluşturun. Bu dosya yeni bir iş akışı için yapılandırmayı koruyacak.touch lighthouse-ci.yaml
Aşağıdaki metni
lighthouse-ci.yaml
adlı reklam grubuna 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, çalışacak tek bir iş içeren bir iş akışı ayarlar. anlamına gelir. 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ın ve sonuçları geçici olarak herkese açık depolama alanına yükleyin.
Bu değişiklikleri kaydedin ve GitHub'a aktarın. Kampanyayı doğru bir şekilde yukarıdaki adımlar uygulandığında, kodun GitHub'a aktarılması iş akışını çalıştırmayı tetikler. yazın.
Lighthouse CI'nın tetiklendiğini onaylamak ve raporu görüntülemek için projenizin İşlemler sekmesine gidin. Burada Proje oluşturun ve Lighthouse CI'yı çalıştırın en uygun son kayıt.
Belirli bir kayda karşılık gelen Lighthouse raporuna gidebilirsiniz İşlemler sekmesinden. Kaydetmeyi ve ardından Lighthouse CI'yı tıklayın. daha sonra Lighthouse CI'yı çalıştırma adımının sonuçlarını genişletin.
Lighthouse CI'yı çalıştırmak için az önce bir GitHub Action ayarladınız. Bu, en çok GitHub durumuyla birlikte kullanıldığında kullanışlıdır onay kutusunu işaretleyin.
GitHub durum denetimi ayarla
Durum denetimi, yapılandırıldıysa her halkla ilişkiler ve genellikle bir testin sonuçları veya bir testin başarısı seçeceğiz.
![GitHub "Settings"in ekran görüntüsü sekmesinden](https://web.developers.google.cn/static/articles/lighthouse-ci/image/screenshot-the-github-s-67f929ea66a01.png?authuser=5&hl=tr)
Aşağıdaki adımlarda Lighthouse CI için durum denetiminin nasıl ayarlanacağı açıklanmaktadır.
Lighthouse CI GitHub uygulamasına gidin. sayfasına gidin ve Yapılandır'ı tıklayın.
(İsteğe bağlı) GitHub'da birden fazla kuruluşa dahilseniz Lighthouse'u kullanmak istediğiniz deponun sahibi olan kuruluş CI.
Tüm depolarda Lighthouse CI'yı etkinleştirmek istiyorsanız All Repositories'i (Tüm depolar) seçin. Depoları yalnızca kullanmak istiyorsanız Yalnızca depoları seçin'i seçin depoları seçmeli ve ardından depoları seçmelidir. Ardından Yükle ve Yetkilendir'i tıklayın.
Gösterilen jetonu kopyalayın. Sonraki adımda bu adı kullanacaksınız.
Jetonu eklemek için GitHub'ınızın Settings (Ayarlar) sayfasına gidin deponuz varsa Gizli anahtarlar'ı, ardından Yeni gizli anahtar ekle'yi tıklayın.
Name (Ad) alanını
LHCI_GITHUB_APP_TOKEN
olarak ve Value'yu (Değer) ayarlayın. alanını son adımda kopyaladığınız jetona ekleyin ve ardından Ekle gizli düğmesi.lighthouse-ci.yaml
dosyasına gidin ve yeni ortam gizli anahtarını "Run Lighthouse CI"ya ekleyin. komutunu kullanın.
- 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 kontrolü kullanıma hazır. Test etmek için yeni bir pull oluşturun talep edin veya mevcut bir pull isteğine kayıt aktarın.
Lighthouse CI sunucusunu kurma
Lighthouse CI sunucusu, geçmiş deneyimi keşfetmek için bir kontrol paneli sağlar Lighthouse raporları. Ayrıca, veriler için özel, uzun vadeli veri deposu görevi de Lighthouse raporları.
![Lighthouse CI Server kontrol panelinin ekran görüntüsü](https://web.developers.google.cn/static/articles/lighthouse-ci/image/screenshot-the-lighthous-bf52f6dd2ad0e.png?authuser=5&hl=tr)
![Lighthouse CI Server'daki iki Lighthouse raporunu karşılaştırmanın ekran görüntüsü](https://web.developers.google.cn/static/articles/lighthouse-ci/image/screenshot-comparing-li-a86afa61fb603.png?authuser=5&hl=tr)
- Karşılaştırılacak kaydetmeleri seçin.
- İki kaydetme arasındaki Lighthouse puanının değişim 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, dağıtım ve güvenlik konusunda deneyimli kullanıcılar için uygundur. yönetebiliyor.
Lighthouse CI sunucusunun kurulumuyla ilgili bilgiler ve dağıtım için Heroku ve Docker'ı kullanıyorsanız talimatları inceleyin.