FlutterFire CLI 사용해서 Flutter에서 Flavor 나누기

이전 포스팅에서는 Flutter의 Flavor를 나누는 방법에 대해 알아봤습니다.

 

https://android-developer.tistory.com/100

플러터에서 Flavor를 사용해서 개발 환경 분리 및 예시

 

https://android-developer.tistory.com/101

플러터에서 Flavor를 사용해서 iOS 개발 환경 분리 및 변수 설정

 

이번 포스팅에서는 나눠 놓은 Flavor에 대해 Firebase를 별도로 설정하는 방법에 대해 알아보겠습니다.

---

FlutterFire CLI 사용해서 Flutter에서 Flavor 나누기

먼저 Flavor의 갯수만큼 Firebase 프로젝트가 필요합니다.

 

3개의 Flavor와 3개의 Firebase 프로젝트

 

저는 이전 포스팅에서 DEV, PROD만 만들었기 때문에 2개로만 진행하겠습니다.

---

1. Firebase 설치하기

 

다음과 같은 커맨드로 Firebase CLI를 설치합니다.

 

npm install -g firebase-tools

 

 

자세한 Firebase CLI 설치 방법은 다음 문서를 참조하면됩니다.

 

https://firebase.google.com/docs/cli?hl=ko&_gl=1*urgsq2*_up*MQ..*_ga*MTc5MDI3NjE0Ni4xNzUxMDY4NTc0*_ga_CW55HF8NVT*czE3NTEwNjg1NzQkbzEkZzAkdDE3NTEwNjg1NzQkajYwJGwwJGgw#windows-npm

Firebase CLI 참조  |  Firebase Documentation

 

 

2. Firebase Login 실시

설치한 Firebase CLI를 사용해서 Firebase에 로그인을 실시합니다.

 

firebase login

 

 

3. FlutterFire CLI 설치하기

다음 커맨드를 사용해서 FlutterFire CLI를 설치합니다.

 

dart pub global activate flutterfire_cli

 

혹시 이미 FlutterFire가 설치되어있는 사람이라면 1.0.0 이상 버전인지 확인하시길 바랍니다.

 

flutterfire --version

 

4. flutterfire로 flavor별 셋업하기

이 과정을 실시하기 전에 Firebase 프로젝트가 셋업된 상태여야합니다.

 

위에서 언급한대로 Flavor별 Firebase 프로젝트가 있기만 하면됩니다. (Android, iOS 셋업은 필요없음)

 

또한 이 과정은 반드시 Mac 환경의 PC에서 진행해주시길 바랍니다.

 

Windows에서 진행할 경우 iOS에 대한 셋업이 진행되지 않습니다.

 

Android에 대한 셋업만 필요할 경우에는 Windows에서 진행해도 문제 없습니다.

 

Firebase 셋업이 끝났다면 다음과 같은 커맨드를 프로젝트 루트에서 사용합니다.

 

flutterfire config \
  --project=flutter-ship-dev \
  --out=lib/firebase_options_dev.dart \
  --ios-bundle-id=com.codewithandrea.flutterShipApp.dev \
  --ios-out=ios/flavors/dev/GoogleService-Info.plist \
  --android-package-name=com.codewithandrea.flutter_ship_app.dev \
  --android-out=android/app/src/dev/google-services.json

 

주의할 점은 각각의 패키지 이름과 폴더 위치를 flavor의 이름에 맞게 잘 조절해야합니다.

 

커맨드의 각각의 파라미터의 의미는 다음과 같습니다.

 

옵션	설명
$ --project $	사용할 Firebase 프로젝트를 지정합니다. (프로젝트 별칭이 아닌 프로젝트 ID를 사용해야 합니다.)
$ --out $	Firebase 설정 파일(예: lib/firebase_options.dart)을 저장할 경로를 지정합니다.
$ --ios-bundle-id $	iOS 앱의 번들 ID를 지정합니다. (Xcode의 Runner > General > Identity > Bundle Identifier 에서 찾을 수 있습니다.)
$ --ios-out $	iOS용 $ GoogleService-Info.plist $ 파일을 저장할 경로를 지정합니다.
$ --android-package-name $	Android 앱의 패키지 이름(application ID)을 지정합니다. (android/app/build.gradle.kts 파일 내 applicationId 값)
$ --android-out $	Android용 $ google-services.json $ 파일을 저장할 경로를 지정합니다.

 

 

