Firebase Summit에서 발표된 모든 내용을 살펴보고 Firebase로 앱을 빠르게 개발하고 안심하고 앱을 실행하는 방법을 알아보세요. 자세히 알아보기

앱 연결 및 프로토타이핑 시작

Firebase 로컬 에뮬레이터 도구 모음을 시작하기 전에 Firebase 프로젝트를 만들고 개발 환경을 설정했으며 플랫폼용 Firebase 시작하기 주제: Apple , Android 에 따라 플랫폼용 Firebase SDK를 선택 및 설치했는지 확인하세요. 또는 .

프로토타입 및 테스트

로컬 에뮬레이터 도구 모음에는 Firebase 로컬 에뮬레이터 도구 모음 소개에 설명된 대로 여러 제품 에뮬레이터가 포함되어 있습니다. 프로덕션에서 사용 중인 Firebase 제품에 따라 적절하다고 판단되는 경우 개별 에뮬레이터와 에뮬레이터 조합으로 프로토타입을 만들고 테스트할 수 있습니다.

Firebase 데이터베이스와 함수 에뮬레이터 간의 상호작용
전체 로컬 에뮬레이터 제품군 의 일부인 데이터베이스 및 Cloud Functions 에뮬레이터.

이 항목에서는 로컬 에뮬레이터 도구 모음 워크플로를 소개하기 위해 일반적인 제품 조합(Firebase 데이터베이스 및 해당 데이터베이스 작업에 의해 트리거되는 클라우드 함수)을 사용하는 앱에서 작업하고 있다고 가정해 보겠습니다.

Firebase 프로젝트를 로컬에서 초기화한 후 로컬 에뮬레이터 도구 모음을 사용하는 개발 주기에는 일반적으로 세 단계가 있습니다.

  1. 에뮬레이터 및 Emulator Suite UI와 대화형으로 기능을 프로토타입합니다.

  2. 데이터베이스 에뮬레이터 또는 Cloud Functions 에뮬레이터를 사용하는 경우 일회성 단계를 수행하여 앱을 에뮬레이터에 연결합니다.

  3. 에뮬레이터 및 사용자 정의 스크립트로 테스트를 자동화하십시오.

Firebase 프로젝트를 로컬에서 초기화

CLI를 설치 하거나 최신 버전으로 업데이트해야 합니다 .

curl -sL firebase.tools | bash

아직 수행하지 않은 경우 현재 작업 디렉터리를 Firebase 프로젝트로 초기화하고 화면에 표시되는 메시지에 따라 Cloud FunctionsCloud Firestore 또는 실시간 데이터베이스 를 사용 중임을 지정합니다.

firebase init

이제 프로젝트 디렉터리에 Firebase 구성 파일, 데이터베이스용 Firebase 보안 규칙 정의 파일, 클라우드 함수 코드가 포함된 functions 디렉터리 및 기타 지원 파일이 포함됩니다.

대화식 프로토타입

Local Emulator Suite는 새로운 기능의 프로토타입을 빠르게 만들 수 있도록 설계되었으며 Suite의 내장 사용자 인터페이스는 가장 유용한 프로토타이핑 도구 중 하나입니다. Firebase 콘솔을 로컬에서 실행하는 것과 비슷합니다.

Emulator Suite UI를 사용하여 데이터베이스 설계를 반복하고, 클라우드 기능과 관련된 다양한 데이터 흐름을 시도하고, 보안 규칙 변경 사항을 평가하고, 로그를 확인하여 백엔드 서비스가 어떻게 수행되고 있는지 확인하는 등의 작업을 수행할 수 있습니다. 그런 다음 다시 시작하려면 데이터베이스를 지우고 새로운 디자인 아이디어로 새로 시작하십시오.

다음을 사용하여 로컬 에뮬레이터 도구 모음을 시작할 때 모두 사용할 수 있습니다.

firebase emulators:start

