[플러터2.0] 파이어베이스를 이용하여 웹 앱 배포하기 (PWA)

이제 플러터를 이용하여 웹까지 지원을 하고

웹에 맞게 최적화까지 끝났으면 배포를 해서 전세계에서 자랑할 차례입니다

무료로 호스팅을 해줄수 있는곳 중 가장 인기 있는 서비스는 크게 두가지입니다.

• firebase hosting
• github pages

이 글에서는 firebase를 이용해서 hosting하는 법을 알려드리겠습니다

 

시작하기 전에 현재 프로젝트가 웹을 지원하도록 설정해주세요! (만약 안되어있으면 여기 참고해주세요)

 

 

먼저 Firebase CLI 부터 설치를 합니다

터미널에서 npm install -g firebase-tools 을 실행합니다

만약 npm도 안깔려있다면

(맥 사용자라면)

brew install node 를 실행해서 설치해줍니다

firebase --version 명령어를 통해 제대로 설치가 되었는지 확인할수 있습니다.

 

CLI를 설치한 후에는 로그인을 해서 인증해야 합니다.

firebase login 명령어를 실행하여 Google 계정으로 Firebase에 로그인합니다.

• 이 명령어는 로컬 머신을 Firebase에 연결하고 Firebase 프로젝트에 대한 액세스 권한을 부여합니다.

firebase projects:list 명령어를 이용하여 Firebase 프로젝트를 나열하여 CLI가 올바르게 설치되었는지 확인할수 있습니다.

 

 

이제 firebase 프로젝트를 생성해야합니다.

firebase init hosting 입력 후

뒤이어서 각종 질문이 나오는데, 다음 과같이 선택하면 됩니다.

• Project setup: Create a new project
• What project name? [yourname]-my-flutter-app (유니크해야합니다!)
• What to call your project? Return (which is the same as the name used in the previous question).
• What public directory? build/web (매우 중요!!!)
• Configure as a single page app? Yes
• Set up automatic builds and deploys with GitHub? No

init이 다 마무리 되면 두가지 파일이 프로젝트에 추가 되었있는것을 확인할수 있습니다.

• firebase.json, (configuration 파일)
• .firebaserc, (project data 담고있음)

 

다음으로 앱을 빌드합니다.

flutter build web --release 명령어를 치고

build/web 디렉토리가 생성된것을 확인해줍니다

 

 

마지막으로 배포합니다!

firebase deploy 를 쳐줍니다.

배포가 완려 되었으면, 콘솔에서 알려주는 url에 접속해봅니다!

(https://flutter-web-2021.web.app/#/ 홍보할게요 ㅎㅎ)

 

 

PWA(Progressive web applications)

PWA란 ?

• 웹 애플리케이션으로 알려진 웹 페이지 또는 웹사이트의 일종이기 때문에 개발자나 사용자가 애플 앱 스토어나 구글 플레이와 같은 디지털 배급 시스템을 통해 웹 앱을 설치할 필요가 없다

플러터의 장점은 PWA를 default로 제공한다는것입니다

제가 만든 웹앱을 예시로 보여주자면

즖겨찾기 버튼 옆에 아이콘이 하나있는데,

이 아이콘이 떴다면 PWA도 지원된다는 뜻입니다!

 

 

참고 자료

https://www.youtube.com/watch?v=HAstl_NkXl0