Firebase 원격 구성 시작하기


Firebase Remote Config으로 클라우드에서 앱의 파라미터를 정의하고 값을 업데이트하면 앱 업데이트를 배포하지 않고도 앱의 모양과 동작을 수정할 수 있습니다. 이 가이드에서는 시작하는 단계를 안내하고 샘플 코드를 제공합니다. 모든 샘플 코드는 firebase/quickstart-js GitHub 저장소에서 클론하거나 다운로드할 수 있습니다.

1단계: Remote Config SDK 추가 및 초기화

  1. 아직 진행하지 않았다면 Firebase JS SDK를 설치하고 Firebase를 초기화합니다.

  2. Remote Config JS SDK를 추가하고 Remote Config을 초기화합니다.

Web 

import { initializeApp } from "firebase/app";
import { getRemoteConfig } from "firebase/remote-config";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Remote Config and get a reference to the service
const remoteConfig = getRemoteConfig(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/remote-config";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Remote Config and get a reference to the service
const remoteConfig = firebase.remoteConfig();

이 객체를 사용하여 인앱 파라미터 기본값을 저장하고, 업데이트된 파라미터 값을 Remote Config 백엔드에서 가져오고, 가져온 값을 앱에 적용할 시점을 제어합니다.

2단계: 가져오기 간격 최솟값 설정

개발 중에는 가져오기 간격 최솟값을 상대적으로 낮게 설정하는 것이 좋습니다. 자세한 내용은 제한을 참조하세요.

Web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
rc_set_minimum_fetch_time.js

Web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
index.js

3단계: 인앱 매개변수 기본값 설정

Remote Config 객체에서 인앱 파라미터 기본값을 설정하면 Remote Config 백엔드에 연결되기 전까지는 앱이 의도한 대로 작동하고, 백엔드에 값이 설정되어 있지 않으면 기본값을 사용할 수 있습니다.

Web

remoteConfig.defaultConfig = {
  "welcome_message": "Welcome"
};
rc_set_default_values.js

Web

remoteConfig.defaultConfig = {
  "welcome_message": "Welcome"
};
index.js

Remote Config 백엔드 파라미터 값을 이미 구성한 경우 모든 기본값을 포함하는 생성된 JSON 파일을 다운로드하여 앱 번들에 포함할 수 있습니다.

REST

curl --compressed -D headers -H "Authorization: Bearer token" -X GET https://firebaseremoteconfig.googleapis.com/v1/projects/my-project-id/remoteConfig:downloadDefaults?format=JSON -o remote_config_defaults.json

Firebase 콘솔

  1. 매개변수 탭에서 메뉴를 열고 기본값 다운로드를 선택합니다.
  2. 메시지가 표시되면 웹의 경우 .json을 사용 설정한 후 파일 다운로드를 클릭합니다.

다음 예는 앱에서 기본값을 가져오고 설정할 수 있는 두 가지 방법을 보여줍니다. 첫 번째 예에서는 fetch를 사용하여 App Bundle에 포함된 기본 파일에 HTTP 요청을 수행합니다.


  const rcDefaultsFile = await fetch('remote_config_defaults.json');
  const rcDefaultsJson = await rcDefaultsFile.json();
  remoteConfig.defaultConfig = rcDefaultsJson;

다음 예에서는 빌드 시 값을 앱에 값을 컴파일하는 require를 사용합니다.

  let rcDefaults = require('./remote_config_defaults.json');
  remoteConfig.defaultConfig = rcDefaults;

4단계: 앱에서 사용할 매개변수 값 가져오기

이제 Remote Config 객체에서 파라미터 값을 가져올 수 있습니다. 나중에 백엔드에 값을 설정한 후 값을 가져와서 활성화하면 이 값이 앱에 적용됩니다. 이 값을 가져오려면 파라미터 키를 인수로 제공하여 getValue() 메서드를 호출합니다.

Web

import { getValue } from "firebase/remote-config";

const val = getValue(remoteConfig, "welcome_messsage");
rc_get_values.js

Web

const val = remoteConfig.getValue("welcome_messsage");
index.js

5단계: 매개변수 값 설정

Firebase Console 또는 Remote Config 백엔드 API를 사용하여 원하는 조건부 로직 또는 사용자 타겟팅에 따라 인앱 값을 재정의하는 새 서버 측 기본값을 만들 수 있습니다. 이 섹션에서는 Firebase Console에서 이러한 값을 만드는 단계를 설명합니다.

  1. Firebase Console에서 프로젝트를 엽니다.
  2. 메뉴에서 Remote Config을 선택하여 Remote Config 대시보드를 표시합니다.
  3. 앱에 정의한 매개변수와 같은 이름으로 매개변수를 정의합니다. 각 매개변수에 기본값 및 조건부 값을 설정할 수 있으며 기본값은 이후에 해당하는 인앱 기본값을 재정의합니다. 자세한 내용은 Remote Config 파라미터 및 조건을 참조하세요.

6단계: 값 가져오기 및 활성화

  1. Remote Config 백엔드에서 파라미터 값을 가져오려면 fetchConfig() 메서드를 호출합니다. 백엔드에 설정한 모든 값이 수신되어 Remote Config 객체에 캐시됩니다.
  2. 가져온 매개변수 값을 앱에 적용하려면 activate() 메서드를 호출합니다.

호출 한 번으로 값을 가져오고 활성화하려면 다음 예시와 같이 fetchAndActivate()를 사용합니다.

Web

import { fetchAndActivate } from "firebase/remote-config";

fetchAndActivate(remoteConfig)
  .then(() => {
    // ...
  })
  .catch((err) => {
    // ...
  });
rc_fetch_config_callback.js

Web

remoteConfig.fetchAndActivate()
  .then(() => {
    // ...
  })
  .catch((err) => {
    // ...
  });
index.js

이러한 업데이트된 매개변수 값은 앱의 동작과 모양에 영향을 주므로 사용자 경험에 방해가 되지 않을 만한 시점, 예를 들어 사용자가 다음번에 앱을 열 때 등과 같은 상황에서 가져온 값을 활성화하는 것이 좋습니다. 자세한 내용과 예시는 원격 구성 로딩 전략을 참조하세요.

제한

앱에서 짧은 시간 동안 가져오기를 너무 많이 수행하면 가져오기 호출이 제한될 수 있습니다. 이 경우 SDK가 FETCH_THROTTLE 오류를 발생시킵니다. 이 오류를 확인하고 지수 백오프 모드로 재시도하여 가져오기 요청 간 대기 시간을 더 길게 설정하는 것이 좋습니다.

앱을 개발하는 동안 캐시를 자주(시간당 여러 번) 새로고치면 앱을 개발하고 테스트할 때 빠르게 반복할 수 있습니다. 개발자가 많은 프로젝트에서 빠르게 반복할 수 있도록 앱에서 가져오기 간격 최솟값(Settings.minimumFetchIntervalMillis)의 속성을 임시로 추가할 수 있습니다.

Remote Config의 권장되는 기본 프로덕션 가져오기 간격은 12시간(기본값)입니다. 즉, 실제로 발생하는 가져오기 호출 수에 관계없이 12시간 동안 백엔드에서 구성을 두 번 이상 가져올 수 없습니다. 가져오기 간격 최솟값은 구체적으로 다음과 같은 순서로 결정됩니다.

  1. Settings.minimumFetchIntervalMillis의 매개변수
  2. 기본값 12시간

다음 단계

아직 Remote Config 사용 사례를 살펴보지 않았다면 살펴보고 다음을 포함하여 주요 개념과 고급 전략 문서를 참조하세요.