Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기
이 페이지는 Cloud Translation API를 통해 번역되었습니다.
Switch to English

웹용 Firebase 성능 모니터링

이 Codelab에서는 Firebase Performance Monitoring을 사용하여 채팅 웹 앱의 성능을 측정하는 방법을 알아 봅니다. 라이브 데모를 보려면 https://fireperf-friendlychat.web.app/ 을 방문 하세요 .

3b1284f5144b54f6.png

배울 것

  • 기본 측정 항목 (페이지로드 및 네트워크 요청)을 얻기 위해 웹 앱에 Firebase 성능 모니터링을 추가하는 방법입니다.
  • 커스텀 트레이스로 특정 코드를 측정하는 방법.
  • 사용자 지정 추적에 연결된 추가 사용자 지정 지표를 기록하는 방법.
  • 맞춤 속성을 사용하여 실적 데이터를 더 세분화하는 방법.
  • 성능 모니터링 대시 보드를 사용하여 웹 앱의 성능을 이해하는 방법.

필요한 것

  • WebStorm , Atom , Sublime 또는 VS Code 와 같은 선택한 IDE 또는 텍스트 편집기
  • 터미널 / 콘솔
  • Chrome과 같은 원하는 브라우저
  • 코드 랩의 샘플 코드 (코드를 얻는 방법은이 코드 랩의 다음 섹션을 참조하세요.)

명령 줄에서 Codelab의 GitHub 저장소 를 복제합니다.

git clone https://github.com/firebase/codelab-friendlychat-web

또는 git을 설치하지 않은 경우 저장소를 zip 파일로 다운로드 할 수 있습니다.

시작 앱 가져 오기

IDE를 사용하여 복제 된 저장소에서 📁 performance-monitoring-start 디렉터리를 열거 나 가져옵니다. 이 📁 performance-monitoring-start 디렉토리에는 채팅 웹 앱인 codelab의 시작 코드가 포함되어 있습니다.

Firebase 프로젝트 만들기

  1. Firebase 콘솔 에서 프로젝트 추가를 클릭합니다.
  2. Firebase 프로젝트 이름을 FriendlyChat 지정합니다.

Firebase 프로젝트의 프로젝트 ID를 기억하세요.

  1. 프로젝트 만들기를 클릭합니다.

프로젝트에 Firebase 웹 앱 추가

  1. 웹 아이콘 클릭 58d6543a156e56f9.png 새 Firebase 웹 앱을 만듭니다.
  2. 닉네임 Friendly Chat 앱을 등록한 다음 이 앱에 대한 Firebase 호스팅도 설정 옆의 확인란을 선택합니다.
  3. 앱 등록을 클릭 합니다 .
  4. 나머지 단계를 클릭하십시오. 이제 화면의 지시를 따를 필요가 없습니다. 이는이 코드 랩의 이후 단계에서 다룰 것입니다.

ea9ab0db531a104c.png

Firebase 인증에 Google 로그인 사용

사용자가 Google 계정으로 채팅 앱에 로그인 할 수 있도록 Google 로그인 방법을 사용합니다.

Google 로그인을 활성화해야합니다.

  1. Firebase 콘솔에서 왼쪽 패널의 개발 섹션을 찾습니다.
  2. 인증 을 클릭 한 다음 로그인 방법 탭을 클릭합니다 ( 콘솔로 이동 ).
  3. Google 로그인 공급자를 활성화 한 다음 저장 을 클릭합니다.

d89fb3873b5d36ae.png

Cloud Firestore 사용

웹 앱은 Cloud Firestore 를 사용하여 채팅 메시지를 저장하고 새 채팅 메시지를받습니다.

Cloud Firestore를 사용 설정해야합니다.

  1. Firebase 콘솔의 개발 섹션에서 데이터베이스를 클릭합니다.
  2. Cloud Firestore 창에서 데이터베이스 만들기를 클릭 합니다 .
  3. 테스트 모드 에서 시작 옵션을 선택한 다음 보안 규칙에 대한 고지 사항을 읽은 후 활성화 를 클릭합니다.

이 Codelab의 시작 코드에는 더 안전한 규칙이 포함되어 있습니다. 나중에 코드 랩에서 배포 할 것입니다.

24bd1a097492eac6.png

클라우드 스토리지 활성화

웹 앱은 Firebase 용 Cloud Storage를 사용하여 사진을 저장, 업로드, 공유합니다.

Cloud Storage를 사용 설정해야합니다.

  1. Firebase 콘솔의 개발 섹션에서 저장소를 클릭합니다.
  2. 시작하기를 클릭합니다.
  3. Firebase 프로젝트의 보안 규칙에 대한 면책 ​​조항을 읽고 확인을 클릭 합니다 .

시작 코드에는 코드 랩에서 나중에 배포 할 기본 보안 규칙이 포함되어 있습니다.

