웹용 Firebase 성능 모니터링

1. 개요

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

배울 내용

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

필요한 것

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

2. 샘플 코드 받기

명령줄에서 Codelab의 GitHub 리포지토리 를 복제합니다.

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

또는 git이 설치되어 있지 않은 경우 repo를 zip 파일로 다운로드 할 수 있습니다.

시작 앱 가져오기

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

3. Firebase 프로젝트 생성 및 설정

Firebase 프로젝트 만들기

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

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

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

프로젝트에 Firebase 웹 앱 추가

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

Firebase 인증을 위한 Google 로그인 활성화

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

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

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

Cloud Firestore 사용

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

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

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

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

클라우드 스토리지 활성화

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

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

1. Firebase 콘솔의 개발 섹션에서 스토리지 를 클릭합니다.
2. 시작하기 를 클릭합니다.
3. Firebase 프로젝트의 보안 규칙에 대한 면책조항을 읽은 다음 확인 을 클릭 합니다 .

시작 코드에는 나중에 Codelab에서 배포할 기본 보안 규칙이 포함됩니다.

4. Firebase 명령줄 인터페이스 설치

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

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

firebase --version

Firebase CLI 버전이 v8.0.0 이상인지 확인하세요.

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

firebase login

앱의 로컬 디렉토리(이전에 Codelab에서 복제한 리포지토리)에서 Firebase 호스팅에 대한 앱 구성을 가져오도록 웹 앱 템플릿을 설정했습니다. 그러나 구성을 가져오려면 앱을 Firebase 프로젝트와 연결해야 합니다.

4. 명령줄이 앱의 로컬 performance-monitoring-start 디렉터리에 액세스하는지 확인합니다.
5. 다음 명령어를 실행하여 앱을 Firebase 프로젝트와 연결합니다.

firebase use --add

6. 메시지가 표시되면 프로젝트 ID를 선택한 다음 Firebase 프로젝트에 별칭을 지정합니다.

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

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

5. Firebase 성능 모니터링과 통합

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

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

1. src/index.js 파일을 열고 TODO 아래에 다음 줄을 추가하여 Firebase Performance Monitoring SDK를 포함합니다.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. 또한 Firebase 프로젝트 및 사용하려는 웹 앱에 대한 정보가 포함된 구성 객체로 Firebase SDK를 초기화해야 합니다. Firebase 호스팅을 사용하고 있으므로 이 구성을 수행할 특수 스크립트를 가져올 수 있습니다. 이 코드랩의 경우 public/index.html 파일 맨 아래에 이미 다음 행을 추가했지만 해당 행이 있는지 다시 확인하십시오.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. src/index.js 파일에서 TODO 아래에 다음 줄을 추가하여 성능 모니터링을 초기화합니다.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

성능 모니터링은 이제 사용자가 사이트를 사용할 때 페이지 로드 및 네트워크 요청 메트릭을 자동으로 수집합니다! 자동 페이지 로드 추적에 대한 자세한 내용 은 설명서 를 참조하세요.

첫 번째 입력 지연 폴리필 라이브러리 추가

첫 번째 입력 지연 은 사용자 상호작용에 응답하는 브라우저가 사용자에게 앱의 응답성에 대한 첫인상을 주기 때문에 유용합니다.

첫 번째 입력 지연은 사용자가 버튼이나 하이퍼링크를 클릭하는 것과 같이 페이지의 요소와 처음 상호작용할 때 시작됩니다. 브라우저가 입력에 응답할 수 있는 즉시 중지됩니다. 즉, 브라우저가 콘텐츠를 로드하거나 구문 분석하는 데 바쁘지 않습니다.

이 폴리필 라이브러리는 성능 모니터링 통합을 위해 선택 사항입니다.

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를 추가하는 방법을 알아봅니다. 자동 추적만 수집하려는 경우 "배포 및 이미지 전송 시작" 섹션으로 이동하십시오.

6. 앱에 사용자 지정 추적 추가

