콘솔로 이동

Firebase.com에서 웹 및 Node.js 앱 업그레이드

이 문서에서는 기존의 웹 및 Node.js 앱을 Firebase.com에서 새로운 Firebase Console 및 3.x SDK로 업그레이드하는 방법을 설명합니다.

다음 3가지 단계를 따르면 됩니다.

  1. Firebase Console로 프로젝트 가져오기
  2. 데이터베이스 코드 업데이트
  3. 인증 코드 업데이트

언제든지 프로젝트를 가져올 수 있으며 애플리케이션과 기존 SDK는 계속 작동합니다. 그런 다음 애플리케이션에서 새 Firebase 기능을 사용하고자 할 때 코드를 업데이트하면 됩니다.

Firebase Console로 프로젝트 가져오기

  • Firebase Console로 이동하고 '현재 Firebase.com의 프로젝트'에서 프로젝트를 찾습니다.
  • 업그레이드하려는 프로젝트에서 가져오기를 클릭합니다.
    • 프로젝트가 firebase.com에서 유료 요금제를 사용하는 경우 새 Console에서 프로젝트에 대한 결제를 설정해야 합니다. 결제 정보는 자동으로 마이그레이션되지 않습니다.
    • 결제 계정을 선택하거나 만듭니다. 가져오기를 완료하면 이 계정이 프로젝트에 대한 모든 청구를 담당합니다.
  • 실시간 데이터베이스 및 호스팅 콘텐츠가 즉시 자동으로 Firebase Console로 가져오기 처리됩니다.
  • 사용자 데이터는 자동으로 새로운 인증 백엔드로 마이그레이션됩니다. 백그라운드에서 마이그레이션되므로 사용자는 데이터가 마이그레이션되는 동안 앱을 계속 사용할 수 있습니다. 사용자 가입 및 로그인은 영향을 받지 않습니다. 시스템에서 사용자 계정을 마이그레이션하는 동안 Firebase Console의 인증 탭에 스피너가 표시됩니다.
  • Firebase.com 앱을 대상으로 하는 유효한 프로모션 코드가 있는 경우 문의하세요.

Firebase CLI 업그레이드

업그레이드된 프로젝트에 명령줄 인터페이스를 사용하려면 3.0 이상의 버전을 설치해야 합니다. 다음을 실행하여 설치할 수 있습니다.

npm install -g firebase-tools

Firebase CLI의 최신 버전을 설치하고 나면 firebase login을 실행하여 다시 인증해야 합니다. 지속적 통합 서버 또는 다른 헤드리스 시스템에 대한 새 토큰을 얻으려면 firebase login:ci를 실행합니다.

끝으로, 이전한 Firebase.com 프로젝트의 각 프로젝트 디렉터리에서 firebase tools:migrate를 실행해야 합니다.

클라이언트 버전 업데이트

애플리케이션의 코드를 즉시 업데이트할 필요는 없습니다. 기존 데이터베이스 및 인증 코드는 업그레이드된 프로젝트에도 계속 사용할 수 있습니다. 하지만 애플리케이션에서 새 Firebase 기능을 사용하려면 다음 단계에 따라 새 API로 데이터베이스 코드를 마이그레이션합니다.

가장 간단한 방법은 다음을 포함하여 스크립트를 변경하는 것입니다.

변경 전

<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
변경 후

<script src="https://www.gstatic.com/firebasejs/6.6.2/firebase.js"></script>

Node.js 앱을 마이그레이션하는 경우 다음 명령어로 firebase npm 패키지의 최신 버전을 다운로드할 수 있습니다. firebase가 2.X 버전에 고정되지 않도록 이 버전을 제거한 후 최신 버전을 설치합니다.

$ npm uninstall firebase --save
$ npm install firebase --save

데이터베이스 참조 가져오기

새 SDK에서는 new Firebase를 통해 데이터베이스 참조를 인스턴스화할 수 없습니다. 대신에 firebase.initializeApp()을 통해 SDK를 초기화합니다.

변경 전

var ref = new Firebase("https://databaseName.firebaseio.com");
변경 후

// See https://firebase.google.com/docs/web/setup for how to
// auto-generate this config
var config = {
  apiKey: "apiKey",
  authDomain: "your-firebase-project-id.firebaseapp.com",
  databaseURL: "https://databaseName.firebaseio.com"
};

firebase.initializeApp(config);

var rootRef = firebase.database().ref();

웹 설정 페이지의 안내에 따라 위의 구성을 자동으로 생성할 수 있습니다.

no-argument getter가 읽기 전용 속성으로 변경됨

많은 no-argument getter가 읽기 전용 속성으로 변경되었습니다.

변경 전

// Reference
var key = ref.key();
var rootRef = ref.root();
var parentRef = ref.parent();

