웹에서 원격 구성 시작하기

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

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

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

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

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);

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단계: 가져오기 간격 최솟값 설정

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

// The default and recommended production fetch interval for Remote Config is 12 hours
remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
rc_set_minimum_fetch_time.js

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
index.js

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

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

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

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

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

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

gcloud auth print-access-token

다음 예는 앱에서 기본값을 가져오고 설정할 수 있는 두 가지 방법을 보여줍니다. 첫 번째 예에서는 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() 메서드를 호출합니다.

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

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

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

5단계: 매개변수 값 설정

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

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

4. 커스텀 신호 조건을 사용하는 경우 속성과 값을 정의합니다. 다음 예는 커스텀 신호 조건을 정의하는 방법을 보여줍니다.

     let customSignals = {
        "city": "Tokyo",
        "preferred_event_category": "sports"
     }
   
     setCustomSignals(config, customSignals);

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

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

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

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

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

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

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

7단계: 실시간 업데이트 리슨

파라미터 값을 가져온 후 실시간 Remote Config을 사용하여 Remote Config 백엔드의 업데이트를 리슨할 수 있습니다. 실시간 Remote Config은 사용 가능한 업데이트가 있을 때 연결된 기기에 신호를 보내고 새로운 Remote Config 버전을 게시한 후 변경사항을 자동으로 가져옵니다.

1. 앱에서 onConfigUpdate를 사용하여 업데이트 리슨을 시작하고 새 매개변수 값을 자동으로 가져옵니다. next 콜백을 구현하여 업데이트된 구성을 활성화합니다.

     onConfigUpdate(remoteConfig, {
        next: (configUpdate) => {
           console.log("Updated keys:", configUpdate.getUpdatedKeys());
           if (configUpdate.getUpdatedKeys().has("welcome_message")) {
              activate(remoteConfig).then(() => {
              showWelcomeMessage();
              });
           }
        },
        error: (error) => {
           console.log("Config update error:", error);
        },
        complete: () => {
           console.log("Listening stopped.");
        }
     });

2. 다음에 새로운 버전의 Remote Config을 게시하면 앱을 실행하고 변경사항을 리슨하는 기기가 완료 핸들러를 호출합니다.

제한

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

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

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

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