성능 모니터링을 사용하면 사용자 지정 추적 을 만들 수 있습니다. 사용자 지정 추적은 앱의 실행 블록 기간에 대한 보고서입니다. SDK에서 제공하는 API를 사용하여 사용자 지정 추적의 시작과 끝을 정의합니다.

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

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. 사용자 정의 추적을 기록하려면 추적의 시작점과 중지점을 지정해야 합니다. 추적을 타이머로 생각할 수 있습니다.

index.js

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

 ...

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

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

7. 앱에 맞춤 측정항목을 추가합니다.

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

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

index.js

 ...

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

 ...

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

8. 앱에 사용자 정의 속성 추가

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

1. src/index.js 파일에 정의된 사용자 정의 추적을 사용하십시오.
2. TODO 아래에 다음 줄을 추가하여 업로드된 이미지의 MIME 유형을 기록합니다.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

이 속성을 사용하면 성능 모니터링을 통해 업로드된 이미지 유형을 기반으로 사용자 지정 추적 기간을 분류할 수 있습니다.

9. [확장] User Timing API로 커스텀 트레이스 추가

Firebase Performance Monitoring SDK는 비동기식으로 로드할 수 있도록 설계되었으며 페이지 로드 중에 웹 앱의 성능에 부정적인 영향을 미치지 않습니다. SDK가 로드되기 전에는 Firebase Performance Monitoring API를 사용할 수 없습니다. 이 시나리오에서는 여전히 User Timing API 를 사용하여 사용자 지정 추적을 추가할 수 있습니다. Firebase 성능 SDK는 measure() 에서 기간을 선택하고 이를 맞춤 추적으로 기록합니다.

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>

2. 다음 줄을 추가하여 앱 스타일 지정 스크립트 로드의 끝을 표시하고 시작과 끝 사이의 기간을 측정합니다.

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 Performance Monitoring에서 자동으로 수집됩니다. 나중에 Firebase 성능 콘솔에서 loadStyling 이라는 맞춤 추적을 찾을 수 있습니다.

10. 이미지 배포 및 전송 시작

Firebase 호스팅에 배포

코드에 Firebase Performance Monitoring을 추가한 후 다음 단계에 따라 코드를 Firebase 호스팅에 배포하세요.

1. 명령줄이 앱의 로컬 performance-monitoring-start 디렉터리에 액세스하는지 확인합니다.
2. 다음 명령어를 실행하여 Firebase 프로젝트에 파일을 배포합니다.

firebase deploy

3. 콘솔에 다음이 표시되어야 합니다.

=== 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

4. 이제 Firebase 호스팅을 사용하여 완전히 호스팅된 웹 앱을 자체 Firebase 하위 도메인인 https://<projectId>.firebaseapp.com 및 https://<projectId>.web.app 에서 방문하세요.

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

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

이미지 메시지 보내기

채팅 앱에서 이미지를 전송하여 성능 데이터를 생성합니다.

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

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

11. 대시보드 모니터링

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

대시보드에 액세스

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

기기 데이터 검토

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

1. 기기 탭을 클릭합니다.

• 페이지 로드 테이블은 페이지가 로드되는 동안 성능 모니터링이 자동으로 수집하는 다양한 성능 메트릭을 보여줍니다.
• Durations 테이블에는 앱 코드에 정의한 모든 사용자 지정 trace가 표시됩니다.

2. 추적에 대한 특정 메트릭을 검토하려면 기간 테이블에서 saveImageMessage 를 클릭하십시오.

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

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

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

네트워크 데이터 검토

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

1. 성능 모니터링 대시보드의 메인 화면으로 돌아갑니다.
2. 네트워크 탭을 클릭하여 웹 앱에 대한 네트워크 요청 항목 목록을 확인합니다.
3. 이를 탐색하여 느린 요청을 식별하고 앱 성능을 개선하기 위한 수정 작업을 시작하세요!

12. 축하합니다!

성능 모니터링을 위해 Firebase SDK를 활성화하고 채팅 앱의 실제 성능을 측정하기 위해 자동 추적 및 맞춤 추적을 수집했습니다.

우리가 다룬 내용:

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

더 알아보기:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/