플러터에 Firebase 설정 이제 CLI 로 한방에 설정 하자 ( 복잡 NO~NO! )

안녕하세요 개발하는남자입니다. 

오늘 포스팅할 내용은 플러터에 파이어베이스 설정하는 방법입니다. 

제 포스팅을 모두 보시거나 이전에 플러터에 파이어베이스 설정하는 방법을 보신 분이라면? 분명 이전에 포스팅했는데 또??? 포스팅 하나? 하겠지만 새로운 방법에 대해서 플러터 파이어 공식 도큐먼트 사이트에 기술되어있어서 그 방법을 정리하려고 이렇게 포스팅을 하게 되었습니다 :) 

 

이전에 플러터 파이어베이스 설정 방법이 궁금하신 분은 아래 포스팅 클릭!!

[flutter + firebase auth] 플러터 + 파이어베이스 로그인 연동 <설정편> part-1

 

또한 이번 포스팅에서는 CLI를 활용하여 설정하는 방법으로 파이어베이스 cli 설치 및 cli를 다루 실수  없는 분들은 아래 포스팅을 통해서 firebase cli를 설치하고 간단 프로젝트 생성에 대해서 개념을 잡아두시고 이번 포스팅을 보시면 도움이 되실 것입니다 :) 

파이어베이스 Functions 가 무엇이고, 설정/배포/테스트를 한꺼번에 ~!

 

참고로 이번포스팅은 플러터 파이어 공식 도큐먼트를 바탕으로 정리된 내용입니다. 

(영어 원문으로 확인하시려면 아래 링크를 통해 설정해보세요 ~!) 

CLI | FlutterFire

 

자 이제 포스팅 시작합니다 :) 

---

우선 플러터 프로젝트를 생성하겠습니다. 

flutter create <프로젝트명>

프로젝트를 원하시는 IDE로 열어 줍니다. 

저는 vsCode 를 사용할 것입니다. 해당 프로젝트로 이동하여 code로 열어줍니다. 

cd <프로젝트명> //생성된 프로젝트로 이동
code . //vsCode 현재 경로로 열기

프로젝트에서 터미널을 열어서 firebase 계정을 연결해줍니다 . 

일전에 이미 연결하신 분이라면 패스 하셔도 됩니다. 

firebase login:list // 파이어베이스 연결 계정 확인
firebase login // 로그인이 연결되어있지 않으면 login 명령어로 로그인 진행

파이어베이스와 연결이 된 상태라면 이제 플러터 파이어 cli를 실행하기 위해 몇 가지 라이브러리를 먼저 import를 진행하겠습니다. pubspec.yml 파일에 dependencies에 firebase_core를 추가하겠습니다. 

dependencies:
  firebase_core: ^1.10.5 // 2021.12.12 일 포스팅 작성 기준으로 최신 버전입니다.

자 이제 cli 를 통해 설정을 해볼 텐데요 

그전에 이전에 설정하던 방식이라고 한다면 파이어베이스 프로젝트 생성하고 해당 프로젝트에서 안드로이드 google-services.json 파일을 iOS는 GoogleService-Info.plist 파일을 다운로드하여 Native app 단으로 내려가 몇 가지 설정을 해야 하는 불편함이 있었습니다.  cross platform 이라면 이러한 Native app을 제어해야 하는 부분은 최소한으로 해야 한다고 생각했는데 이제 파이어베이스 설정이 Native app단의 설정 1도 없이 가능하게 되었습니다. 

아래 명령을 통해 flutterfire_cli 를 전역에서 사용할 수 있도록 설정하겠습니다. 

참고) 모든 명령어는 해당 프로젝트 내에서 진행되었습니다.

dart pub global activate flutterfire_cli

이제 파이어베이스 설정 명령을 통해 설정을 진행해보겠습니다. 

flutterfire configure

그렇다면 firebase cli를 통해 연결된 계정의 프로젝트들이 보일 것입니다. 

저는 5개 프로젝트가 이미 만들어진 상태이기때문에 위의 이미지처럼 보여지는 것이며 새롭게 진행하시는 분이라면 가장 하단의 create a new project 만 보일 것입니다. 

이제 방향키를 통해 연결 하고자 하는 프로젝트 혹은 create a new project를 선택하여 진행합니다. 

프로젝트 이름을 생성하면 됩니다. 원하는 이름을 넣으면 되는데 참고로 이때 중복된 이름이 많기때문에 뒤에 고유 숫자를 붙여주는 것이 쉽게 생성하는데 도움이 되실 것입니다. 

그렇다면 프로젝트가 생성되는데 수초가 걸리게 됩니다. 프로젝트가 생성되고 나면 아래와 같이 4가지 플렛폼 선택이 나옵니다. 

디폴트로 android , ios , web 이 설정되어있습니다. 저는 이 포스팅에서는 android , ios 만 진행할 예정이라 web 은 체크를 해제시키겠습니다. 방향키를 통해 web으로 이동한 뒤에 spacebar를 눌러 체크를 해제하고 enter로 다음으로 진행합니다. 

가장 먼저 android 설정이 먼저 진행이 되고 ios 진행이 되는데 android의 경우 이상 없이 프로젝트 설정이 되지만 갑자기 ios bundle id를 물어봅니다. 이유는 android의 경우 _ bundle id에 '_' < 문자가 포함하는 스네이크 문법이 가능하지만 ios에서는 그렇게 허용되지 않아서 다시 한번 물어보는 것입니다. 

com.example.movieApiSample로 카멜 케이스 문법으로 진행해주면 됩니다.

그러면 완료가 될 것입니다. 

완료가 되고 나면 /lib 폴더 아래에 main.dart 이외의 firebase_ooptions.dart 파일이 생성되어있을 것입니다. 

이것을 통해 firebase.init 할때 해당 파일을 연결해주시면 됩니다. 

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

이렇게 되면 설정이 끝이 난 것입니다. 

이제 해당 프로젝트를 android 나 ios 를 돌려주면 이상 없이 실행이 되실 것입니다. 

이제부터는 원하는 firebase 서비스를 마구마구 사용할 수 있다는 사실 ^^

 

위 포스팅에 도움이 되셨다면 공감 한번씩 눌러주시고 ^^ 

또한 구독 해주시면 개발에 관련 제가 공부하고 정리한 내용을 보실 수 있습니다 ~ 

 

마지막으로 위 내용을 영상으로도 남길 예정이라 글이 아닌 영상으로 보고 싶으시다면 

아래 링크를 통해 확인해주시면 됩니다 ^^

개발하는남자

 

감사합니다.