Firebase 명령 줄 인터페이스 (CLI)를 사용하면 Firebase 호스팅을 사용하여 웹 앱을 로컬에서 제공하고 웹 앱을 Firebase 프로젝트에 배포 할 수 있습니다.

  1. Firebase 문서의 다음 안내 에 따라 CLI를 설치합니다.
  2. 터미널에서 다음 명령을 실행하여 CLI가 올바르게 설치되었는지 확인하십시오.
firebase --version

Firebase CLI의 버전이 v8.0.0 이상인지 확인합니다.

  1. 다음 명령어를 실행하여 Firebase CLI를 승인합니다.
firebase login

앱의 로컬 디렉터리 (코드 랩에서 이전에 복제 한 저장소)에서 Firebase 호스팅에 대한 앱 구성을 가져 오도록 웹 앱 템플릿을 설정했습니다. 하지만 구성을 가져 오려면 앱을 Firebase 프로젝트와 연결해야합니다.

  1. 명령 줄이 앱의 로컬 performance-monitoring-start 디렉터리에 액세스하는지 확인합니다.
  2. 다음 명령어를 실행하여 앱을 Firebase 프로젝트와 연결합니다.
firebase use --add
  1. 메시지가 표시되면 프로젝트 ID를 선택한 다음 Firebase 프로젝트에 별칭을 지정합니다.

별칭은 여러 환경 (프로덕션, 스테이징 등)이있는 경우 유용합니다. 그러나이 코드 랩에서는 default 별칭을 사용하겠습니다.

  1. 명령 줄의 나머지 지침을 따릅니다.

웹용 Firebase Performance Monitoring SDK와 통합하는 방법에는 여러 가지가 있습니다 (자세한 내용은 문서 참조). 이 코드 랩에서는 호스팅 URL 에서 성능 모니터링을 활성화 합니다 .

성능 모니터링 추가 및 Firebase 초기화

  1. 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>
  1. 또한 Firebase 프로젝트 및 사용할 웹 앱에 대한 정보가 포함 된 구성 개체로 Firebase SDK를 초기화해야합니다. Firebase 호스팅을 사용하고 있으므로이 구성을 수행하는 특수 스크립트를 가져올 수 있습니다. 이 코드 랩의 경우 public/index.html 파일 하단에 이미 다음 줄을 추가했지만 파일이 있는지 다시 확인하세요.

index.html

<script src="/__/firebase/init.js"></script>
  1. 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를 사용하여 사용자 지정 추적의 시작과 끝을 정의합니다.

  1. public/scripts/main.js 파일에서 성능 개체를 가져온 다음 이미지 메시지를 업로드하기위한 사용자 지정 추적을 만듭니다.

main.js

// TODO: Create a custom trace to monitor image upload.
const trace = firebase.performance().trace('saveImageMessage');
  1. 사용자 지정 추적을 기록하려면 추적의 시작 지점과 중지 지점을 지정해야합니다. 추적을 타이머라고 생각할 수 있습니다.

main.js

// TODO: Start the "timer" for the custom trace.
trace.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    trace.stop();

사용자 지정 추적을 성공적으로 정의했습니다! 코드를 배포 한 후 사용자가 이미지 메시지를 보내면 사용자 지정 추적 기간이 기록됩니다. 이렇게하면 실제 사용자가 채팅 앱에서 이미지를 보내는 데 걸리는 시간을 알 수 있습니다.

범위 내에서 발생하는 성능 관련 이벤트에 대한 사용자 지정 지표를 기록하도록 사용자 지정 추적 을 추가로 구성 할 수 있습니다. 예를 들어 지표를 사용하여 업로드 시간이 마지막 단계에서 정의한 사용자 지정 추적에 대한 이미지 크기의 영향을 받는지 조사 할 수 있습니다.

  1. 이전 단계에서 사용자 지정 추적을 찾습니다 ( public/scripts/main.js 파일에 정의 됨).
  2. TODO 아래에 다음 줄을 추가하여 업로드 된 이미지의 크기를 기록합니다.

main.js

 ...

// TODO: Record image size.
trace.putMetric('imageSize', file.size);

 ...

이 메트릭을 사용하면 성능 모니터링을 통해 사용자 지정 추적 기간과 업로드 된 이미지 크기를 기록 할 수 있습니다.

이전 단계를 기반으로 커스텀 trace 에서 커스텀 속성 을 수집 할 수도 있습니다. 맞춤 속성은 앱과 관련된 카테고리별로 데이터를 분류하는 데 도움이 될 수 있습니다. 예를 들어 이미지 파일의 MIME 유형을 수집하여 MIME 유형이 성능에 미치는 영향을 조사 할 수 있습니다.

  1. public/scripts/main.js 파일에 정의 된 사용자 지정 추적을 사용합니다.
  2. 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를 사용하여 앱 스타일링 스크립트를로드하는 기간을 측정 할 것입니다.

  1. 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>
  1. 다음 줄을 추가하여 앱 스타일 지정 스크립트로드의 끝을 표시하고 시작과 끝 사이의 기간을 측정합니다.

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 호스팅에 배포하세요.

  1. 명령 줄이 앱의 로컬 performance-monitoring-start 디렉터리에 액세스하는지 확인합니다.
  2. 다음 명령어를 실행하여 Firebase 프로젝트에 파일을 배포합니다.
