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

Milica Mihajlija

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

Lighthouse는 5가지 카테고리로 앱의 성능을 평가하며 그중 하나가 실적입니다. 오늘 배운 내용을 DevTools로 성능 변화 모니터링 또는 Lighthouse CLI를 매번 코드를 수정할 필요가 없습니다. 도구를 사용하면 지루한 작업을 대신할 수 있습니다. Travis CI는 새로운 코드를 푸시할 때마다 클라우드에서 앱 테스트를 자동으로 실행합니다.

Lighthouse Bot은 Travis CI와 통합되며, 성능 예산 기능은 실적을 실수로 다운그레이드하는 일이 없도록 하는 것이 좋습니다. 다음과 같은 작업을 할 수 있습니다. 저장소 구성 Lighthouse 점수가 다음 아래로 떨어지는 경우 pull 요청 병합이 허용되지 않습니다. 설정한 임계값 (예: < 96/100)입니다.

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

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에서 만든 프로젝트를 선택합니다.
  • '공개'를 입력합니다. 을 공개 디렉터리로 지정할 수 있습니다.
  • 'N'(아니요)을 입력하여 단일 페이지 앱으로 구성합니다.

이 프로세스에서는 루트에 firebase.json 구성 파일을 만듭니다. 프로젝트 디렉터리에 있습니다

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

firebase deploy

순식간에 앱이 게시됩니다.

3. Travis 설정

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

Travis CI의 GitHub Apps 통합

계정이 생성된 후

프로필 아래의 설정으로 이동하여 계정 동기화 버튼을 누르고 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 대시보드에서 옵션 더보기 >로 이동합니다. 설정 > 환경 변수.

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

Travis 설정에 배포 추가

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

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

이 변경사항을 GitHub에 푸시하고 첫 번째 자동 배포가 완료될 때까지 기다립니다. Travis 로그를 확인하면 곧 '✔️ 배포 완료'라고 표시됩니다.

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

5. Lighthouse Bot 설정

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

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

Lighthouse 봇 공동작업자 상태

이러한 요청은 수동으로 승인되므로 항상 즉시 승인되지는 않습니다. 테스트를 시작하기 전에 lighthousebot에서 공동작업자 상태를 승인했는지 확인합니다. 그 동안에 다른 키를 추가해야 합니다. 환경 변수를 정의하는 방법을 익힐 수 있습니다 여기에 이메일을 남겨주세요. 받은편지함으로 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 Bot은 풀 요청만 테스트하므로 지금 기본 브랜치에 푸시하면 Travis 로그에 '이 스크립트는 Travis PR 요청에서만 실행할 수 있습니다'라는 메시지가 표시됩니다.

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

  1. 새 브랜치 확인
  2. GitHub에 푸시
  3. pull 요청 만들기

pull 요청 페이지를 잠시 기다린 후 Lighthouse Bot이 노래를 부르기를 기다리세요. 🎤

통과 Lighthouse 점수

GitHub 검사 통과

실적 점수가 우수하고 앱 예산이 적으며 검토가 통과되었습니다.

Lighthouse 옵션 더보기

Lighthouse에서 5가지 카테고리를 테스트하는 방법을 기억하시나요? Lighthouse Bot 플래그가 있는 사이트의 점수를 적용할 수 있습니다.

--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 Bot의 의견을 받지 않을 수도 있습니다.