(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/#/
4. 기타
웹앱에서 새로운 탭으로 url을 열 때 (webapp open url on new tab)
import 'dart:html' as html;
// ...
html.window.open('https://stackoverflow.com/questions/ask', 'new tab');
웹앱에서 assets 의 이미지가 안보일 때
pubspec.yaml:
assets:
- assets/images/
test: 테스트 시에는 다음과 같아야 이미지가 보임
Image.asset("images/logo.png");
deploy: 사이트에 deploy 시 다음과 같아야 이미지가 보임
Image.asset("assets/images/logo.png");
'기타 > Flutter' 카테고리의 다른 글
[Flutter] 플러터 null safty와 ? ! 이해 (물음표, 느낌표) (0) | 2022.09.28 |
---|---|
[Flutter] 플러터 앱 아이콘(icon) 변경하기 (0) | 2022.08.31 |
댓글