지난 포스팅에서 Firebase Hosting 배포를 위한 프로젝트와 CLI 설정을 마쳤다.
이를 기반으로 Flutter 프로젝트를 Firebase Hosting에 배포해보자.
1. Flutter 프로젝트 생성
본인이 사용하는 운영체제와 IDE를 사용해서 Flutter 프로젝트를 생성한다.
지금은 Firebase Hosting에 배포하는 것이 목적이므로 기본으로 생성되는 프로젝트로 충분하다.
적당히 프로젝트 이름과 설명을 작성한다.
플랫폼은 이 포스팅에선 Web만 선택해도 충분하다.
다른 플랫폼이 필요하면 추가하면 되기도 하고.
2. Flutter 프로젝트에 Firebase 설정
Flutter 프로젝트와 Firebase를 연동하기 위해선 간단한 설정이 필요하다.
Firebase 프로젝트 콘솔로 이동하여 Flutter 앱을 추가하자.
프로젝트 개요의 앱 추가를 누르고 Flutter 로고를 선택한다.
이런 화면이 나오는데,
1단계는 모두 완료되어 있는 상태이다. 다음 단계로 넘어간다.
뭔가 복잡한 커맨드가 있지만, 복붙만 해주면 된다.
첫 번째 커맨드를 수행하고 나면 다음과 같은 문구가 나타난다.
Mac 기준이지만, 환경변수에 저 PATH를 입력해주라는 의미이므로, 꼭 수행해주자.
그렇지 않으면 두 번째 커맨드를 인식하지 못한다.
이렇게 두 번째 커맨드까지 완료했다.
이제 다음으로 이동하자.
이제 Flutter 앱에 Firebase를 초기화해주는 작업이 필요하다.
lib/main.dart로 이동하여, main() 함수에 코드를 추가해야 하는데,
그 전에 'flutter pub add firebase_core' 커맨드를 사용해서 Firebase 패키지를 추가해줘야 한다.
패키지 추가 후, 아래와 같이 코드를 작성하자.
여기서, async - await을 사용해야 함을 주의해야 한다.
이제 Firebase 앱 설정까지 완료되었다.
3. Flutter WebApp 빌드하기
이제 다 왔다.
Firebase Hosting에 배포하기 위한 Flutter WebApp을 빌드하자.
빌드 된 Flutter 웹앱이 Firebase에 접근하기 위해선 한 가지 설정이 필요하다.
프로젝트 설정으로 이동해서 일반탭의 최 하단으로 이동하여 다음과 같은 설정을 확인한다.
CDN에 나와 있는 부분을 복사한다.
그리고 web/index.html로 이동하여 <head></head> 사이에 복붙해주자.
그리고 flutter build web 명령어를 수행하여 Flutter WebApp을 빌드하자.
정상적으로 수행되면, 요런 폴더가 프로젝트에 생성된다.
이제 build/web 폴더가 우리의 Flutter WebApp의 결과 디렉토리가 된다.
이제 이 디렉토리를 대상으로 Firebase 프로젝트 설정을 수행해보자.
4. Flutter WebApp 배포하기
이전 포스팅와 같이 firebase init 커맨드를 수행하여 프로젝트 설정을 해 주어야 한다.
이전 포스팅와 다른 점은 경로 입력 시 build/web 을 꼭 해 주어야 한다는 것이다.
그리고 이미 Flutter 프로젝트의 빌드를 수행했기 때문에 build/web/index.html가 이미 존재한다.
덮어쓰기를 No를 해야하지만, Yes를 했다면 Flutter WebApp을 다시 빌드하면 된다.
여기까지 마쳤다면 firebase deploy 커맨드를 수행하고,
완료 후 URL로 접근해보자.
기본으로 생성되는 Flutter 프로젝트가 나타난다면 성공!
이제 자신만의 Flutter WebApp을 빌드해서 Firebase Hosting을 이용하여 배포해보자.
'Development > Flutter' 카테고리의 다른 글
| Flutter - Firebase Firestore 연동 - 데이터베이스 접근과 읽기/쓰기 (0) | 2023.01.14 |
|---|---|
| Flutter Web - Chrome에서 개발하기 (0) | 2023.01.14 |
| Flutter Web - Firebase Hosting에 배포해보자! 1. Firebase 설정 (0) | 2023.01.08 |
| Flutter 라우팅 패키지 - go_router (0) | 2023.01.01 |
| Flutter 3.0 릴리즈! - 이제 진짜 할 때가 됐다. (0) | 2022.05.15 |
