[Flutter] webapp website firebase hosting (웹앱 웹사이트 파이어베이스 호스팅하기)

(220926 업데이트) 

직접해보니 매우 간단했습니다. 웹을 빌드 → 배포를 어디다 할 지 선정하시면 됩니다. 저는 파이어베이스에 올리기로 선택하였습니다. 

 

---

1. 웹을 빌드하고 Github 깃허브로 배포하기

소스코드는 깃허브에서 관리하지만 웹페이지만 읽을 수 있도록 하기 위해 깃허브에 배포하는 것보다 파이어베이스에 올리기로 선택하였습니다. 

 

[플러터] 웹을 깃허브로 배포 및 호스팅 하기

 

1-1. IDE의 터미널에서 아래의 내용들을 입력 

flutter channel master
flutter upgrade

플러터도 게임의 베타서버와 같이 개발채널, 안정화채널 같은 것이 있으며 master 채널은 안정화된 배포채널이라고 생각하면 된다고 설명되어있습니다. 플러터 웹은 개발이 한창 진행중이며 개발 채널의 플러터 버전이라면 웹이 불안정할 수 있으므로 위의 명령어를 진행하길 추천합니다. 

 

1-2. 플러터 웹 개발하기 위해 활성화

flutter config --enable-web
flutter devices

 

1-3. 웹으로 빌드

flutter build web

 

---

2. Flutter web firebase 에 올리기, 코딩파파

 

친절하게 설명해주시는 코딩파파님, 덕분에 플러터로 개발한 간단한 웹앱을 배포하고 접근 할 수 있게 되었습니다. :) 영상이 길지 않으니 직접 유튜브를 보시는 것을 추천합니다.

 

참고) 프로젝트가 존재하고 업데이트 할 경우 

firebase deploy --only hosting

 

이렇게 나오면 성공이고 맨 아래 URL을 클릭하면 웹앱으로 이동합니다

---

3. 파이어베이스 배포 결과

https://web-course-overview.web.app/#/

web_course

 

 

---

4. 기타 

 

웹앱에서 새로운 탭으로 url을 열 때 (webapp open url on new tab)

 

How do I open an external url in flutter web in new tab or in same tab

 

import 'dart:html' as html;

// ...

html.window.open('https://stackoverflow.com/questions/ask', 'new tab');

 

웹앱에서 assets 의 이미지가 안보일 때 

 

Flutter web asset images not displaying when deployed to web server

pubspec.yaml:

  assets:
    - assets/images/

test: 테스트 시에는 다음과 같아야 이미지가 보임

Image.asset("images/logo.png");

deploy: 사이트에 deploy 시 다음과 같아야 이미지가 보임

Image.asset("assets/images/logo.png");