이 Codelab에서는 Firebase Performance Monitoring을 사용하여 채팅 웹 앱의 성능을 측정하는 방법을 알아 봅니다. 라이브 데모를 보려면 https://fireperf-friendlychat.web.app/ 을 방문 하세요 .
배울 것
- 기본 측정 항목 (페이지로드 및 네트워크 요청)을 얻기 위해 웹 앱에 Firebase 성능 모니터링을 추가하는 방법입니다.
- 커스텀 트레이스로 특정 코드를 측정하는 방법.
- 사용자 지정 추적에 연결된 추가 사용자 지정 지표를 기록하는 방법.
- 맞춤 속성을 사용하여 실적 데이터를 더 세분화하는 방법.
- 성능 모니터링 대시 보드를 사용하여 웹 앱의 성능을 이해하는 방법.
필요한 것
명령 줄에서 Codelab의 GitHub 저장소 를 복제합니다.
git clone https://github.com/firebase/codelab-friendlychat-web
또는 git을 설치하지 않은 경우 저장소를 zip 파일로 다운로드 할 수 있습니다.
시작 앱 가져 오기
IDE를 사용하여 복제 된 저장소에서 📁 performance-monitoring-start 디렉터리를 열거 나 가져옵니다. 이 📁 performance-monitoring-start 디렉토리에는 채팅 웹 앱인 codelab의 시작 코드가 포함되어 있습니다.
Firebase 프로젝트 만들기
- Firebase 콘솔 에서 프로젝트 추가를 클릭합니다.
- Firebase 프로젝트 이름을
FriendlyChat지정합니다.
Firebase 프로젝트의 프로젝트 ID를 기억하세요.
- 프로젝트 만들기를 클릭합니다.
프로젝트에 Firebase 웹 앱 추가
- 웹 아이콘 클릭
새 Firebase 웹 앱을 만듭니다. - 닉네임
Friendly Chat앱을 등록한 다음 이 앱에 대한 Firebase 호스팅도 설정 옆의 확인란을 선택합니다. - 앱 등록을 클릭 합니다 .
- 나머지 단계를 클릭하십시오. 이제 화면의 지시를 따를 필요가 없습니다. 이는이 코드 랩의 이후 단계에서 다룰 것입니다.
Firebase 인증에 Google 로그인 사용
사용자가 Google 계정으로 채팅 앱에 로그인 할 수 있도록 Google 로그인 방법을 사용합니다.
Google 로그인을 활성화해야합니다.
- Firebase 콘솔에서 왼쪽 패널의 개발 섹션을 찾습니다.
- 인증 을 클릭 한 다음 로그인 방법 탭을 클릭합니다 ( 콘솔로 이동 ).
- Google 로그인 공급자를 활성화 한 다음 저장 을 클릭합니다.
Cloud Firestore 사용
웹 앱은 Cloud Firestore 를 사용하여 채팅 메시지를 저장하고 새 채팅 메시지를받습니다.
Cloud Firestore를 사용 설정해야합니다.
- Firebase 콘솔의 개발 섹션에서 데이터베이스를 클릭합니다.
- Cloud Firestore 창에서 데이터베이스 만들기를 클릭 합니다 .
- 테스트 모드 에서 시작 옵션을 선택한 다음 보안 규칙에 대한 고지 사항을 읽은 후 활성화 를 클릭합니다.
이 Codelab의 시작 코드에는 더 안전한 규칙이 포함되어 있습니다. 나중에 코드 랩에서 배포 할 것입니다.
클라우드 스토리지 활성화
웹 앱은 Firebase 용 Cloud Storage를 사용하여 사진을 저장, 업로드, 공유합니다.
Cloud Storage를 사용 설정해야합니다.
- Firebase 콘솔의 개발 섹션에서 저장소를 클릭합니다.
- 시작하기를 클릭합니다.
- Firebase 프로젝트의 보안 규칙에 대한 면책 조항을 읽고 확인을 클릭 합니다 .
시작 코드에는 코드 랩에서 나중에 배포 할 기본 보안 규칙이 포함되어 있습니다.
Firebase 명령 줄 인터페이스 (CLI)를 사용하면 Firebase 호스팅을 사용하여 웹 앱을 로컬에서 제공하고 웹 앱을 Firebase 프로젝트에 배포 할 수 있습니다.
- Firebase 문서의 다음 안내 에 따라 CLI를 설치합니다.
- 터미널에서 다음 명령을 실행하여 CLI가 올바르게 설치되었는지 확인하십시오.
firebase --version
Firebase CLI의 버전이 v8.0.0 이상인지 확인합니다.
- 다음 명령어를 실행하여 Firebase CLI를 승인합니다.
firebase login
앱의 로컬 디렉터리 (코드 랩에서 이전에 복제 한 저장소)에서 Firebase 호스팅에 대한 앱 구성을 가져 오도록 웹 앱 템플릿을 설정했습니다. 하지만 구성을 가져 오려면 앱을 Firebase 프로젝트와 연결해야합니다.
- 명령 줄이 앱의 로컬
performance-monitoring-start디렉터리에 액세스하는지 확인합니다. - 다음 명령어를 실행하여 앱을 Firebase 프로젝트와 연결합니다.
firebase use --add
- 메시지가 표시되면 프로젝트 ID를 선택한 다음 Firebase 프로젝트에 별칭을 지정합니다.
별칭은 여러 환경 (프로덕션, 스테이징 등)이있는 경우 유용합니다. 그러나이 코드 랩에서는 default 별칭을 사용하겠습니다.
- 명령 줄의 나머지 지침을 따릅니다.
웹용 Firebase Performance Monitoring SDK와 통합하는 방법에는 여러 가지가 있습니다 (자세한 내용은 문서 참조). 이 코드 랩에서는 호스팅 URL 에서 성능 모니터링을 활성화 합니다 .
성능 모니터링 추가 및 Firebase 초기화
-
public/index.html파일을 연 다음TODO아래에 다음 줄을 추가하여 Firebase Performance Monitoring SDK를 포함합니다.
index.html
<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>
- 또한 Firebase 프로젝트 및 사용할 웹 앱에 대한 정보가 포함 된 구성 개체로 Firebase SDK를 초기화해야합니다. Firebase 호스팅을 사용하고 있으므로이 구성을 수행하는 특수 스크립트를 가져올 수 있습니다. 이 코드 랩의 경우
public/index.html파일 하단에 이미 다음 줄을 추가했지만 파일이 있는지 다시 확인하세요.
index.html
<script src="/__/firebase/init.js"></script>
-
public/scripts/main.js파일에서TODO아래에 다음 줄을 추가하여 성능 모니터링을 초기화합니다.
main.js
// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();
성능 모니터링은 이제 사용자가 사이트를 사용할 때 페이지로드 및 네트워크 요청 메트릭을 자동으로 수집합니다! 자동 페이지로드 추적에 대해 자세히 알아 보려면 문서 를 참조하세요 .
첫 번째 입력 지연 폴리 필 라이브러리 추가
첫 번째 입력 지연 은 사용자 상호 작용에 응답하는 브라우저가 사용자에게 앱의 응답성에 대한 첫인상을주기 때문에 유용합니다.
첫 번째 입력 지연은 사용자가 버튼이나 하이퍼 링크를 클릭하는 것과 같이 페이지의 요소와 처음 상호 작용할 때 시작됩니다. 브라우저가 입력에 응답 할 수있는 즉시 중지됩니다. 즉, 브라우저가 콘텐츠를로드하거나 구문 분석하는 데 바쁘지 않습니다.
이 polyfill 라이브러리는 성능 모니터링 통합을위한 선택 사항입니다.
public/index.html 파일을 열고 다음 행의 주석 처리를 제거하십시오.
index.html
<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>
이제 코드에서 Firebase Performance Monitoring과의 통합을 완료했습니다.
다음 단계에서는 Firebase Performance Monitoring을 사용하여 커스텀 trace를 추가하는 방법을 알아 봅니다. 자동 추적 만 수집하려면 "이미지 배포 및 보내기 시작"섹션으로 이동하십시오.
성능 모니터링을 사용하면 사용자 지정 추적 을 만들 수 있습니다. 사용자 지정 추적은 앱의 실행 블록 기간에 대한 보고서입니다. SDK에서 제공하는 API를 사용하여 사용자 지정 추적의 시작과 끝을 정의합니다.
-
public/scripts/main.js파일에서 성능 개체를 가져온 다음 이미지 메시지를 업로드하기위한 사용자 지정 추적을 만듭니다.
main.js
// TODO: Create a custom trace to monitor image upload.
const trace = firebase.performance().trace('saveImageMessage');
- 사용자 지정 추적을 기록하려면 추적의 시작 지점과 중지 지점을 지정해야합니다. 추적을 타이머라고 생각할 수 있습니다.
main.js
// TODO: Start the "timer" for the custom trace.
trace.start();
...
// TODO: Stop the "timer" for the custom trace.
trace.stop();
사용자 지정 추적을 성공적으로 정의했습니다! 코드를 배포 한 후 사용자가 이미지 메시지를 보내면 사용자 지정 추적 기간이 기록됩니다. 이렇게하면 실제 사용자가 채팅 앱에서 이미지를 보내는 데 걸리는 시간을 알 수 있습니다.
범위 내에서 발생하는 성능 관련 이벤트에 대한 사용자 지정 지표를 기록하도록 사용자 지정 추적 을 추가로 구성 할 수 있습니다. 예를 들어 지표를 사용하여 업로드 시간이 마지막 단계에서 정의한 사용자 지정 추적에 대한 이미지 크기의 영향을 받는지 조사 할 수 있습니다.
- 이전 단계에서 사용자 지정 추적을 찾습니다 (
public/scripts/main.js파일에 정의 됨). -
TODO아래에 다음 줄을 추가하여 업로드 된 이미지의 크기를 기록합니다.
main.js
...
// TODO: Record image size.
trace.putMetric('imageSize', file.size);
...
이 메트릭을 사용하면 성능 모니터링을 통해 사용자 지정 추적 기간과 업로드 된 이미지 크기를 기록 할 수 있습니다.
이전 단계를 기반으로 커스텀 trace 에서 커스텀 속성 을 수집 할 수도 있습니다. 맞춤 속성은 앱과 관련된 카테고리별로 데이터를 분류하는 데 도움이 될 수 있습니다. 예를 들어 이미지 파일의 MIME 유형을 수집하여 MIME 유형이 성능에 미치는 영향을 조사 할 수 있습니다.
-
public/scripts/main.js파일에 정의 된 사용자 지정 추적을 사용합니다. -
TODO아래에 다음 행을 추가하여 업로드 된 이미지의 MIME 유형을 기록하십시오.
main.js
...
// TODO: Record image MIME type.
trace.putAttribute('imageType', file.type);
...
이 속성을 사용하면 성능 모니터링이 업로드 된 이미지 유형에 따라 사용자 지정 추적 기간을 분류 할 수 있습니다.
Firebase Performance Monitoring SDK는 비동기식으로로드 할 수 있도록 설계되었으므로 페이지로드 중에 웹 앱의 성능에 부정적인 영향을주지 않습니다. SDK가로드되기 전에는 Firebase Performance Monitoring API를 사용할 수 없습니다. 이 시나리오에서 여전히 User Timing API를 사용하여 커스텀 trace를 추가 할 수 있습니다. Firebase 성능 SDK는 measure () 에서 기간을 선택하여 커스텀 trace로 기록합니다.
User Timing API를 사용하여 앱 스타일링 스크립트를로드하는 기간을 측정 할 것입니다.
-
public/index.html파일에서 다음 줄을 추가하여 앱 스타일 지정 스크립트로드의 시작을 표시합니다.
index.html
<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
- 다음 줄을 추가하여 앱 스타일 지정 스크립트로드의 끝을 표시하고 시작과 끝 사이의 기간을 측정합니다.
index.html
<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
performance && performance.mark('loadStylingEnd');
performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>
여기에서 생성 한 항목은 Firebase 성능 모니터링에서 자동으로 수집됩니다. 나중에 Firebase Performance 콘솔에서 loadStyling 이라는 커스텀 추적을 찾을 수 있습니다.
Firebase 호스팅에 배포
코드에 Firebase 성능 모니터링을 추가 한 후 다음 단계에 따라 코드를 Firebase 호스팅에 배포하세요.
- 명령 줄이 앱의 로컬
performance-monitoring-start디렉터리에 액세스하는지 확인합니다. - 다음 명령어를 실행하여 Firebase 프로젝트에 파일을 배포합니다.
firebase deploy
- 콘솔에 다음이 표시되어야합니다.
=== Deploying to 'friendlychat-1234'...
i deploying firestore, storage, hosting
i storage: checking storage.rules for compilation errors...
✔ storage: rules file storage.rules compiled successfully
i firestore: checking firestore.rules for compilation errors...
✔ firestore: rules file firestore.rules compiled successfully
i storage: uploading rules storage.rules...
i firestore: uploading rules firestore.rules...
i hosting[friendlychat-1234]: beginning deploy...
i hosting[friendlychat-1234]: found 8 files in ./public
✔ hosting[friendlychat-1234]: file upload complete
✔ storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔ firestore: released rules firestore.rules to cloud.firestore
i hosting[friendlychat-1234]: finalizing version...
✔ hosting[friendlychat-1234]: version finalized
i hosting[friendlychat-1234]: releasing new version...
✔ hosting[friendlychat-1234]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
- 두 개의 Firebase 하위 도메인 인
https://<projectId>.firebaseapp.com및https://<projectId>.web.app에서 Firebase 호스팅을 사용하여 이제 완전히 호스팅 된 웹 앱을 방문합니다.
성능 모니터링이 활성화되었는지 확인
Firebase 콘솔을 열고 성능 탭으로 이동합니다. 'SDK 감지 됨'이라는 환영 메시지가 표시되면 Firebase 성능 모니터링과 성공적으로 통합 된 것입니다.
이미지 메시지 보내기
채팅 앱에서 이미지를 보내 성능 데이터를 생성합니다.
- 채팅 앱에 로그인 한 후 이미지 업로드 버튼을 클릭합니다.
. - 파일 선택기를 사용하여 이미지 파일을 선택합니다.
- 사용자 지정 지표 및 사용자 지정 속성의 분포를 테스트 할 수 있도록 여러 이미지를 보내십시오 (몇 개의 샘플이
public/images/저장 됨).
새 메시지는 선택한 이미지와 함께 앱의 UI에 표시되어야합니다.
웹 앱을 배포하고 사용자로 이미지 메시지를 보낸 후 성능 모니터링 대시 보드 (Firebase 콘솔)에서 성능 데이터를 검토 할 수 있습니다.
대시 보드에 액세스
- Firebase 콘솔 에서
Friendly Chat앱이있는 프로젝트를 선택합니다. - 왼쪽 패널에서 품질 섹션을 찾은 다음 성능을 클릭합니다.
기기 데이터 검토
성능 모니터링에서 앱의 데이터를 처리하면 대시 보드 상단에 탭이 표시됩니다. 아직 데이터 나 탭이 표시되지 않으면 나중에 다시 확인하세요.
- 장치 탭을 클릭합니다.
- 페이지로드 테이블에는 페이지가로드되는 동안 성능 모니터링이 자동으로 수집하는 다양한 성능 메트릭이 표시됩니다.
- 기간 표에는 앱 코드에 정의한 모든 사용자 지정 추적이 표시됩니다.
- 기간 테이블에서 saveImageMessage 를 클릭하여 추적에 대한 특정 메트릭을 검토하십시오.
- 집계 를 클릭하여 이미지 크기 분포를 검토합니다. 이 사용자 지정 추적의 이미지 크기를 측정하기 위해 추가 한 메트릭을 볼 수 있습니다.
- 이전 단계에서 집계 옆에있는 시간 경과 를 클릭합니다. 사용자 지정 추적 기간 도 볼 수 있습니다. 수집 된 데이터를 더 자세히 검토하려면 자세히보기를 클릭합니다.
- 열리는 페이지에서 imageType 을 클릭하여 이미지 MIME 유형별로 기간 데이터를 분할 할 수 있습니다. 이 특정 데이터는 사용자 지정 추적에 추가 한 imageType 속성으로 인해 기록되었습니다.
네트워크 데이터 검토
HTTP / S 네트워크 요청 은 네트워크 호출의 응답 시간 및 페이로드 크기를 캡처하는 보고서입니다.
- 성능 모니터링 대시 보드의 기본 화면으로 돌아갑니다.
- 웹앱에 대한 네트워크 요청 항목 목록을 보려면 네트워크 탭을 클릭합니다.
- 느린 요청을 찾아보고 앱 성능을 개선하기위한 수정 작업을 시작하십시오!
성능 모니터링을 위해 Firebase SDK를 활성화하고 자동 트레이스 및 커스텀 트레이스를 수집하여 채팅 앱의 실제 성능을 측정했습니다.
우리가 다룬 내용 :
- 웹 앱에 Firebase Performance Monitoring SDK를 추가합니다.
- 코드에 사용자 지정 추적을 추가합니다.
- 커스텀 추적에 연결된 커스텀 측정 항목을 기록합니다.
- 맞춤 속성을 사용하여 실적 데이터를 세분화합니다.
- 성능 모니터링 대시 보드를 사용하여 앱 성능에 대한 통찰력을 얻는 방법을 이해합니다.