Flutter Firebase Hosting 연동

🚧 해당 글은 Mac을 기준으로 설명하고 있습니다.

1. Firebase 프로젝트 만들기 및 설정하기

Firebase 콘솔로 이동하여 새 프로젝트를 만들어 줍니다.

프로젝트 추가 후로는 프로젝트 이름만 설정 후 쭉 버튼만 눌러주시면 됩니다.

오른쪽 상단의 빌드 탭을 누르면 보이는 Firebase Hosting을 클릭 후 시작하기 버튼을 눌러줍니다.

이후 나오는 안내 화면의 설정 순서를 따라 연결을 진행합니다.

프로젝트 바로 가기의 경우 클릭하기 전까지 보이지 않습니다!

첫 번째 과정

Firebase CLI를 설치하려면, Node.js가 필요합니다!

Node.js를 설치되어 있지 않다면, https://nodejs.org/ko/ 에서 설치할 수 있습니다.

이후 터미널에서 아래 명령어를 입력해 주시면 됩니다.

npm install -g firebase-tools

두 번째 과정

firebase login 의 경우 터미널에서

firebase init 의 경우 프로젝트 터미널에서 진행 해 주세요.

📢 firebase init 시에 터미널에서 아래와 같이 뜨게 되는데
설명이 적혀있다시피 space를 눌러 주어야지 선택됩니다.

그냥 위아래로 이동 후 space 누르지 않고 엔터를 누르게 되면 에러가 발생하니 참고해 주세요!

호스팅 엔터 이후에는 아래와 같이 어떤 프로젝트로 진행할지 설정이 가능합니다.

이미 프로젝트를 만든 후이니 첫 번째를 선택해 주세요.

이후에는 자신의 프로젝트 리스트가 나오니, 자신이 호스팅 프로젝트를 선택해 주세요

배포 디렉토리를 public으로 할지에 관한 질문이 들어옵니다.

별도로 입력하여도 괜찮습니다! 일단락 저는 엔터를 눌러 public으로 설정하도록 하겠습니다.

나중에 firebase.json에서 변경도 가능합니다.

single-page-app 구조와 github 자동 빌드 배포의 경우 필요에 따라 답변하도록 합시다.

그렇게 된다면… 설정 완료!

Firebase Web에서도 다음 버튼을 눌러줍니다.

아래 화면이 나왔다면 배포를 위한 Firebase 설정은 전부 진행된 것입니다.

그럼 이 상태에서 프로젝트 터미널에서 firebase deploy 를 실행하고 나온 URL로 들어가 볼까요?

Flutter 프로젝트에서 설정한 화면이 아닌, 위와 같은 화면이 나옵니다.

저희는 어디까지 Firebase 설정만을 완료하였거든요. 🥹

2. Flutter Web 애플리케이션 빌드하기

Flutter Web 애플리케이션을 빌드 하기 전에 몇 가지 설정을 변경해 줘야 합니다.

🚨 배포 디렉토리 설정을 build/web으로 진행하셨다면 아래의 설정 변경은 진행하지 않으셔도 괜찮습니다!

프로젝트의 firebase.json 파일에 들어가면 아래와 기본 설정이 되어있습니다.

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

이 중 public을 아래와 같이 변경합니다.

"public": "build/web"

---

이후 Flutter Web 애플리케이션을 flutter build web 명령어를 사용하여 빌드합니다.

해당 명령어는 웹 애플리케이션을 build/web 폴더에 생성합니다!

빌드한 앱을 웹에 적용하기 위해 다시 firebase deploy 를 진행하신다면

배포된 애플리케이션을 Firebase Hosting URL을 통해 확인할 수 있습니다!

첫 빌드가 적용되는 데에는 시간이 걸릴 수 있으니 주의하세요!