Lighthouse CI를 알아보고 Github Actions에 적용하기

간단 소개

Lighthouse CI와 Github Actions를 연동하여 웹 성능 측정 및 보고서 생성을 자동화하는 방법을 소개합니다.

AI Summary

Lighthouse 소개 및 CI 적용 동기
- 웹 앱/페이지 성능 분석 도구인 Lighthouse를 활용하여 성능 측정 및 최적화 목표 달성
- Lighthouse CI와 Github Actions 연동을 통한 성능 측정 자동화 필요성 제기
Lighthouse CI 설정 및 활용
- Lighthouse CI를 로컬 환경에 설치하고 설정 파일(.lighthouserc.js)을 통해 정적 파일 경로, URL, 실행 횟수 등을 설정
- lhci autorun 명령어를 통해 Lighthouse CI를 실행하고, 생성된 보고서를 확인하여 성능 지표 검토
- assert 설정을 통해 성능 기준 미달 시 빌드 실패를 유도하고, Github Actions와 연동하여 CI 환경에서 성능 검증 자동화
Github Actions 연동 및 결과 활용
- Github Actions 워크플로우 파일(.github/workflows/lighthouse.yaml)을 작성하여 Lighthouse CI 실행 환경 구성
- Lighthouse CI Github App을 설치하고, secrets에 LHCI_GITHUB_APP_TOKEN을 저장하여 인증 설정
- Github Actions 실행 결과에서 Lighthouse 보고서를 확인하고, PR에 댓글로 성능 지표를 표시하여 개발자가 성능 저하를 사전에 인지하도록 지원