티스토리 뷰
Flutter web(HummingBird) + Firebase Hosting, 파이어 베이스로 플러터 웹 호스팅 하기
Henry95 2021. 4. 6. 21:49지난달 2021년 3월 플러터 2.0이 나오면서 그동안 베타 버전으로만 나와있었던 Fluter Web(HummingBird)이 정식으로 지원하게되었다.
그동안 올릴건 많았지만 시간을 내서 따로 글을 작성해 올리기가 귀찮았던 나는 이번 기회에 다시 성실하게 블로그 포스팅을 해보려고 한다 ㅎㅎ..
이번에 작성할 주제는 새로 지원하는 플러터 웹 프로젝트를 만들고 그것을 파이어베이스로 호스팅해보는것을 진행 할 것이다.
플러터와 IDE가 깔려있지 않다면 설치 한 후 진행 해주길 바란다.
(본인은 Intellij를 사용하지만 중요하지 않고 Android Studio 혹은 VScode 등의 Flutter를 지원하는 IDE를 설치하면 된다.)
우선 우리는 프로젝트를 생성해야한다. IDE에서 바로 생성해도 되고 아래와 같이 터미널에서 원하는 경로로 이동한 후 명령어를 입력해도 된다.
humming_bird_web은 내가 지정한 프로젝트 이름이다. 각자 flutter create 뒤에 원하는 프로젝트 명을 입력한다.
$ flutter create humming_bird_web
그러면 위와 같이 새로운 프로젝트가 생성될것이다.
이런식으로 좌측 프로젝트 경로에 lib, android, ios, web 폴더가 각각 존재하는 프로젝트가 생성되어야 한다.
만약 web폴더가 생성되지 않았다면 프로젝트 경로에서 아래의 명령어를 사용해보고 그래도 안된다면 플러터 버전을 확인해보자
$ flutter create .
여기까지 완료했다면 테스트로 로컬에서 웹사이트를 실행시켜보자, IDE상단의 <no device seleced> 라고 되어있는 부분을 클릭하고 Chrome(web)을 선택한다.
그리고 오른쪽의 초록색 화살표를 눌러 run을 시키면 아래와 같이 로컬에서 실행된 나의 웹페이지를 볼 수 있다.
앱을 만들때와 같은 코드를 베이스로 하고있기 때문에 프로젝트 생성시 만들어지는 기본 화면도 같다.
자 그럼 프로젝트의 준비는 끝났으니 파이어 베이스를 준비할 차례이다. 아래의 주소로 이동해 우측 상단의 콘솔로 이동을 클릭하자.
구글아이디가 로그인 되어있다면 별도로 로그인을 하지 않아도 된다.
Firebase
Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.
firebase.google.com
이어서 프로젝트 추가를 선택해 새로운 프로젝트를 만들어준다.
이름은 고유하게 지어야하니 자신이 식별할 수 있는 이름으로 짓는다.
구글 애널리틱스를 사용해서 손해볼건 없기때문에 기본값 그대로 두고 계속을 누른다.
계정은 디폴트 어카운트로 두고 프로젝트 만들기를 누른다.
이런식으로 게이지가 차오르면서 완료되면 프로젝트가 생성된다.
이 화면에서 중간에 앱을 추가하여 시작하기를 누르는데 우리는 웹을 다룰것이기 때문에 웹을 선택한다.
우리는 호스팅을 할것이기 때문에 아래와 같이 앱 닉네임을 적어준 후 호스팅 설정에 체크한다.
앱등록을 누르면 이어서 Firebase SDK 추가를 할수 있다고 나온다 복사를 해준다.
복사해준 코드를 우리의 프로젝트 /web/index.html 에 <body>와 </body> 사이에 붙여 넣는다.
자 그럼 터미널로 가서 아래 코드를 복사하고 파이어베스를 사용할 수 있도록 도구들을 설치해주자
난 이미 깔려있어서 설치가 아니라 업데이트가 되었다.
자 이제 위 코드들을 순서대로 실행할 순서이다.
$ firebase login
파이어베이스 로그인 명령을 실행하면 웹창이 하나 뜨면서 로그인을 요구할 것이다. 그럼 로그인을 해준다.
$ firebase init
설정을 해주는 부분이다.
데이터 베이스, 호스팅 등 사용할 기능들을 선택하는 부분이다. 우리는 지금 호스팅만을 사용할 것이기 때문에 방향키로 아래로 내려서 스페이스바를 사용하여 선택한 후 엔터를 누른다.
기존의 프로젝트를 사용할 것이기 때문에 use an existing project 를 선택한다.
그러면 파이어베이스 프로젝트 목록이 나오는데 우리는 아까 만들어준 humming-bird-web을 사용할것이다.
그 다음엔 나의 퍼블릭 폴더를 설정하는 곳이 나오는데 build/web을 입력해준다. //기본값은 public폴더를 생성해서 저장한다.
이후 항목들은 각각 y, n을 입력하고 작업을 마친다.
이후 프로젝트로 돌아가보면 build폴더, firebase.json 등의 파일들이 생겨나있을것이다.
이제 아래 명령어를 입력해주면 최소 사이트 생성이 완료된다.
$ firebase deploy
확인을 위해 Hosting URL인 humming-bird-web.web.app/ 주소로 이동한다. 아래와같이 준비가 잘 된것을 볼 수 있다.
호스팅한 웹사이트를 들어갈때에는 파이어베이스 콘솔 -> hosting -> 도메인중 .com 으로 끝나는것으로 들어가도록 한다.
하지만 아직까지 우리가 처음에 봤던 플러터 데모 화면이 아니다 주소에 반영을 해주어야 하기때문에 아래의 명령어 들을 순서대로 적용한다.
$ flutter build web //배포할 파일을 빌드한다.
$ firebase deploy --only hosting //적용
순서대로 실행하고 나면 아래와 같이 정상적인 화면이 나온다.
오늘은 파이어베이스를 사용한 플러터 웹사이트 호스팅을 알아보았다.
플러터와 파이어베이스를 조합하면 여러가지 재미있는 일을 할 수 있을거같다.
앞으로도 개인프로젝트를 하게 되면 파이어베이스를 좀 더 사용해 봐야겠다 ㅎㅎ
'Tutorial' 카테고리의 다른 글
| Node.js +Android Studio(Kotlin) 채팅 구현하기(2) (3) | 2019.09.21 |
|---|---|
| Node.js +Android Studio(Kotlin) 채팅 구현하기(1) (2) | 2019.09.20 |
| Django + mySQL + Android Studio , 프로젝트 생성부터 retrofit 예제 까지 step by step(3) (1) | 2019.09.07 |
| Django + mySQL + Android Studio , 프로젝트 생성부터 retrofit 예제 까지 step by step(2) (2) | 2019.09.07 |
| Django + mySQL + Android Studio , 프로젝트 생성부터 retrofit 예제 까지 step by step(1) (0) | 2019.09.07 |
- Total
- Today
- Yesterday
- node.js
- WAS
- CHANNELS
- Android
- 플러터
- Kotlin
- 해결
- 안드로이드
- password
- DART
- 에러해결
- github
- socket.io
- 코틀린
- chatting
- RecyclerView
- django server
- Django
- mysql
- springboot
- flame
- 에러
- Git
- Android Studio
- Tutorial
- 안드로이드스튜디오
- flutter
- redis
- 알고리즘
- Hummingbird
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |