Flutter 웹에서 Firebase사용시 오류 해결법

요즘 회사에서 Flutter Web Build를 하고있어서 정말.. 매일매일이 오류대잔치다.

 

Flutter Web에서 Firebase를 사용할땐 firebase_core 초기화시 웹 전용 FirebaseOptions를 반드시 명시해야 한다고 한다.

모바일 앱에서는 google-services.json (Android) 또는 GoogleService-Info.plist (iOS) 파일을 사용하는데

이 파일들이 앱 번들에 포함되어 Firebase가 자동으로 설정을 읽어온다.

따라서 firebase-options.dart 파일 없이도 앱이 작동한다.

 

그러나 웹에서는 firebase-options.dart 파일이 반드시 필요하다.

웹에서는 네이티브 설정 파일을 사용할 수 없고 Firebase 설정이 JavaScript 객체로 전달되어야 하기 때문이다.

그리고 index.html 파일에도 아래와 같은 방식으로 Firebase SDK를 입력해주어야 한다.

<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js"></script>

---

 

google-services.json, GoogleService-Info.plist 파일을 통해 일단 다른 값들에 대해 config값들을 가져와 채웠는데

웹 앱 ID 는 직접 Firebase Console에서 가져와야 한다.

 

근데 일단 터미널에서 아래 코드로 테스트 서버를 실행하여 임시로 프로젝트를 실행해볼 수는 있다.

flutter run -d web-server --web-port 8080

 

이렇게 실행된 서버에서 firebase-options.dart 파일이 제대로 로드되는지 확인할 수 있다.

그리고 웹 환경에서의 Firebase 기능 테스트를 해볼 수 있다는데

Firebase Cloud Messaging (FCM)이 웹에서 작동하는지 확인하고,

구글 로그인 작동확인, 그리고 기타 Firebase 서비스들이 웹 환경에서 정상 동작하는지 확인도 할 수 있다.

 

그리고 웹에서만 발생하는 특정 오류, 문제를 미리 발견하거나 브라우저 콘솔에서 JavaScript 오류를 확인할 수 있다.

 

---

 

이렇게 실행된 서버에 접속해서 아래와 같은 사항들을 테스트해보면 좋다.

 

개발자 도구 콘솔에서 Firebase 초기화 오류나 JavaScript 오류를 확인하고

앱 기능들이 정상적으로 로드되는지, Firebase 기능들이 작동하는지도 확인하면 좋다.

그리고 웹에서만 발생하거나 플랫폼별 차이로 발생하는 것들을 확인해야 한다.