// Query
var queryRef = query.ref();

// DataSnapshot
ref.on("value", function(snapshot) {
  var dataRef = snapshot.ref();
  var dataKey = snapshot.key();
});
변경 후

// Reference
var key = ref.key;
var rootRef = ref.root;
var parentRef = ref.parent;

// Query
var queryRef = query.ref;

// DataSnapshot
ref.on("value", function(snapshot) {
  var dataRef = snapshot.ref;
  var dataKey = snapshot.key;
});

인증 코드 업데이트

이제 firebase.auth() 서비스에서 Firebase 인증 기능을 사용할 수 있고, 많은 메소드의 이름이 변경되었습니다. 다음 예는 OAuth 제공업체를 사용하여 사용자를 인증하는 방법입니다.

변경 전

ref.authWithOAuthPopup("twitter", function(error, authData) {
  if (error) {
    // An error occurred
    console.error(error);
  } else {
    // User signed in!
    var uid = authData.uid;
  }
});
변경 후

var auth = firebase.auth();

var provider = new firebase.auth.TwitterAuthProvider();
auth.signInWithPopup(provider).then(function(result) {
  // User signed in!
  var uid = result.user.uid;
}).catch(function(error) {
  // An error occurred
});

다음은 2.x API 및 새 API에서 커스텀 토큰 로그인이 작동하는 방식입니다.

변경 전

ref.authWithCustomToken(AUTH_TOKEN, function(error, authData) {
  if (error) {
    console.log("Login Failed!", error);
  } else {
    console.log("Login Succeeded!", authData);
  }
});
변경 후

firebase.auth().signInWithCustomToken(AUTH_TOKEN).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

서버에서 생성하는 커스텀 토큰에 새로운 형식이 사용됩니다. Node.js 및 자바용 Firebase Admin SDK를 사용하여 새 API와 호환되는 커스텀 토큰을 생성하거나 타사 JWT 라이브러리를 사용하여 커스텀 토큰을 생성할 수 있습니다.

2.x API의 헬퍼 라이브러리가 생성하는 토큰은 기본적으로 24시간 후에 만료되지만 Firebase Admin SDK가 생성하는 커스텀 토큰은 1시간 후에 만료됩니다.

사용 가능한 메서드의 전체 목록은 Node.js 모두에 대한 인증 API 참조를 확인하세요.

액세스 토큰 가져오기

Firebase.com Authentication API로 제공업체의 액세스 토큰을 간단하게 사용하여 제공업체의 API를 호출하고 추가 정보를 얻을 수 있습니다. 이 액세스 토큰은 로그인 작업이 완료된 직후에 계속 사용할 수 있습니다.

변경 전

ref.onAuth(function(authData) {
  if (authData) {
    var accessToken = authData.providerData[authData.provider].accessToken;
  }
})
변경 후

var auth = firebase.auth();

var provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider).then(function(result) {
  var accessToken = result.credential.accessToken;
});

Firebase 인증이 더 이상 액세스 토큰을 유지하지 않으므로 필요한 경우 애플리케이션에서 직접 액세스 토큰을 유지해야 합니다.

인증 상태 모니터링

인증 상태 모니터링을 위한 메소드 이름과 콜백 인수가 약간 변경되었습니다.

변경 전

ref.onAuth(function(authData) {
  if (authData) {
    // User signed in!
    var uid = authData.uid;
  } else {
    // User logged out
  }
});
변경 후

var auth = firebase.auth();

auth.onAuthStateChanged(function(user) {
  if (user) {
    // User signed in!
    var uid = user.uid;
  } else {
    // User logged out
  }
});

기존 로그인 이전

사용자가 기존의 SDK로 앱에 로그인한 경우 새 SDK로 로그인 상태를 유지하려면 약간의 코드 작성이 필요합니다. 그렇지 않으면 사용자가 다시 로그인해야 합니다. 관련 오픈소스 샘플 코드는 Firebase Auth Migration Helpers GitHub 저장소를 참조하세요.

새 비밀번호 재설정 템플릿 업데이트

앱에서 사용자가 이메일 및 비밀번호 인증으로 로그인하도록 허용하는 경우 사용자에게 비밀번호를 재설정하는 옵션도 제공하는 것이 보통입니다.

새 SDK로 업그레이드하고 나면 사용자 비밀번호 재설정 이메일은 Firebase Console에 지정된 새 템플릿을 사용합니다. 앱의 필요에 맞게 템플릿을 업데이트해야 합니다.

Firebase 라이브러리 업데이트

다음 라이브러리를 사용하는 경우 최신 버전으로 업그레이드해야 합니다.

라이브러리 지원되는 버전 리소스
AngularFire 2.x.x Github
ReactFire 1.x Github
GeoFire 4.1.x Github