React Native 파이어베이스 배포하기

React Native를 테스트할 때 가장 쉬운 방법 중 하나가 firebase로 테스트 배포를 하는 것이다. 

iOS랑 Android 모두 배포를 해볼 수 있으며, 업데이트도 빠르게 확인이 가능하다. 

 

환경 설치

첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 개발 환경도 함께 올린다.

공식 사이트에서 without Framework의 내용을 보고 설치를 진행하였다. 

npx @react-native-community/cli@latest init [프로젝트명]

 

설치가 끝나면 파이어베이스 라이브러리를 설치한다. 

yarn add @react-native-firebase/app

 

 

설치까지 완료하면 package.json은 다음과 같다 : 

"dependencies": {
  "react": "18.2.0",
  "react-native": "0.74.2"
},
"devDependencies": {
  "@babel/core": "^7.20.0",
  "@babel/preset-env": "^7.20.0",
  "@babel/runtime": "^7.20.0",
  "@react-native/babel-preset": "0.74.84",
  "@react-native/eslint-config": "0.74.84",
  "@react-native/metro-config": "0.74.84",
  "@react-native/typescript-config": "0.74.84",
  "@types/react": "^18.2.6",
  "@types/react-test-renderer": "^18.0.0",
  "babel-jest": "^29.6.3",
  "eslint": "^8.19.0",
  "jest": "^29.6.3",
  "prettier": "2.8.8",
  "react-test-renderer": "18.2.0",
  "typescript": "5.0.4"
},

 

iOS 설정 

파이어베이스에서 iOS 연동을 선택한다. 

 

이후 설명할 Android 역시 여기서 추가하면 된다. 

화면에 보이는 iOS+ 버튼을 눌러서 테스트 환경을 연동할 준비한다. 

 

이 단계에서는 1단계와 2단계가 제일 중요하다. 

Apple 번들 ID는 xcode에서 확인할 수 있을 것이다. 해당 정보를 입력하고 앱 등록을 눌러준다. 

 

여기서 plist 파일을 다운로드 하고 xcode에서 등록해주면 된다. 

 

Xcode에서 프로젝트를 우클릭하면 Add Files to .. 가 있다.

이것을 통해 해당 파일을 등록해준다. 

 

 

다운받은 폴더에 있는 plist 파일을 선택해서 Add를 눌러주면 되는데, Destination 체크가 해제되어 있을 확률이 높다. 

해당 체크 박스를 체크하고 Add를 눌러주면 된다. 

 

해당 작업이 끝나면 프로젝트의 ios 폴더에 파일이 추가되어 있는 것을 확인할 수 있다. 

파일이 추가되면 설정을 추가해준다. 

 

ios 폴더 아래에 있는 프로젝트명으로 구성된 폴더를 들어간다. 해당 폴더 안에 있는 AppDelegate.mm 파일을 들어간다. 

// AppDelegate.mm 

// ...
#import <Firebase.h> // << == 추가 

// ...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"firebase_deploy";
  // 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 = @{};
  [FIRApp configure]; // << == 추가
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

 

위와 같이 설정을 추가해주면 된다. 

다음으로 ios 폴더 아래에 있는 Podfile 파일을 수정해주면 된다. 

// Podfile
use_frameworks! :linkage => linkage.to_sym

==> 

$RNFirebaseAsStaticFramework = true
use_frameworks! :linkage => :static

 

여기까지 설정하면 React Native 설정이 끝이나게 된다. 설정이 끝나면 ios 폴더로 이동해서 pod install을 해준다. 

The Swift pod `FirebaseCoreInternal` depends upon `GoogleUtilities`,

 

 설치 중 위와 같은 오류가 발생한다면, Podfile에 추가적인 설정이 필요하다. 

config = use_native_modules!
pod 'GoogleUtilities', :modular_headers => true // << == 추가

 

config ... 아래에 위 코드를 추가해주고 pod install을 실행하면 제대로 설치가 완료된다. 

 

이제 xcode 에서 추가적인 설정이 필요하다. 

 

Xcode에서  IOS Simulators로 설정된 부분을 Build에 있는 Any iOS Device로 변경해주고 

상단에 있는 [Project] => [Archive]를 선택해서 빌드를 실행한다. 

 

command phasescriptexecution failed with a nonzero exit code

 

