Cara menambahkan Lighthouse ke sistem continuous integration, seperti GitHub Actions.
Lighthouse CI adalah rangkaian alat untuk menggunakan Lighthouse selama integrasi berkelanjutan. Lighthouse CI dapat disertakan ke dalam alur kerja developer dengan berbagai cara. Panduan ini membahas topik berikut:
- Menggunakan CLI CI Lighthouse.
- Mengonfigurasi penyedia CI untuk menjalankan Lighthouse CI.
- Menyiapkan GitHub Action dan pemeriksaan status untuk Lighthouse CI. Tindakan ini akan otomatis menampilkan hasil Lighthouse di permintaan pull GitHub.
- Membuat dasbor performa dan penyimpanan data untuk laporan Lighthouse.
Ringkasan
Lighthouse CI adalah serangkaian alat gratis yang memfasilitasi penggunaan Lighthouse untuk pemantauan performa. Satu laporan Lighthouse memberikan ringkasan performa halaman web saat dijalankan; Lighthouse CI menunjukkan perubahan temuan ini dari waktu ke waktu. Hal ini dapat digunakan untuk mengidentifikasi dampak perubahan kode tertentu atau memastikan bahwa nilai minimum performa terpenuhi selama proses integrasi berkelanjutan. Meskipun pemantauan performa adalah kasus penggunaan paling umum untuk Lighthouse CI, pemantauan performa dapat digunakan untuk memantau aspek lain dari laporan Lighthouse, misalnya SEO atau aksesibilitas.
Fungsi inti Lighthouse CI disediakan oleh antarmuka command line Lighthouse CI. (Catatan: Ini adalah alat terpisah dari Lighthouse CLI.) Lighthouse CI CLI menyediakan kumpulan perintah untuk menggunakan Lighthouse CI. Misalnya, perintah autorun
menjalankan beberapa
eksekusi Lighthouse, mengidentifikasi laporan Lighthouse median, dan mengupload laporan
untuk disimpan. Perilaku ini dapat disesuaikan secara signifikan dengan meneruskan flag tambahan
atau menyesuaikan file konfigurasi Lighthouse CI, lighthouserc.js
.
Meskipun fungsi inti Lighthouse CI terutama dienkapsulasi dalam Lighthouse CI CLI, Lighthouse CI biasanya digunakan melalui salah satu pendekatan berikut:
- Menjalankan CI Lighthouse sebagai bagian dari continuous integration
- Menggunakan GitHub Action Lighthouse CI yang berjalan dan memberikan komentar pada setiap permintaan pull
- Melacak performa dari waktu ke waktu melalui dasbor yang disediakan oleh Server Lighthouse.
Semua pendekatan ini dibuat berdasarkan Lighthouse CI CLI.
Alternatif untuk Lighthouse CI mencakup layanan pemantauan performa pihak ketiga atau menulis skrip Anda sendiri untuk mengumpulkan data performa selama proses CI. Anda harus mempertimbangkan untuk menggunakan layanan pihak ketiga jika lebih suka membiarkan orang lain menangani pengelolaan server pemantauan performa dan perangkat pengujian, atau, jika Anda menginginkan kemampuan notifikasi (seperti integrasi email atau Slack) tanpa harus membuat fitur ini sendiri.
Menggunakan Lighthouse CI secara lokal
Bagian ini menjelaskan cara menjalankan dan menginstal Lighthouse CI CLI secara lokal serta
cara mengonfigurasi lighthouserc.js
. Menjalankan Lighthouse CI CLI secara lokal adalah cara paling mudah untuk memastikan lighthouserc.js
Anda dikonfigurasi dengan benar.
Instal Lighthouse CI CLI.
npm install -g @lhci/cli
Lighthouse CI dikonfigurasi dengan menempatkan file
lighthouserc.js
di root repo project Anda. File ini bersifat wajib dan akan berisi informasi konfigurasi terkait Lighthouse CI. Meskipun Lighthouse CI dapat dikonfigurasi untuk digunakan tanpa repo git, petunjuk dalam artikel ini mengasumsikan bahwa repo project Anda dikonfigurasi untuk menggunakan git.Di root repositori Anda, buat file konfigurasi
lighthouserc.js
.touch lighthouserc.js
Tambahkan kode berikut ke
lighthouserc.js
. Kode ini adalah konfigurasi Lighthouse CI kosong. Anda akan menambahkan ke konfigurasi ini di langkah berikutnya.module.exports = { ci: { collect: { /* Add configuration here */ }, upload: { /* Add configuration here */ }, }, };
Setiap kali Lighthouse CI berjalan, Lighthouse CI akan memulai server untuk menayangkan situs Anda. Server ini memungkinkan Lighthouse memuat situs Anda meskipun tidak ada server lain yang berjalan. Setelah selesai berjalan, Lighthouse CI akan menonaktifkan server secara otomatis. Untuk memastikan penayangan berfungsi dengan benar, Anda harus mengonfigurasi properti
staticDistDir
ataustartServerCommand
.Jika situs Anda bersifat statis, tambahkan properti
staticDistDir
ke objekci.collect
untuk menunjukkan lokasi file statis Anda. Lighthouse CI akan menggunakan servernya sendiri untuk menayangkan file ini saat menguji situs Anda. Jika situs Anda tidak statis, tambahkan propertistartServerCommand
ke objekci.collect
untuk menunjukkan perintah yang memulai server Anda. Lighthouse CI akan memulai proses server baru selama pengujian dan menonaktifkannya setelah itu.// Static site example collect: { staticDistDir: './public', }
// Dynamic site example collect: { startServerCommand: 'npm run start', }
Tambahkan properti
url
ke objekci.collect
untuk menunjukkan URL yang akan dijalankan Lighthouse CI. Nilai propertiurl
harus disediakan sebagai array URL; array ini dapat berisi satu atau beberapa URL. Secara default, Lighthouse CI akan menjalankan Lighthouse tiga kali untuk setiap URL.collect: { // ... url: ['http://localhost:8080'] }
Tambahkan properti
target
ke objekci.upload
dan tetapkan nilainya ke'temporary-public-storage'
. Laporan Lighthouse yang dikumpulkan oleh Lighthouse CI akan diupload ke penyimpanan publik sementara. Laporan akan tetap ada selama tujuh hari, lalu dihapus secara otomatis. Panduan penyiapan ini menggunakan opsi upload "penyimpanan publik sementara" karena cepat disiapkan. Untuk informasi tentang cara lain menyimpan laporan Lighthouse, lihat dokumentasi.upload: { target: 'temporary-public-storage', }
Lokasi penyimpanan laporan akan mirip dengan ini:
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html
(URL ini tidak akan berfungsi karena laporan telah dihapus.)
Jalankan Lighthouse CI CLI dari terminal menggunakan perintah
autorun
. Tindakan ini akan menjalankan Lighthouse tiga kali dan mengupload laporan Lighthouse median.lhci autorun
Jika Anda telah mengonfigurasi Lighthouse CI dengan benar, menjalankan perintah ini akan menghasilkan output yang mirip dengan ini:
✅ .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.
Anda dapat mengabaikan pesan
GitHub token not set
dalam output konsol. Token GitHub hanya diperlukan jika Anda ingin menggunakan Lighthouse CI dengan Action GitHub. Cara menyiapkan GitHub Action akan dijelaskan nanti dalam artikel ini.Mengklik link dalam output yang dimulai dengan
https://storage.googleapis.com...
akan mengarahkan Anda ke laporan Lighthouse yang sesuai dengan median Lighthouse yang dijalankan.Default yang digunakan oleh
autorun
dapat diganti melalui command line ataulighthouserc.js
. Misalnya, konfigurasilighthouserc.js
di bawah ini menunjukkan bahwa lima operasi Lighthouse harus dikumpulkan setiap kaliautorun
dieksekusi.Perbarui
lighthouserc.js
untuk menggunakan propertinumberOfRuns
:module.exports = { // ... collect: { numberOfRuns: 5 }, // ... }, };
Jalankan kembali perintah
autorun
:lhci autorun
Output terminal akan menunjukkan bahwa Lighthouse telah dijalankan lima kali, bukan tiga kali seperti default:
✅ .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.
Untuk mempelajari opsi konfigurasi lainnya, lihat dokumentasi konfigurasi Lighthouse CI.
Menyiapkan proses CI untuk menjalankan CI Lighthouse
Lighthouse CI dapat digunakan dengan alat CI favorit Anda. Bagian Mengonfigurasi Penyedia CI dalam dokumentasi Lighthouse CI berisi contoh kode yang menunjukkan cara menggabungkan Lighthouse CI ke dalam file konfigurasi alat CI umum. Secara khusus, contoh kode ini menunjukkan cara menjalankan Lighthouse CI untuk mengumpulkan pengukuran performa selama proses CI.
Menggunakan Lighthouse CI untuk mengumpulkan pengukuran performa adalah tempat yang tepat untuk memulai
pemantauan performa. Namun, pengguna tingkat lanjut mungkin ingin melangkah lebih jauh dan menggunakan Lighthouse CI untuk membuat build gagal jika tidak memenuhi kriteria yang telah ditentukan sebelumnya seperti lulus audit Lighthouse tertentu atau memenuhi semua anggaran performa. Perilaku ini dikonfigurasi melalui properti
assert
file lighthouserc.js
.
Lighthouse CI mendukung tiga tingkat pernyataan:
off
: mengabaikan pernyataanwarn
: mencetak kegagalan ke stderrerror
: mencetak kegagalan ke stderr dan keluar dari Lighthouse CI dengan kode keluar yang bukan nol
Berikut adalah contoh konfigurasi lighthouserc.js
yang menyertakan
pernyataan. Fungsi ini menetapkan pernyataan untuk skor kategori performa dan aksesibilitas Lighthouse. Untuk mencobanya, tambahkan pernyataan yang ditampilkan di bawah ke file lighthouserc.js
, lalu jalankan kembali Lighthouse CI.
module.exports = {
ci: {
collect: {
// ...
},
assert: {
assertions: {
'categories:performance': ['warn', {minScore: 1}],
'categories:accessibility': ['error', {minScore: 1}]
}
},
upload: {
// ...
},
},
};
Output konsol yang dihasilkan akan terlihat seperti ini:
Untuk informasi selengkapnya tentang pernyataan Lighthouse CI, lihat dokumentasi.
Menyiapkan GitHub Action untuk menjalankan Lighthouse CI
GitHub Action dapat digunakan untuk menjalankan Lighthouse CI. Tindakan ini akan menghasilkan laporan Lighthouse baru setiap kali perubahan kode dikirim ke cabang repositori GitHub mana pun. Gunakan ini bersama dengan pemeriksaan status untuk menampilkan hasil ini di setiap permintaan pull.
Di root repositori Anda, buat direktori bernama
.github/workflows
. Alur kerja untuk project Anda akan ditempatkan di direktori ini. Alur kerja adalah proses yang berjalan pada waktu yang telah ditentukan (misalnya, saat kode di-push) dan terdiri dari satu atau beberapa tindakan.mkdir .github mkdir .github/workflows
Di
.github/workflows
, buat file bernamalighthouse-ci.yaml
. File ini akan menyimpan konfigurasi untuk alur kerja baru.touch lighthouse-ci.yaml
Tambahkan teks berikut ke
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!"
Konfigurasi ini menyiapkan alur kerja yang terdiri dari satu tugas yang akan berjalan setiap kali kode baru dikirim ke repositori. Tugas ini memiliki empat langkah:
- Lihat repositori tempat Lighthouse CI akan dijalankan
- Menginstal dan mengonfigurasi Node
- Menginstal paket npm yang diperlukan
- Jalankan Lighthouse CI dan upload hasilnya ke penyimpanan publik sementara.
Lakukan commit pada perubahan ini dan kirimkan ke GitHub. Jika Anda telah mengikuti langkah-langkah di atas dengan benar, mendorong kode ke GitHub akan memicu pengoperasian alur kerja yang baru saja Anda tambahkan.
Untuk mengonfirmasi bahwa Lighthouse CI telah dipicu dan melihat laporan yang dihasilkannya, buka tab Tindakan di project Anda. Anda akan melihat alur kerja Build project and Run Lighthouse CI yang tercantum di bawah commit terbaru Anda.
Anda dapat membuka laporan Lighthouse yang sesuai dengan commit tertentu dari tab Tindakan. Klik commit, klik langkah alur kerja Lighthouse CI, lalu luaskan hasil langkah jalankan Lighthouse CI.
Anda baru saja menyiapkan GitHub Action untuk menjalankan Lighthouse CI. Hal ini akan sangat berguna jika digunakan bersama dengan pemeriksaan status GitHub.
Menyiapkan pemeriksaan status GitHub
Pemeriksaan status, jika dikonfigurasi, adalah pesan yang muncul di setiap PR dan biasanya menyertakan informasi seperti hasil pengujian atau keberhasilan build.
Langkah-langkah di bawah menjelaskan cara menyiapkan pemeriksaan status untuk Lighthouse CI.
Buka halaman Aplikasi GitHub Lighthouse CI, lalu klik Configure.
(Opsional) Jika Anda adalah bagian dari beberapa organisasi di GitHub, pilih organisasi yang memiliki repositori yang ingin Anda gunakan Lighthouse CI-nya.
Pilih Semua repositori jika Anda ingin mengaktifkan Lighthouse CI di semua repositori atau pilih Hanya pilih repositori jika Anda hanya ingin menggunakannya di repositori tertentu, lalu pilih repositori. Kemudian, klik Instal & Otorisasi.
Salin token yang ditampilkan. Anda akan menggunakannya pada langkah berikutnya.
Untuk menambahkan token, buka halaman Setelan di repositori GitHub Anda, klik Secret, lalu klik Tambahkan secret baru.
Tetapkan kolom Name ke
LHCI_GITHUB_APP_TOKEN
dan tetapkan kolom Value ke token yang Anda salin di langkah terakhir, lalu klik tombol Add secret.Buka file
lighthouse-ci.yaml
dan tambahkan secret lingkungan baru ke perintah "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: $
- Pemeriksaan status siap digunakan. Untuk mengujinya, buat permintaan pull baru atau dorong commit ke permintaan pull yang ada.
Menyiapkan Server CI Lighthouse
Server Lighthouse CI menyediakan dasbor untuk menjelajahi pelaporan Lighthouse historis. DataStore juga dapat berfungsi sebagai datastore pribadi jangka panjang untuk laporan Lighthouse.
- Pilih commit yang akan dibandingkan.
- Jumlah perubahan skor Lighthouse antara dua commit.
- Bagian ini hanya menampilkan metrik yang telah berubah di antara dua commit.
- Regresi ditandai dengan warna merah muda.
- Peningkatan ditandai dengan warna biru.
Server CI Lighthouse paling cocok untuk pengguna yang merasa nyaman men-deploy dan mengelola infrastruktur mereka sendiri.
Untuk informasi tentang cara menyiapkan server Lighthouse CI, termasuk resep untuk menggunakan Heroku dan Docker untuk deployment, lihat petunjuk ini.