1. [Firebase] 시작하기 (Flutter와 Firebase 연동)

Flutter 앱에 Firebase 를 사용하여 API Server와 DB를 구성하려고 한다면 다음과 같이 진행해주세요.

---

 

Window용 Firebase CLI 설치하기 

-링크: https://firebase.google.com/docs/flutter/setup?hl=ko&platform=ios 

Flutter 앱에 Firebase 추가

 

1) 링크로 들어가서 Node.js를 먼저 설치해줍니다.

Node.js 설치

 

2) 추천 버전과 최신 버전 중 추천 버전을 클릭하여 설치합니다.

좌측 추천버전 클릭 후, 설치

 

3) 다시 설치 홈페이지로 돌아와서  Windows용 Firebase CLI 바이너리를 다운로드합니다.

CLI 설치

---

4) 터미널에서 Firebase 명령을 쉽게 사용하기 위해 아래와 같이 시스템  환경 변수를 편집합니다.

firebase설치경로를 확인

시스템 환경 변수 편집

환경변수> 시스템 변수 > Path 편집 > Firebase 경로 추가

※사용자에 대한 사용자 변수 Path에도 추가해주세요.

---

5) firebase-tools-instant-win을 눌러 CLI 실행후 로그인해줍니다.

 

Firebase CLI 로그인

연결 완료

로그인 성공

 

6) 아래 명령어로  Firebase 프로젝트를 생성하거나 Firebase 홈페이지에서 프로젝트를 생성합니다.

firebase projects:create 프로젝트명

 

 

---

7) 생성완료 후 flutter 앱을 추가해줍니다.

프로젝트 클릭 > flutter 앱 추가

 

 

 

 

8) flutter console을 실행하여 아래 명령어들을 실행해줍니다.

- flutter SDK 설치방법: https://mroh1226.tistory.com/61

1. [Flutter] 개발환경 구축하기 (Flutter SDK 설치 및 Visual Studio Code 연동하기)

 

9)  firebase_core 플러그인을 설치합니다.

-설치링크: https://pub.dev/packages/firebase_core/install

firebase_core | Flutter Package

 

 

10) flutter 터미널에서 아래 명령어를 실행합니다.

$ dart pub global activate flutterfire_cli

 

그 다음 Flutter 프로젝트 디렉토리로 이동하여 아래 명령어를 실행합니다.

$ flutterfire configure

프로젝트 생성완료

---

오류1. 

아래 오류가 발생할시, 환경변수에 C:\Users\유저명\AppData\Local\Pub\Cache\bin 을 추가해주세요. 

Warning: Pub installs executables into C:\Users\PC\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.
Activated flutterfire_cli 0.2.7.

 

 

 

오류2.

아래와 같이 오류가 나온다면 firebase cli에서 node scripts/postinstall 를 입력하여 해결해주세요.

오류 메세지

 

node scripts/postinstall 완료

 

위 과정을 완료하신 후 재부팅하고 다시 flutterfire configure 명령하시면 됩니다.

---

10)  flutterfire configure 명령후 firebase 프로젝트를 선택하거나 새로 만들어서 연결합니다.

※중간에 OS (android, ios, web..)를 선택하는 부분이 나오는데 방향키와 엔터로 선택해주시면됩니다.

 

---

11) 프로젝트로 돌아와서 main.dart의 main 함수에 아래 소스를 추가해주면 빌드가 성공하면서 연동완료가 됩니다.

 

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

 

※기존에 노마드코더에서 수강한 WebToon 클론코딩에 연동해보았습니다.

빌드 성공