속도를 높이기 위해 열심히 노력했으니 이제 Lighthouse Bot로 성능 테스트를 자동화하여 속도를 유지할 수 있습니다.
Lighthouse는 앱을 5가지 카테고리로 평가하며 그 중 하나가 성능 카테고리입니다. 코드를 수정할 때마다 DevTools 또는 Lighthouse CLI를 사용하여 성능 변경사항을 모니터링할 수 있지만 그렇게 할 필요는 없습니다. 도구는 지루한 일을 대신할 수 있습니다. Travis CI는 새 코드를 푸시할 때마다 클라우드에서 앱 테스트를 자동으로 실행하는 훌륭한 서비스입니다.
Lighthouse Bot은 Travis CI와 통합되며 성능 예산 기능을 통해 사용자가 알아차리지 못하는 사이에 실수로 성능을 다운그레이드하지 않습니다. Lighthouse 점수가 설정한 기준 미만 (예: 96/100) 미만이면 pull 요청 병합을 허용하지 않도록 저장소를 구성할 수 있습니다.
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에 계정을 등록한 후 프로필의 Settings 섹션에서 GitHub Apps 통합을 활성화해야 합니다.
계정이 있다면
프로필 아래의 설정으로 이동하고 계정 동기화 버튼을 누르고 프로젝트 저장소가 Travis에 나열되는지 확인합니다.
지속적 통합을 시작하려면 다음 두 가지 사항이 필요합니다.
- 루트 디렉터리에
.travis.yml파일을 두기 위해 - 일반적인 이전 git push를 수행하여 빌드를 트리거하려면 다음 안내를 따르세요.
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의 Settings 아래에서 저장소를 클릭하여 프로젝트의 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 로그를 보면 곧 ✔️ Deploy complete!
이제 앱을 변경할 때마다 변경사항이 Firebase에 자동으로 배포됩니다.
5. Lighthouse 봇 설정
친절한 Lighthouse 봇이 앱의 Lighthouse 점수를 알려줍니다. 저장소 초대만 있으면 됩니다.
GitHub에서 프로젝트 설정으로 이동하여 'lighthousebot'을 공동작업자로 추가합니다 (설정 > 공동작업자).
이러한 요청을 승인하는 것은 수동 프로세스이므로 항상 즉시 발생하는 것은 아닙니다. 테스트를 시작하기 전에 Lighthousebot의 공동작업자 상태가 승인되었는지 확인합니다. 그동안 Travis에서 프로젝트의 환경 변수에 다른 키도 추가해야 합니다. 이메일을 여기에 두면 Lighthouse 봇 키가 받은편지함으로 전송됩니다. 📬
Travis에서 이 키를 환경 변수로 추가하고 이름을 LIGHTHOUSE_API_KEY로 지정합니다.
프로젝트에 Lighthouse Bot 추가
다음으로 다음을 실행하여 프로젝트에 Lighthouse Bot을 추가합니다.
npm i --save-dev https://github.com/ebidel/lighthousebot
다음 비트를 package.json에 추가합니다.
"scripts": {
"lh": "lighthousebot"
}
Travis 구성에 Lighthouse Bot 추가하기
마지막 방법으로, 모든 pull 요청 후 앱 성능을 테스트합니다.
.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 봇 테스트를 트리거하는 pull 요청 만들기
Lighthouse Bot은 pull 요청만 테스트하므로 지금 기본 브랜치로 푸시하면 Travis PR 요청에만 '이 스크립트를 실행할 수 있습니다'라는 메시지가 표시됩니다.
Lighthouse 봇 테스트를 트리거하는 방법은 다음과 같습니다.
- 새 브랜치 결제
- GitHub에 푸시
- pull 요청
pull 요청 페이지를 기다려서 Lighthouse 봇이 노래할 때까지 기다리세요. 🎤
성능 점수가 높으며 앱 예산이 부족하여 검토가 통과되었습니다.
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점 아래로 떨어지거나 또는 검색엔진 최적화 점수가 100 아래로 떨어지면 PR이 실패합니다.
--no-comment 옵션을 사용하여 Lighthouse Bot의 댓글을 받지 않도록 선택할 수도 있습니다.