React & React Native/환경 설정 및 구성

[RN] React Native firebase 개발/운영 분리(iOS) : GoogleService-Info.plist

adjh54 2024. 7. 17. 20:55
반응형
해당 글에서는 react-native 내에서 firebase를 활용하는 경우 iOS 플랫폼에서 환경 파일을 개발(Debug)과 운영(Release) 상황에 따라 GoogleService-Info.plist 파일을 분리하는 방법에 대해 알아봅니다.





 

💡 React Native 환경에서 Firebase 설정에 관련된 링크들입니다.
분류 플랫폼 링크
Firebase Analytics + Crashlytics 이해 및 설정 방법 Android https://adjh54.tistory.com/254
Firebase Analytics + Crashlytics 이해 및 설정 방법 iOS https://adjh54.tistory.com/530
firebase 개발/운영 분리(Android) google-services.json Android https://adjh54.tistory.com/297
firebase 개발/운영 분리(iOS) : GoogleService-Info.plist iOS https://adjh54.tistory.com/531
Firebase Cloud Message(FCM) 이해 및 환경설정, 간단 테스트 Android https://adjh54.tistory.com/431


 
 

1) GoogleService-Info.plist


💡 GoogleService-Info.plist

- iOS 앱에서 Firebase 설정 정보를 포함하는 파일입니다. 이 파일에는 앱의 Firebase 프로젝트와 관련된 API 키, 데이터베이스 URL, 프로젝트 ID 등 다양한 설정 값이 포함되어 있습니다. 이를 통해 앱이 Firebase 서비스와 통신할 수 있습니다.

 
 

2) 프로젝트 확인


 

1. 아래와 같이 xxx-dev, xxx-prd라는 프로젝트가 구성되어 있습니다.


 
 

2. 개발(dev)과 운영(prd)에 맞는 GoogleService-Info.plist 파일을 프로젝트에서 다운로드합니다.


💡 개발(dev)과 운영(prd)에 맞는 GoogleService-Info.plist 파일을 프로젝트에서 다운로드합니다

- 이름이 중복되므로 개발(dev)인 경우는 GoogleService-Info-Dev.plist 파일로 설정하고 운영(prd)인 경우는 기존의 이름인 GoogleService-Info.plist로 지정합니다.

 

2.1. 프로젝트 개요 - 프로젝트 설정 버튼을 누릅니다.


 
 

2.2. 내 앱에서 ‘GoogleService-Info.plist’ 파일을 다운로드합니다.


 
 

3. 아래와 같이 파일들이 준비되었습니다.


 
 

4. [Xcode] 프로젝트 내에 해당 파일들을 추가합니다.


 
 

3) 소스코드 변경


 

1. AppDelegate.mm 파일 내에 Firebase 설정 코드를 추가합니다.


1.1. 설정 정보


💡 설정 정보

1. #if DEBUG / ELSE 구문

- [Firebase] Debug와 Release 환경에 따라 각각 GoogleService-Info.plist 파일을 불러오도록 구성


2. FIROptions *options 

- FIROptions 객체를 사용하여 해당 파일 경로에서 Firebase 설정을 가져오고, FIRApp configureWithOptions:options를 호출하여 Firebase를 초기화합니다.
// [Firebase] Debug와 Release 환경에 따라 각각 GoogleService-Info.plist 파일을 불러오도록 구성
#if DEBUG
  NSString *filePath = [[NSBundle mainBundle] pathForResource:@"GoogleService-Info-Dev" ofType:@"plist"];
#else
  NSString *filePath = [[NSBundle mainBundle] pathForResource:@"GoogleService-Info" ofType:@"plist"];
#endif

// [Firebase] FIROptions 객체를 사용하여 해당 파일 경로에서 Firebase 설정을 가져오고, FIRApp configureWithOptions:options를 호출하여 Firebase를 초기화합니다.
FIROptions *options = [[FIROptions alloc] initWithContentsOfFile:filePath];
[FIRApp configureWithOptions:options];

 
 
 

1.2. 전체 코드


#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
  // [Firebase] Debug와 Release 환경에 따라 각각 GoogleService-Info.plist 파일을 불러오도록 구성
#if DEBUG
  NSString *filePath = [[NSBundle mainBundle] pathForResource:@"GoogleService-Info-Dev" ofType:@"plist"];
#else
  NSString *filePath = [[NSBundle mainBundle] pathForResource:@"GoogleService-Info" ofType:@"plist"];
#endif
  
  // [Firebase] FIROptions 객체를 사용하여 해당 파일 경로에서 Firebase 설정을 가져오고, FIRApp configureWithOptions:options를 호출하여 Firebase를 초기화합니다.
  FIROptions *options = [[FIROptions alloc] initWithContentsOfFile:filePath];
  [FIRApp configureWithOptions:options];

  self.moduleName = @"xxxx";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

 
 
 

4) Debug / Release 변경 방법 : Product - Scheme - Edit Scheme …


1. Product - Scheme - Edit Scheme …을 선택합니다.


 
 
 

2. Build Configuration에서 Debug/Release를 선택해 줍니다.


 
 

5) 테스트 및 테스트 결과


 

1. 코드 추가 : 강제 오류 및 firebase 발생 시킵니다


💡 코드 추가

- 앱 시작 시 강제로 Crash 로그를 발생시켰습니다.
import crashlytics from '@react-native-firebase/crashlytics';
const App = () => {
	useEffect(() => {
		crashlytics().crash();
	}, []);
	return <></>;
};
export default App;

 
 
 

2. 실행 결과 : Debug 실행 결과


💡 실행 결과: Debug 실행 결과

- firebase 내에 dev 프로젝트 내에 강제로 발생시킨 Crash Log가 아래와 같이 로그가 발생함을 확인하였습니다.
- 즉, firebase 내에 xxx-dev 프로젝트와 연결됨을 확인하였습니다.

 
 
 
 

3. 실행 결과: Release 실행 결과


💡 실행 결과 : Release 실행 결과

- firebase 내에 prd 프로젝트 내에 강제로 발생시킨 Crash Log가 아래와 같이 로그가 발생함을 확인하였습니다.
- 즉, firebase 내에 xxx-prd 프로젝트와 연결됨을 확인하였습니다.

 
 
 
 
 
오늘도 감사합니다. 😀
 
 
 

반응형