Flutter Web - Firebase Hosting에 배포해보자! 1. Firebase 설정

Flutter가 Web을 지원하기 시작한지도 꽤 되었다.
최근 여러모로 Web이 있으면 유용할 것 같아서 이것저것 알아보고 있었는데,
모바일 개발자로써 React 같은 웹 프레임워크를 배우는 것은 좀 그랬다.
언어부터 시작해서 익숙치 않다보니..?
하지만 Flutter라면 얘기가 다르지.

Flutter 3.0이 배포된 이후로 회사에서도 관심도가 높아졌고,
Google의 Fuchsia도 수면위에 올라오기도 하고,
Flutter의 장점들 때문에 찾는 기업도 많아지고 있다.
그래서 기술적 트렌드를 따라가기 위해 나도 관심이 꽤 가고 있는 상태.

이 상태라면 Flutter도 익숙해질 겸, Web 개발 해보자! 가 된 상태.
아무튼 그래서, Flutter로 개발한 Web을 Firebase Hosting에 올려보기로 했다.

---

1. Firebase Project 생성

https://firebase.google.com/로 이동해서, 프로젝트를 생성하자.

프로젝트 이름은 일단 적당하게 작성했다.
그 이후 설정은 애널리틱스 설정인데, 디폴트로 해도 되고 하지 않아도 무관.

---

2. Web Hosting 설정

프로젝트로 이동해서, 좌측 빌드 옵션의 Hosting으로 진입한다.
그리고 시작하기를 눌러주자.
자세히 알아보기를 통해 문서를 한 번 읽어보는 것도 좋다.

시작하기를 누르면 가장 먼저 Firebase CLI를 설치해야 한다.
npm이 필요하므로, Node.js를 먼저 설치해야 한다.
https://nodejs.org/ko/ 로 이동해서 LTS 버전 설치를 권장한다.

작업을 Windows에서 하고 있긴 하지만, Mac에서도 대충 위와 같은 결과가 나온다.
이제 다음 설정으로 가보자.

처음 설치했다면, 'firebase login' 명령어로 인증을 먼저 해 주어야 한다.

명령어를 치면 Yes or No로 대답하는 질문이 하나 나온다.
대답을 하고 나면 Firebase 인증을 위한 구글 로그인이 두둥등장!

나는 계정이 여러개가 있어서..
무튼 본인이 프로젝트를 생성한 계정을 선택해주면 된다.
그리고 권한을 허용하고 나면..!

성공!

이제 'firebase init' 명령어를 수행할 것인데,
그 전에, 본인이 프로젝트를 생성할 디렉토리로 이동하자.
그렇지 않으면 현재의 디렉토리에 설정된다.

이런식으로 시작이 된다.
Y를 눌러주자.

우린 Hosting 서비스를 이용할 것 이므로, 방향키를 움직여서 Hosting을 찾아주자.
Hosting도 여러개가 있는데, 우린 Github Action만을 위한 것이 아니므로,
'Configure filse for Firebase Hosting ...'을 선택하자.
다른 서비스들도 나중에 사용할 수 있으므로 신경쓰지 않아도 된다.

선택을 완료하면 프로젝트를 선택하게 된다.
우린 이미 프로젝트를 생성했으므로, 'Use an existing project'를 선택하고,
가장 먼저 생성했던 프로젝트를 골라주자.

예전에 했던 프로젝트들 이름도 보이니 반갑다.
아무튼, 'Flutter-Web-Hosting' 프로젝트를 선택했다.

이러쿵 저러쿵 하는데, 적당히 엔터 누르면 된다.
이제 다음 스텝으로 가보자.

---

3. Firebase Hosting에 배포하기

'firebase deploy' 명령어를 사용해보자.

이런저런 로그가 출력되더니 배포가 완료되었다.
완료 후 Hosting URL에 접속해보자.

URL로 접속했을 때 위와 같은 화면이 나온다면 성공이다!

이제 다음 포스팅에서 Flutter 프로젝트를 생성하고 배포할 것이다.
렛츠고~