firebase deploy
  1. 콘솔에 다음이 표시되어야합니다.
=== 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
  1. 두 개의 Firebase 하위 도메인 인 https://<projectId>.firebaseapp.comhttps://<projectId>.web.app 에서 Firebase 호스팅을 사용하여 이제 완전히 호스팅 된 웹 앱을 방문합니다.

성능 모니터링이 활성화되었는지 확인

Firebase 콘솔을 열고 성능 탭으로 이동합니다. 'SDK 감지 됨'이라는 환영 메시지가 표시되면 Firebase 성능 모니터링과 성공적으로 통합 된 것입니다.

ac917a089e9c89d1.png

이미지 메시지 보내기

채팅 앱에서 이미지를 보내 성능 데이터를 생성합니다.

  1. 채팅 앱에 로그인 한 후 이미지 업로드 버튼을 클릭합니다. 13734cb66773e5a3.png .
  2. 파일 선택기를 사용하여 이미지 파일을 선택합니다.
  3. 사용자 지정 지표 및 사용자 지정 속성의 분포를 테스트 할 수 있도록 여러 이미지를 보내십시오 (몇 개의 샘플이 public/images/ 저장 됨).

새 메시지는 선택한 이미지와 함께 앱의 UI에 표시되어야합니다.

웹 앱을 배포하고 사용자로 이미지 메시지를 보낸 후 성능 모니터링 대시 보드 (Firebase 콘솔)에서 성능 데이터를 검토 할 수 있습니다.

대시 보드에 액세스

  1. Firebase 콘솔 에서 Friendly Chat 앱이있는 프로젝트를 선택합니다.
  2. 왼쪽 패널에서 품질 섹션을 찾은 다음 성능을 클릭합니다.

기기 데이터 검토

성능 모니터링에서 앱의 데이터를 처리하면 대시 보드 상단에 탭이 표시됩니다. 아직 데이터 나 탭이 표시되지 않으면 나중에 다시 확인하세요.

  1. 장치 탭을 클릭합니다.
  • 페이지로드 테이블에는 페이지가로드되는 동안 성능 모니터링이 자동으로 수집하는 다양한 성능 메트릭이 표시됩니다.
  • 기간 표에는 앱 코드에 정의한 모든 사용자 지정 추적이 표시됩니다.
  1. 기간 테이블에서 saveImageMessage 를 클릭하여 추적에 대한 특정 메트릭을 검토하십시오.

e28758fd02d9ffac.png

  1. 집계 를 클릭하여 이미지 크기 분포를 검토합니다. 이 사용자 지정 추적의 이미지 크기를 측정하기 위해 추가 한 메트릭을 볼 수 있습니다.

c3cbcfc0c739a0a8.png

  1. 이전 단계에서 집계 옆에있는 시간 경과 를 클릭합니다. 사용자 지정 추적 기간 도 볼 수 있습니다. 수집 된 데이터를 더 자세히 검토하려면 자세히보기를 클릭합니다.

16983baa31e05732.png

  1. 열리는 페이지에서 imageType 을 클릭하여 이미지 MIME 유형별로 기간 데이터를 분할 할 수 있습니다. 이 특정 데이터는 사용자 지정 추적에 추가 한 imageType 속성으로 인해 기록되었습니다.

8e5c9f32f42a1ca1.png

네트워크 데이터 검토

HTTP / S 네트워크 요청 은 네트워크 호출의 응답 시간 및 페이로드 크기를 캡처하는 보고서입니다.

  1. 성능 모니터링 대시 보드의 기본 화면으로 돌아갑니다.
  2. 웹앱에 대한 네트워크 요청 항목 목록을 보려면 네트워크 탭을 클릭합니다.
  3. 느린 요청을 찾아보고 앱 성능을 개선하기위한 수정 작업을 시작하십시오!

1ab598284eea6581.png

성능 모니터링을 위해 Firebase SDK를 활성화하고 자동 트레이스 및 커스텀 트레이스를 수집하여 채팅 앱의 실제 성능을 측정했습니다.

우리가 다룬 내용 :

  • 웹 앱에 Firebase Performance Monitoring SDK를 추가합니다.
  • 코드에 사용자 지정 추적을 추가합니다.
  • 커스텀 추적에 연결된 커스텀 측정 항목을 기록합니다.
  • 맞춤 속성을 사용하여 실적 데이터를 세분화합니다.
  • 성능 모니터링 대시 보드를 사용하여 앱 성능에 대한 통찰력을 얻는 방법을 이해합니다.

더 알아보기: