Lighthouse 봇을 사용하여 성능 예산 설정

Milica Mihajlija

빠른 속도를 내기 위해 열심히 노력하셨습니다. 이제 Lighthouse Bot으로 성능 테스트를 자동화하여 빠른 속도를 유지하세요.

Lighthouse는 앱을 5가지 카테고리로 평가하며 그중 하나가 성능입니다. 코드를 수정할 때마다 DevTools 또는 Lighthouse CLI를 사용하여 성능 변경사항을 모니터링할 수도 있지만 그럴 필요는 없습니다. 도구를 사용하면 지루한 작업을 대신 처리할 수 있습니다. Travis CI는 새 코드를 푸시할 때마다 클라우드에서 앱 테스트를 자동으로 실행하는 훌륭한 서비스입니다.

Lighthouse Bot은 Travis CI와 통합되며 성능 예산 기능을 통해 실수로 성능을 다운그레이드하지 않도록 합니다. Lighthouse 점수가 설정한 기준점 (예: < 96/100) 아래로 떨어지면 풀 요청 병합이 허용되지 않도록 저장소를 구성할 수 있습니다.

GitHub에서 Lighthouse 봇 검사 실패
GitHub에서 Lighthouse 봇 검사

localhost에서 성능을 테스트할 수 있지만 라이브 서버에서는 사이트의 성능이 다르게 나타나는 경우가 많습니다. 보다 현실적인 그림을 얻으려면 스테이징 서버에 사이트를 배포하는 것이 좋습니다. 어떤 호스팅 서비스를 사용해도 됩니다. 이 가이드에서는 Firebase 호스팅을 사용합니다.

1. 설정

이 간단한 앱은 세 숫자를 정렬하는 데 도움이 됩니다.

GitHub에서 예시를 클론하고 GitHub 계정에 저장소로 추가해야 합니다.

2. Firebase에 배포

시작하려면 Firebase 계정이 필요합니다. 이 단계를 완료한 후 '프로젝트 추가'를 클릭하여 Firebase Console에서 새 프로젝트를 만듭니다.

Firebase에 배포

앱을 배포하려면 Firebase CLI가 필요합니다. 이미 설치되어 있더라도 다음 명령어를 사용하여 CLI를 최신 버전으로 자주 업데이트하는 것이 좋습니다.

npm install -g firebase-tools

Firebase CLI를 승인하려면 다음을 실행합니다.

firebase login

이제 프로젝트를 초기화합니다.

firebase init

설정 중에 콘솔에서 일련의 질문을 합니다.

  • 기능을 선택하라는 메시지가 표시되면 '호스팅'을 선택합니다.
  • 기본 Firebase 프로젝트의 경우 Firebase Console에서 만든 프로젝트를 선택합니다.
  • 공개 디렉터리로 'public'을 입력합니다.
  • 단일 페이지 앱으로 구성하려면 'N' (아니요)을 입력합니다.

이 프로세스는 프로젝트 디렉터리의 루트에 firebase.json 구성 파일을 생성합니다.

축하합니다. 배포할 준비가 되었습니다. 실행:

firebase deploy

순식간에 라이브 앱이 만들어집니다.

3. Travis 설정

Travis에서 계정을 등록한 다음 프로필의 설정 섹션에서 GitHub 앱 통합을 활성화해야 합니다.

Travis CI의 GitHub 앱 통합

계정이 있으면

프로필의 설정으로 이동하여 계정 동기화 버튼을 누르고 프로젝트 저장소가 Travis에 나열되어 있는지 확인합니다.

지속적 통합을 시작하려면 다음 두 가지가 필요합니다.

  1. 루트 디렉터리에 .travis.yml 파일이 있어야 합니다.
  2. 일반적인 git 푸시를 실행하여 빌드를 트리거하려면 다음 단계를 따르세요.

lighthouse-bot-starter 저장소에 이미 .travis.yml YAML 파일이 있습니다.

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

YAML 파일은 Travis에게 모든 종속 항목을 설치하고 앱을 빌드하도록 지시합니다. 이제 예시 앱을 자체 GitHub 저장소에 푸시할 차례입니다. 아직 실행하지 않은 경우 다음 명령어를 실행합니다.

git push origin main

Travis의 설정에서 저장소를 클릭하여 프로젝트의 Travis 대시보드를 확인합니다. 문제가 없으면 몇 분 후에 빌드가 노란색에서 녹색으로 바뀝니다. 🎉

4. Travis로 Firebase 배포 자동화