만약 빌드 시 위와 같은 오류가 발생한다면, Build Settings에 있는 Exculuded에 있는 Any iOS Simulator SDK를 전부 지워주면 된다. 

 

그게 아니라면 빌드가 정상적으로 완료되면 창이 하나 나올 것이다. 

해당 창을 만약 종료했는데 다시 보고 싶은 경우에는 [Window] => [Organizer]를 누르면 다시 나옵니다. 

 

 

빌드가 끝나면 해당 파일을 Distribute App을 통해서 Ipa파일로 추출하면 된다. 

추출할때는 Release Testing을 선택해줬다. 

 

Ipa 파일을 추출 완료하면 파이어베이스에 등록을 해주면 된다. 

파이어베이스 콘솔에서 App Distribution를 선택해준다. 여기서 추출해둔 Ipa 파일을 넣어주면 테스터 공유하는 입력창이 나온다. 

 

 

여기서 추가하고 싶은 테스터를 입력하고 다음을 누르면 해당 사용자에게 이메일로 설치 링크가 전송된다. 

 

해당 사용자가 설치를 하기 전에 다음과 같이 기기를 등록하라는 안내를 받을 수 있다. 

애플 개발자센터에서 해당 사용자의 기기를 등록하지 않아서 발생하는 문제라서 등록해주면 된다. 

 

해당 기기의 UDID를 개발자 센터의  Device에 등록해주고 App id ( Identifiers )를 만들고 Profile을 만들어준다. 

Profiles를 만들 때, iOS App Development를 선택하고 Continue를 눌러서 다음으로 넘어간다. Certificate와 Device를 모두

등록하면 Profile을 다운로드할 수 있다. 

 

다운받은 파일을 Xcode에서 등록해주면 된다. 

 

Automatically manage signing을 체크 해제하면 Provisioning Profile을 선택할 수 있다. 

여기서 import Profile로 다운 받은 파일을 넣어주면 설정이 끝난다. 

 

그 후 다시 [Project] => [Archive]를 통해서 Ipa를 추출해서 업데이트를 시켜주면 해당 사용자가 어플을 설치할 수 있게 된다. 

 

Android 설정

iOS에 비해 Android를 비교적 간단하게 할 수 있다. 

 

 

iOS와 동일하게 먼저 파이어베이스에서 설치를 진행해줘야 한다. 

이때, 패키지 이름은 프로젝트의 android 폴더의 app폴더 안 build.gradle 파일에 있는 namespace를 보면 알 수 있다. 

 

SHA-1의 경우 커맨드로 확인할 수 있는데, cd android && ./gradlew signingReport 명령어로 알 수 있다. 

 

iOS와 동일하게 파일을 다운받아주고 이번엔 android 폴더의 app 폴더 안에 넣어준다. 

다음으로 프로젝트에 설정을 해줘야 한다. 

// android/build.gradle
dependencies {
    // ...
    
    classpath ('com.google.gms:google-services:4.4.2')
}

 

android 폴더에 있는 build.gradle 파일에 서비스를 추가해주면 된다. 

다음으론 android/app/build.gradle 파일에 설정을 추가해준다. 

// android/app/build.gradle

apply plugin: "com.android.application"
// ...
apply plugin: 'com.google.gms.google-services'

 

이렇게까지 설정해주면 안드로이드는 추가로 설정할 것이 없다. 

이제 apk 파일을 추출해야 하는데 커맨드를 이용하는 방법을 사용할 생각이다. 

 

android 폴더 아래에 있는 app 폴더, src 폴더 안에 있는 main 폴더에 assets 폴더를 만들어준다. 

그 후 아래와 같은 명령어를 실행 시켜 준다. 

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

 

이때 command not found: react-native 오류가 나온다면 

sudo npm install -g react-native-cli

 

명령어를 통해서 설치해준다. 

설치 후 명령어를 실행 시키면 assets폴더에 파일이 생긴다.  이후 android 폴더로 이동해서 다음과 같은 명령어를 입력한다. 

./gradlew assembleDebug

 

성공적으로 명령어가 실행되면 andround > app > build > outputs > apk > debug 폴더에 있는 app-debug.apk파일이 생긴다. 

이후 App Distribution에서 apk 파일을 넣어주고 대상자의 이메일을 입력해주면 해당 사용자에게 설치 이메일이 전송된다.