데브옵스
Lighthouse CI를 알아보고 Github Actions에 적용하기
두줄요약
Lighthouse CI를 GitHub Actions에 연동해 웹 성능 측정과 보고서 생성을 자동화했습니다.\n임계값 검증과 PR 댓글 지표 공유로 성능 저하를 병합 전에 확인합니다.
구조와 흐름
- Lighthouse의 Performance·Accessibility·Best Practices·SEO·PWA 점수 및 FCP·LCP 등 상세 지표 측정
- Lighthouse CI 설정 파일의 collect·assert·upload 옵션 기반 빌드 산출물 성능 분석
- GitHub Actions의 패키지 설치·빌드·Lighthouse CI 실행 단계 자동화
성능/운영 포인트
- 네트워크 등 변수 완화를 위한 다회 실행과 대표 결과 업로드
- 임시 공개 스토리지 또는 파일시스템 기반 보고서 저장
- PR별 성능 저하 조기 탐지와 병합 전 검증
주의할 점
- assert 기준 미충족 시 warning 또는 error에 따른 CI 실패
- GitHub App 토큰을 Secrets의 LHCI_GITHUB_APP_TOKEN으로 관리
- 파일 저장 결과의 manifest와 JSON 파싱 경로를 실행 환경에 맞게 설정
적용해볼 점
- FCP·LCP 등 상세 지표를 파싱해 PR 댓글로 제공
- 로그인 필요 사이트의 Puppeteer 기반 로그인 후 Lighthouse 실행
- Lighthouse CI Server를 통한 기준 커밋과 현재 커밋 비교