2단계에서는 Firebase 계정에 로그인하고 명령줄에서 firebase deploy를 사용하여 앱을 배포했습니다. Travis가 Firebase에 앱을 배포하려면 권한을 부여해야 합니다. 그 방법은 무엇일까요? Firebase 토큰 사용 🗝️🔥

Firebase 승인

토큰을 생성하려면 다음 명령어를 실행합니다.

firebase login:ci

Firebase에서 사용자를 인증할 수 있도록 브라우저 창에 새 탭이 열립니다. 그런 다음 콘솔을 다시 살펴보면 새로 생성된 토큰이 표시됩니다. 복사한 후 Travis로 돌아갑니다.

프로젝트의 Travis 대시보드에서 More options > Settings > Environment variables로 이동합니다.

값 필드에 토큰을 붙여넣고 변수 이름을 FIREBASE_TOKEN로 지정한 후 추가합니다.

Travis 설정에 배포 추가

Travis가 빌드에 성공할 때마다 앱을 배포하도록 하려면 다음 줄이 필요합니다. .travis.yml 파일 끝에 추가합니다. 🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

이 변경사항을 GitHub에 푸시하고 첫 번째 자동 배포를 기다립니다. Travis 로그를 살펴보면 곧 ✔️ 배포 완료!라고 표시됩니다.

이제 앱을 변경할 때마다 변경사항이 Firebase에 자동으로 배포됩니다.

5. Lighthouse 봇 설정

친절한 Lighthouse 봇이 앱의 Lighthouse 점수를 업데이트해 줍니다. 저장소에 대한 초대만 있으면 됩니다.

GitHub에서 프로젝트 설정으로 이동하여 'lighthousebot'을 공동작업자로 추가합니다 (설정 > 공동작업자).

Lighthouse 봇 공동작업자 상태

이러한 요청은 수동으로 승인해야 하므로 즉시 처리되지 않을 수 있습니다. 테스트를 시작하기 전에 lighthousebot이 공동작업자 상태를 승인했는지 확인하세요. 그동안 Travis의 프로젝트 환경 변수에 다른 키도 추가해야 합니다. 여기에 이메일을 남겨주세요. 그러면 받은편지함으로 Lighthouse Bot 키가 전송됩니다. 📬

Travis에서 이 키를 환경 변수로 추가하고 LIGHTHOUSE_API_KEY로 이름을 지정합니다.

프로젝트에 Lighthouse Bot 추가

그런 다음 다음을 실행하여 프로젝트에 Lighthouse Bot을 추가합니다.

npm i --save-dev https://github.com/ebidel/lighthousebot

package.json에 다음을 추가합니다.

"scripts": {
  "lh": "lighthousebot"
}

Travis 구성에 Lighthouse 봇 추가

마지막으로 모든 풀 요청 후에 앱의 성능을 테스트하세요.

.travis.yml에서 after_success에 다른 단계를 추가합니다.

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

지정된 URL에서 Lighthouse 감사를 실행하므로 https://staging.example.com를 앱의 URL(your-app-123.firebaseapp.com)로 바꿉니다.

성능 점수가 95 미만인 앱 변경사항을 허용하지 않도록 기준을 높게 설정하고 설정을 조정합니다.

- npm run lh -- --perf=95 https://staging.example.com

Travis에서 Lighthouse 봇 테스트를 트리거하는 풀 요청 만들기

Lighthouse 봇은 풀 요청만 테스트하므로 지금 기본 브랜치에 푸시하면 Travis 로그에 '이 스크립트는 Travis PR 요청에서만 실행할 수 있습니다'라는 메시지만 표시됩니다.

Lighthouse 봇 테스트를 트리거하려면 다음 단계를 따르세요.

  1. 새 브랜치 체크아웃
  2. GitHub에 푸시
  3. pull 요청 만들기

pull 요청 페이지에서 Lighthouse Bot이 노래를 부를 때까지 기다리세요. 🎤

Lighthouse 점수 통과

GitHub 검사 통과

실적 점수가 우수하고, 앱이 예산 범위 내에 있으며, 검사를 통과했습니다.

Lighthouse 옵션 더보기

Lighthouse가 5가지 카테고리를 테스트하는 것을 기억하시나요? Lighthouse 봇 플래그가 있는 항목에 대해 점수를 적용할 수 있습니다.

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

예:

npm run lh -- --perf=93 --seo=100 https://staging.example.com

성능 점수가 93 미만이거나 SEO 점수가 100 미만이면 PR이 실패합니다.

--no-comment 옵션을 사용하여 Lighthouse 봇의 댓글을 받지 않도록 선택할 수도 있습니다.