[Flutter] Flutter 프로젝트를 Firebase와 연동하기

Flutter는 구글에서 개발하고 지원하는 크로스플랫폼 애플리케이션 개발 프레임워크로, 같은 구글 제품인 Firebase와 높은 연동성을 보여줍니다.

 

Firebase의 Analytics, FCM, 인증, 스토리지 같은 좋은 기능들을 이용하기 위해, 앱에 Firebase를 연동하고자 하는 분들이 많을 것입니다.

 

Flutter와 Firebase를 연동하는 것은 타 프레임워크에 비해 매우 쉽긴 하지만, 구글이 제시해 준 설명대로 잘 흘러가지 않았던 점이 있어서, 약간의 시행착오를 겪은 내용과 해결 방법을 담은 글을 작성해 보겠습니다.

 

 

먼저, Firebase Console로 이동하여 프로젝트를 하나 생성합니다.

https://console.firebase.google.com/

 

Google Analytics 연결, Google에 사용 정보 제공, 리전(대한민국 권장) 등의 정보는 개인의 선호에 맞게 선택하세요.

프로젝트를 만들고 프로젝트 메인 화면에서 위 Flutter 버튼을 클릭합니다.

 

그러면 아래와 같은 설명이 나타납니다.

‘다음’을 눌러 2번 항목으로 이동하면, Firebase 연동에 대한 구체적인 지시가 나타납니다.

 

 

첫 번째 명령어를 cmd 또는 터미널에 입력합니다.

dart pub global activate flutterfire_cli

위 패키지는 글로벌하게 설치되는 패키지로, 꼭 Firebase를 연동하고자 하는 프로젝트의 디렉토리에서 실행할 필요는 없습니다.

 

그런데 첫 번째 명령어를 실행한 끝에 아래와 같은 수상한 경고가 뜹니다.

 

Mac 경고 내용

Warning: Pub installs executables into $HOME/.pub-cache/bin, which is not on your path.
You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.):

  export PATH="$PATH":"$HOME/.pub-cache/bin"

 

Windows 경고 내용

Warning: Pub installs executables into C:\\Users\\**username**\\AppData\\Local\\Pub\\Cache\\bin, which is not on your path. You can fix that by adding that directory to your system's "Path" environment variable. A web search for "configure windows path" will show you how.

 

그래도 일단 경고를 무시하고, 두 번째 명령어를 Firebase를 연동하고자 하는 프로젝트의 루트 디렉토리에서 실행해보세요.

(<Firebase 프로젝트명> 부분을 본인의 Firebaes 프로젝트 이름으로 수정하세요)

flutterfire configure --project=<Firebase 프로젝트명>

첫 번째 경고를 무시하고 이 명령어를 실행한 경우, 이전에 별도의 작업을 하지 않았던 이상, 두 번째 명령어를 실행했을 때 아래와 같은 flutterfire를 찾을 수 없다는 경고가 뜰 것입니다.

 

Mac 오류 내용

command not found: flutterfire

Windows 오류 내용

The term 'flutterfire' is not recognized as the name of a cmdlet, function, script file, or operable program

첫 번째 명령어를 실행했을 때 경고했던 내용대로, 각 운영체제에 맞는 환경변수 설정을 해야 flutterfire 명령어를 이용할 수 있습니다.

 

 

• Mac 

 

Terimal을 실행 후 홈 디렉토리로 이동 후 .bash_profile 을 vi 로 열어줍니다.

vi .bash_profile

그리고 경고 문구에 있던 내용을 파일 내용에 추가해줍니다.

(vim 환경에서 파일 내용을 수정하려면 i를 누르세요)

export PATH="$PATH":"$HOME/.pub-cache/bin"

그리고 :wq 를 입력 후 엔터를 눌러 저장합니다.

 

*본인이 사용하는 쉘에 따라 .bash_profile의 이름이 다를 수 있습니다.

예를 들어, zsh를 사용하는 경우, .zprofile, .zshrc 등의 이름일 수 있습니다.

어떤 쉘을 사용하고 있는지는 Terminal을 실행한 후 제목 표시줄을 보면 알 수 있습니다.

 

 

• Windows

윈도우의 경우 Java를 설치할 때 Path 환경변수 설정을 해 주듯이 설정을 해주어야 합니다.

 

제어판 > 시스템 > 정보(왼쪽 메뉴 아래) > 고급 시스템 설정 > 고급 탭 > 환경 변수 > 시스템 변수 영역에서 Path 선택 후 편집 클릭 > 새로 만들기를 눌러 아래 값 추가

 

(<윈도우 사용자 이름> 부분을 수정하세요)

 

