[Flutter] 플러터 웹 배포하기(feat.Fireabse hosting)

 

안녕하세요 Foma 👟 입니다!

 

오늘은 파이어베이스 호스팅 통해 플러터로 만든 웹을 배포하는 방법에 대해서 정리하려고 합니다.

 

바로 시작할게요~

---

플러터 프로젝트 생성

 

비쥬얼 스튜디오에서 cmd + shift + p 를 눌러서 새로운 플러터 프로젝트를 생성해줍니다.

 

---

Firebase Hosting

 

터미널로 이동해서 아래와 같이 파이어베이스 툴을 설치해줍니다.

 

sudo npm install -g firebase-tools

 

 

파이어베이스 호스팅 초기 설정을 해줍니다.

 

firebase init hosting

 

1. Create a new project

 

새로운 프로젝트를 파이어베이스에 만들어줍니다.

 

2. Google Cloud project id

 

원하는 이름으로 정해줍니다.

 

3. 원하는 프로젝트로 아이디로 설정

 

아래와 같이 build/web - no - no 로 설정해줍니다. (반드시 public 디렉토리는 build/web 으로 해주셔야합니다!)

 

 

그리곤 파이어베이스 호스팅에 배포해줍니다.

 

firebase deploy --only hosting

 

이렇게 하면 배포가 완료됐다고 하면서

 

 

아래에 웹사이트 주소가 뜰거에요!

 

해당 url로 이동하면 아래와 같이 호스팅 셋업이 완료됐다고 뜹니다!

 

 

하지만 플러터 기본세팅 앱이 뜨도록 만들어야겠죠?

 

아래 명령어를 쳐서 웹을 빌드해줍니다.

 

flutter build web

 

firesbase.json 파일로 이동해서

 

 

 

아래와 같이 public 부분을 build/web으로 바꿔줍니다. 

 

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

 

다시 파이어베이스에 배포해줍니다.

 

firebase deploy --only hosting

 

배포가 완료되고 다시 웹사이트로 이동하면 아래와 같이 기본 플러터 웹을 볼 수 있습니다!

 

---

오늘은 이렇게 플러터와 파이어베이스 호스팅을 통해서 웹을 배포해보는 방법을 알아보았습니다.

 

다음 포스팅은 파이어베이스 호스팅에서 개인 도메인을 적용시켜

 

정말 자신만의 웹사이트를 등록하는 방법에 대해 정리하도록 하겠습니다!

혹시라도 틀린 점이나 궁금하신 부분이 있으면 언제든 댓글로 알려주세요!