가상 앱의 프로토타입을 만들기 위해 기본 클라우드 기능을 설정 및 테스트하여 데이터베이스의 텍스트 항목을 수정하고 Emulator Suite UI에서 해당 데이터베이스를 생성하고 채워 트리거합니다.

  1. 프로젝트 디렉터리의 functions/index.js 파일을 편집하여 데이터베이스 쓰기로 트리거되는 클라우드 함수를 만듭니다. 기존 파일의 내용을 다음 스니펫으로 바꿉니다. 이 함수는 messages 계층 구조의 노드에 대한 변경 사항을 수신하고 노드의 original 속성 내용을 대문자로 변환하고 해당 노드의 uppercase 속성에 결과를 저장합니다.
  2.   const functions = require('firebase-functions');
    
      exports.makeUppercase = functions.database.ref('/messages/{pushId}/original')
          .onCreate((snapshot, context) => {
            const original = snapshot.val();
            console.log('Uppercasing', context.params.pushId, original);
            const uppercase = original.toUpperCase();
            return snapshot.ref.parent.child('uppercase').set(uppercase);
          });
      
  3. firebase emulators:start 를 사용하여 로컬 에뮬레이터 도구 모음을 시작합니다. Cloud Functions 및 데이터베이스 에뮬레이터가 시작되고 자동으로 상호 운용되도록 구성됩니다.
  4. http://localhost:4000 에서 브라우저의 UI를 보십시오. 포트 4000은 UI의 기본값이지만 Firebase CLI에서 출력되는 터미널 메시지를 확인하십시오. 사용 가능한 에뮬레이터의 상태를 확인합니다. 이 경우 Cloud Functions 및 실시간 데이터베이스 에뮬레이터가 실행됩니다.
    내 이미지
  5. UI의 실시간 데이터베이스 탭에서 데이터베이스 콘텐츠 편집기 컨트롤을 사용하여 message1 노드를 포함하는 messages 노드가 있는 노드 세트를 생성합니다. 차례로 키가 original 로 설정되고 값이 test 로 설정된 노드가 포함됩니다. 그러면 클라우드 기능이 트리거됩니다. 값이 TEST 인 새 uppercase 속성이 곧 나타나는지 확인합니다.
    내 이미지내 이미지
  6. 로그 탭을 확인하여 함수가 데이터베이스를 업데이트할 때 오류를 실행하지 않았는지 확인하십시오.

인앱 데이터베이스 액세스 코드를 건드리거나 테스트 스위트를 재컴파일 및 재실행하지 않고도 원하는 데이터 흐름을 얻을 때까지 클라우드 함수 코드와 대화형 데이터베이스 편집 사이를 쉽게 반복할 수 있습니다.

앱을 에뮬레이터에 연결

대화형 프로토타이핑을 잘 진행하고 디자인을 결정했다면 적절한 SDK를 사용하여 앱에 데이터베이스 액세스 코드를 추가할 준비가 된 것입니다. 데이터베이스 탭을 계속 사용하고 기능의 경우 Emulator Suite UI의 로그 탭을 사용하여 앱의 동작이 올바른지 확인합니다.

Local Emulator Suite는 로컬 개발 도구임을 기억하십시오. 프로덕션 데이터베이스에 대한 쓰기는 로컬에서 프로토타이핑 중인 기능을 트리거하지 않습니다.

앱에서 데이터베이스에 쓰기 작업을 수행하도록 전환하려면 테스트 클래스 또는 인앱 구성이 실시간 데이터베이스 에뮬레이터를 가리키도록 해야 합니다.

Kotlin+KTX
// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
val database = Firebase.database
database.useEmulator("10.0.2.2", 9000)
Java
// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
FirebaseDatabase database = FirebaseDatabase.getInstance();
database.useEmulator("10.0.2.2", 9000);
빠른
    // In almost all cases the ns (namespace) is your project ID.
let db = Database.database(url:"http://localhost:9000?ns=YOUR_DATABASE_NAMESPACE")

Web version 9

import { getDatabase, connectDatabaseEmulator } from "firebase/database";

const db = getDatabase();
if (location.hostname === "localhost") {
  // Point to the RTDB emulator running on localhost.
  connectDatabaseEmulator(db, "localhost", 9000);
} 

Web version 8

var db = firebase.database();
if (location.hostname === "localhost") {
  // Point to the RTDB emulator running on localhost.
  db.useEmulator("localhost", 9000);
} 

사용자 지정 스크립트로 테스트 자동화

이제 마지막 전체 워크플로우 단계입니다. 인앱 기능의 프로토타입을 만들고 모든 플랫폼에서 유망해 보이면 최종 구현 및 테스트로 전환할 수 있습니다. 단위 테스트 및 CI 워크플로의 경우 exec 명령을 사용하여 단일 호출로 에뮬레이터를 시작하고, 스크립트 테스트를 실행하고, 에뮬레이터를 종료할 수 있습니다.

firebase emulators:exec "./testdir/test.sh"

개별 에뮬레이터에 대해 더 자세히 알아보기

이제 기본 클라이언트 측 워크플로가 어떤 것인지 확인했으므로 서버 측 앱 개발에 사용하는 방법을 포함하여 도구 모음의 개별 에뮬레이터에 대한 세부 정보를 계속 사용할 수 있습니다.

다음은?

위에 링크된 특정 에뮬레이터와 관련된 항목을 읽어보십시오. 그 다음에: