플러터에 Firebase 넣고 초기화 하는 방법(feat. 초보자 가이드)

이미 Firebase를 사용하기 위한 플러터 프로젝트가 있다는 가정하에 진행하겠습니다!!

 

---

Flutter에 Firebase CLI 설치하기

 

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

Flutter 앱에 Firebase 추가

 

위 가이드를 보면 제일 먼저 해야하는 일은 Firebase CLI를 설치하는 일입니다.

 

Firebase CLI를 설치하는 가이드는 여기 나와있지만...

 

https://firebase.google.com/docs/cli?hl=ko#setup_update_cli

Firebase CLI 참조  |  Firebase 문서

 

자세히 어떻게 하라고 나와있지 않습니다.

 

그렇기 때문에 제가 추천하는 방법은 Node.js를 사용하는 방법입니다.

 

다음 링크에 들어가서 Node.js를 다운로드합니다.

 

https://nodejs.org/ko/download/package-manager

Node.js — Node.js® 다운로드

 

우리들은 Node.js가 아닌 Firebase를 사용할거기 때문에 Node.js는 어떤 버전을 다운로드 하셔도 큰 문제가 없습니다.

 

= 그냥 최신버전의 Node.js를 다운로드 하시면됩니다.

 

다운로드를 완료 후 터미널을 열고 다음 커맨드를 입력합니다.

 

npm install -g firebase-tools

 

그럼 Firebase 사용을 위한 여러 툴이 설치됩니다.

 

그리고 나서 가이드 라인을 따라갑니다.

 

---

플러터에 Firebase를 추가하는 가이드 라인 따라가기

이제 Firebase를 사용하기 위한 tool을 설치했으니 Firebase 사용을 위한 프로젝트를 만들어야합니다.

 

다음과 같은 사이트에서 Firebase 프로젝트를 만들 수 있습니다.

 

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

로그인 - Google 계정

 

Firebase의 이름은 아무거나 해도 상관없습니다.

 

플러터 프로젝트를 만들었으면 다음과 같은 화면을 볼 수 있습니다.

 

 

그리고 Flutter에 Firebase 추가하기 버튼을 누르면

 

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

 

 

가이드 라인에 있는 다음 커맨드를 입력합니다.

 

firebase login

 

위 커맨드를 입력하면 firebase와 연결하기 위해 웹 브라우저가 열리고 연결하고자 하는 계정으로 로그인하면됩니다.

 

그 이후 다음과 같은 커맨드를 플러터 프로젝트의 Root에서 입력하면됩니다.

 

dart pub global activate flutterfire_cli

 

이때 다음과 같은 경고가 발생할 수 있습니다.

 

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 (.zshrc, .bashrc, .bash_profile, etc.):
export PATH="$PATH":"$HOME/.pub-cache/bin"

 

그러면 그 다음 스텝이 안될 수 있기 때문에 일단 다음 스텝인 커맨드를 다시 한 번 플러터 프로젝트의 Root에서 입력합니다.

 

 

저 같은 경우 위 커맨드를 입력했을 때 다음과 같은 에러가 발생했습니다.

 

 

저는 zsh에서 해당 커맨드를 찾을 수 없다고 나왔기 때문에 Warning에 나온 것을 다음과 같은 커맨드로 할 수 있습니다.

 

echo 'export PATH="$PATH:$HOME/.pub-cache/bin"' >> ~/.zshrc

 

혹시 bash를 사용중이라면 다음과 같은 커맨드를 사용할 수 있습니다.

 

echo 'export PATH="$PATH:$HOME/.pub-cache/bin"' >> ~/.bashrc

 

그리고 다음과 같은 커맨드로 변경한 내용을 적용할 수 있습니다.

 

zsh의 경우

 

source ~/.zshrc

 

bash를 사용중이라면

 

source ~/.bashrc

 

그리고 다시 한 번 flutterfire 커맨드를 사용해서 제대로 동작하는지 확인할 수 있습니다.

 

flutterfire --version

 

여기서 제대로 설치한 버전이 나온다면 완벽하게 변경된 것입니다.

 

이제 다시 한 번 다음 커맨드를 실행합니다.

 

 

그럼 다음과 같이 어떤 플랫폼의 Firebase를 설치할지 묻는게 나옵니다.

 

 

저는 Android와 iOS만 골랐습니다.

 

여기까지 하면 Flutter의 CLI 설치는 끝났습니다.

 

다음에 할 일은 직접 코드를 넣어서 Firebase를 초기화 하는 것인데... 그 전에 해야할 일이 있습니다.

 

 

 

---

플러터 앱에서 Firebase 초기화 하기

 

다음 공식 가이드 라인을 따라갑니다.

 

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

Flutter 앱에 Firebase 추가

 

플러터 프로젝트 루트에서 다음 커맨드를 실행하여 필요한 Package를 설치합니다.

 

flutter pub add firebase_core

 

그 이후 다음 커맨드를 사용하여 Firebase의 환경 설정을 완료합니다.

 

flutterfire configure

 

우리는 이미 일부 설정을 위에서 했기 때문에 다음과 같은 안내 메시지가 나오는데 Yes로 대답하면 됩니다.

 

---

플러터 프로젝트에 Firebase 초기화 코드 넣고 실행하기

다음과 같이 플러터의 main() 부분을 바꿔줍니다.

 

기존

 

void main() async {
  runApp(const MyApp());
}

 

 

Firebase 초기화 코드 입력 후

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

 

---

 

이미 플러터의 빌드 환경을 나누어버렸다면 어떻게 해야할까?

위 방법은 기본 package에서만 동작하기 때문에 빌드별로 package이름이 다르다면 인식이 안될 수 있습니다.

 

이전에 포스팅한 flavor 같은 것을 사용하여 이미 Flutter의 빌드 환경을 나누어서

 

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

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

 

 

빌드 환경별로 package 이름이 다르다면 어떻게 해야할까요?

 

먼저 Firebase 콘솔에서 다음과 같이 프로젝트 설정에 들어갑니다.

 

 

 

그리고 Android, iOS 각각 프로젝트를 추가합니다.

 

 

저는 2개를 추가로 등록했습니다.

 

그리고 google-services.json을 다운로드 합니다.

 

 

다운로드 한 파일을 android/app 안에 넣습니다.

 

이후에 실행하면 실행되는 것을 볼 수 있습니다.

 

하지만... dev의 경우에는 가능한한 Firebase 프로젝트를 별도로 만들어서 사용하는 것이 좋습니다.

---