해당 커맨드가 정상적으로 작동했다면 원하는 Firebase 프로젝트 선택화면이 나오고

 

다음과 같은 화면을 볼 수 있습니다.

 

? You have to choose a configuration type. Either build configuration (most likely choice) or a target set up. ›                    
❯ Build configuration
  Target

 

Build configuration을 선택합니다.

 

 

이후 iOS의 scheme을 선택하는 선택지가 나옵니다.

 

? Please choose one of the following build configurations ›
  Debug                                        
  Release                                        
  Profile                                        
❯ Debug-dev                                      
  Profile-dev                                        
  Release-dev                                                                                                           
  Debug-prod                                        
  Profile-prod                                        
  Release-prod

 

각각의 Flavor에 대한 dev를 선택하시면됩니다.

 

예: product flavor일 경우 Release-dev를 선택한다.

 

? Which platforms should your configuration support (use arrow keys & space to select)? ›
✔ android                                      
✔ ios                                      
  macos                                        
  web                                      
  windows

 

플랫폼 선택에서는 원하는 것을 선택하면됩니다.

 

플랫폼까지 선택이 완료되면

 

자동으로 Firebase 프로젝트에 Android, iOS 셋업이 실시되고 필요한 파일들이 Flutter 프로젝트에 다운로드됩니다.
(필요한 폴더 등도 자동으로 만들어줍니다.)

 

저는 최종적으로 이렇게 됐습니다.

 

 

---

자동으로 json 파일과 plist가 셋업되지 않는 경우

product의 패키지 이름을 .product 같이 설정하지 않았을 경우 자동으로 해당 flavor 이름으로 폴더를 만들고 거기에 파일을 생성하지 않는 문제가 있습니다. (현재 version 1.3.1 사용중)

 

이 때는 직접 해당 파일들을 다운로드 해서 해당 flavor 폴더를 만들고 넣어주면됩니다.

---

 

5. Firebase를 셋업할 때 각각의 Flavor별로 생성된 파일을 참조하도록 하기

 

다음과 같은 파일을 하나 생성한다.

lib/firebase.dart

 

그리고 다음과 같이 적어준다.

 

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/services.dart';

import '../firebase_options.dart' as product;
import '../firebase_options_dev.dart' as dev;

Future<void> initializeFirebaseApp() async {
  // Determine which Firebase options to use based on the flavor
  final firebaseOptions = switch (appFlavor) {
    'product' => product.DefaultFirebaseOptions.currentPlatform,
    'dev' => dev.DefaultFirebaseOptions.currentPlatform,
    _ => throw UnsupportedError('Invalid flavor: $appFlavor'),
  };
  await Firebase.initializeApp(options: firebaseOptions);
}

 

여기서 중요한 점은 import를 각 firebase_options.dart에 맞게 해줘야한다는 것이다.

 

위 코드를 main.dart에 반영해준다.

 

lib/main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initializeFirebaseApp();
  runApp(const MyApp());
}

 

여기까지하면 정상적으로 Firebase를 Flavor별로 실행하는 것이 완료된다.

 

---

참고 자료

 

https://codewithandrea.com/articles/flutter-firebase-multiple-flavors-flutterfire-cli/

How to Setup Flutter & Firebase with Multiple Flavors using the FlutterFire CLI

 

https://firebase.google.com/docs/flutter/setup?hl=ko

Flutter 앱에 Firebase 추가

 

https://firebase.google.com/docs/cli?hl=ko&_gl=1*urgsq2*_up*MQ..*_ga*MTc5MDI3NjE0Ni4xNzUxMDY4NTc0*_ga_CW55HF8NVT*czE3NTEwNjg1NzQkbzEkZzAkdDE3NTEwNjg1NzQkajYwJGwwJGgw#windows-npm

Firebase CLI 참조  |  Firebase Documentation