C:\Users\<윈도우 사용자 이름>\AppData\Local\Pub\Cache\bin

아래 블로그를 보면 환경변수를 입력하는 경로를 찾아가는 데 도움이 될 듯합니다.

https://aitconomy.tistory.com/210

 

 

 

Mac, Windows 모두: 위 작업을 완료 후 cmd(또는 터미널)을 재실행해주세요.

 

 

 

이렇게 까지 하고 이제 되나 싶었더니, 아래와 같은 오류가 또 뜹니다.

FirebaseCommandException: An error occured on the Firebase CLI when attempting to run a command.
COMMAND: firebase --version 
ERROR: The FlutterFire CLI currently requires the official Firebase CLI to also be installed, see <https://firebase.google.com/docs/cli#install_the_firebase_cli> for how to install it.

 

 

오류에서 시키는 대로 여기에 접속해줍니다.

https://firebase.google.com/docs/cli#install_the_firebase_cli

 

각자의 운영체제에 맞는 방식으로 Firebase CLI 를 설치해줍니다.

 

 

설치가 끝난 후, 아래 명령어를 입력하여 앞에서 만들었던 프로젝트가 있는 구글 계정으로 로그인해줍니다.

firebase login

로그인 전 뜨는 아래 Information에 딸린 질문은, 구글의 데이터 수집에 대한 동의 여부를 묻는 것으로, N을 입력해도 진행에는 지장이 없습니다.

i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (<https://policies.google.com/privacy>) and is not used to identify you.

? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?

로그인 완료 후, 구글 계정 연동이 되었는지 확인하기 위해 아래 명령어로 테스트해줍니다.

firebase projects:list

명령어 실행 결과, 앞에서 만들었던 프로젝트를 비롯하여 계정에 있는 프로젝트들이 잘 출력되면 firebase_cli가 잘 설치되었으며, 구글 계정이 잘 연동된 것입니다.

 

 

 

 

여기까지 되었으면 이제 문제의 ‘두 번째 명령어’를 실행할 수 있는데, 이 명령어를 실행하기 전에 한 가지 확인해야 할 것이 있습니다. 바로 앱의 패키지명(번들명)입니다.

 

Firebase에 연동될 때 이 패키지명(번들명)이 사용되므로, 확인해두지 않으면 나중에 삭제하고 다시 명령어를 실행하는 등 번거로움이 있을 수 있습니다.

 

구글 플레이 스토어 / 애플 앱 스토어에 등록될 패키지명(번들명) (com.example.***)을 자신이 원하는 패키지명(번들명)으로 수정해줍니다.

 

 

수정하는 방법으로는 크게

 

1. 모든 패키지명/번들명을 전체 파일에서 검색하여(Ctrl(Cmd) + Shift + F) 모조리 직접 바꾸어주는 방법

2. change_app_package_name 이라는 패키지를 설치하여 변경하는 방법

 

두 가지가 제시되어 있는데, 개인적으로는 1번으로 하는 것이 이런저런 패키지 설치할 것 없이 깔끔하고, 발생한 문제도 없었습니다.

참고:

https://stackoverflow.com/questions/51534616/how-to-change-package-name-in-flutter

How to change package name in flutter?

 

 

 

 

이것까지 확인했으면, 문제의 ‘두 번째 명령어’를 Firebase를 연동하고자 하는 프로젝트의 루트 디렉토리에서 다시 실행해줍니다.

flutterfire configure --project=<Firebase 프로젝트명>

 

 

그러면, 어떤 플랫폼을 등록할 것인지를 묻습니다. 위아래 방향키로 이동, space로 선택/선택해제하여 원하는 플랫폼을 선택합니다.

 

선택 후 Enter를 누르면, Firebase 프로젝트에 선택한 플랫폼이 자동으로 등록되며, 이는 Firebase 프로젝트 페이지에서 확인할 수 있습니다.

저의 경우, 안드로이드, iOS, Web을 세 개를 선택하여 등록하였습니다.

 

 

그리고, 명령 실행 결과 Flutter 프로젝트의 /lib 폴더 안에 firebase_options.dart 라는 파일이 생성됩니다.

 

firebase_core 라는 패키지가 없어서 해당 파일 내에 오류가 뜨기 때문에, 패키지를 설치해줍니다.

flutter pub add firebase_core

cmd(터미널)에서 Flutter 프로젝트 루트로 이동하여 위와 같은 명령어를 입력하거나, 각자 사용하는 IDE에 따라 편한 방법으로 설치하세요.

 

 

 

고생하셨습니다. 이렇게까지 하면 Firebase와 연동이 모두 완료됩니다!