Flutterから利用できるFirebaseサービスをカウンターアプリで実践(Hosting編)
はじめに
Flutterから利用できるFirebaseの機能をカウンターアプリに実装し、内容をまとめたシリーズの第13回目です。
今回はウェブアプリ、静的コンテンツ、動的コンテンツ、マイクロサービス向けにホスティングができるFirebase Hostingについてです。 Flutterアプリをwebアプリとしてホスティングしたい場合に使用できます。
目次
シリーズの内容
| 回数 | 内容 | リンク |
|---|---|---|
| 第0回 | 準備編 | ブログ |
| 第1回 | Analytics |
ブログ |
| 第2回 | Firebase Crashlytics |
ブログ |
| 第3回 | Firebase Performance Monitoring |
ブログ |
| 第4回 | Firebase Remote Config |
ブログ |
| 第5回 | Firebase Authentication |
ブログ |
| 第6回 | Cloud Firestore |
ブログ |
| 第7回 | Firebase Realtime Database |
ブログ |
| 第8回 | Cloud Storage for Firebase |
ブログ |
| 第9回 | Firebase Cloud Messaging |
ブログ |
| 第10回 | Firebase In-App Messaging |
ブログ |
| 第11回 | Firebase ML |
ブログ |
| 第12回 | Cloud Functions for Firebase |
ブログ |
| 第13回 | Firebase Hosting |
イマココ |
| 第14回 | Firebaseのその他のサービス | ブログ |
開発環境
| 項目 | 内容 |
|---|---|
| PC | Macbook Air(M1) |
| Flutter | 3.0.1 |
| Firebase | 11.0.1 |
| FlutterFire | 0.2.2+2 |
| デバッグデバイス | Android 12(APIレベル31), Chrome |
準備
準備編が完了出来ているものとします。
導入方法
Firebase Hostingにデプロイする方法は2種類あります。
- コマンドを入力してデプロイ
- Github Actionsを利用してデプロイ
今回は、コマンドを入力してデプロイする方法を選択しました。
Firebaseプロジェクトを作成し、Firebase CLIをインストールした後、プロジェクトを初期化します。
firebase init hosting
質問と回答例は以下の通り。
? What do you want to use as your public directory? (public) build/web ? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) No ? Set up automatic builds and deploys with GitHub? (y/N) No
web向けの設定をします。
web/index.htmlでは、htmlの<head>の設定をします。
web/manifest.jsonでは、webアプリの挙動やアイコンの設定をします。
アプリのアイコンは、web/iconsディレクトリに含まれるファイル(Icon-192.pngなど)を上書きすれば、変更できます。
このときサイズの間違えには注意してください。
アプリのデバッグを終えたら、Flutter側でアプリをビルドし、Firebaseでデプロイします。
flutter build web firebase deploy --only hosting
デプロイ後に出てくるURLにアクセスし、アプリが確認できたら完成です。
... Project Console: https://console.firebase.google.com/project/***/overview Hosting URL: https://***.web.app
なお、カスタムドメインを使用する場合はFirebase Consoleから設定できます。
コード全文
前回からは変更点なしです。
GitHubのページを貼ります。
