【Flutter Web】Firebase Hosting でWebアプリをデプロイ(リリース)する
概要
「Firebase Hosting」でWebアプリをデプロイして見たので備忘録を記す。
Flutter Webでビルドしたものを前提としているが、その他、単に”Firebase Hostingでデプロイする手順を知りたい”という人にも役に立つであろう。
FlutterでWeb用ビルドの仕方
Webアプリのリリースにおけるアイコン作成
Webデプロイにおける設定ファイルの記述
Firebaseについて
Firebase Hostingでのデプロイ手順
PWA(Progressive Web Apps)について簡単に
などを記載した( アプリのコード自体は完成しているものとする )
●デプロイしたアプリ
色々と機能をごっちゃ混ぜしたデモ用のメモアプリである📝
すっげー適当に作ったアプリなので、軽く遊んでやって欲しい。
なお、このメモアプリの解説の記事も後日、書く予定だ🖋️
なお「デプロイ」と言う単語を使っているが
デプロイ:取り敢えずアップして、関係者が見れる(動作確認など)ようにする
リリース:一般ユーザーへの公開リリース
と言う認識である。
●検証環境
検証環境は以下の通り
●参考になったサイト
起動アイコン
起動アイコンについて
リリースにおいて、Webの場合はスマホアプリと比べ、準備するものが非常に少なくて済む。
しかも、何と言っても「審査」が無いのは大きい。
必須としては、起動アイコンを用意しデフォルトのものと入れ替えることだろうか。
さらに今回はデモ版なので「多言語対応」も無しとする。
web をみると5ファイルあるので、これを差し替えれば良いわけか。
・web 内
favicon.png
→ Webページにいてお気に入りやタブでよく表示される極小のアイコン。
・web - icons 内
Icon-192.png、Icon-512.png、Icon-maskable-192.png、Icon-maskable-512.png
→ PWAでホーム画面に追加された際の起動アイコン。maskableが付くものは、Androidでいう「アダプティブアイコン」に該当する。
●アダプティブアイコン
スマホのホーム画面に表示されるアプリの起動アイコン。
四角 → 角丸 → まん丸 てな感じで、時代を重ねるごとに形状が丸くなっていっている。
よって、円形になってもはみ出ないよう、余白のある画像にする必要がある。
・詳細は下記のサイトで確認してください
起動アイコンを作成する
●今回はCanvaでチャレンジ
アイコンの作成だが、絵なんて描いたことないんですよね〜。
さて、どうしたものか。
そうだ『Canva』で試してみよう🎨
・テンプレート
「正方形」で検索し、適当なテンプレートを見つけ、空っぽにして作成していく。
・素材
背景の素材として「メモ帳」で検索
これが良いかな
素材の一部として「鉛筆」で検索
素材の一部として「リスト」で検索
円形アイコンになった場合の余白を考慮しながら配置していく。
エンジニアなので、デザインセンスがアレなのはご容赦を😉
ちなみに、有料版に加入すると、ダウンロードの際にサイズ変更が出来るらしい。
リサイズする
Android/iOSの場合、Flutterのパッケージでツールが用意されているらしいが、Webの場合それが無いので自力でリサイズする。
favicon.png は0.14cm x 0.14cm、解像度は300
Icon-192.png は192ピクセル x 192ピクセル、解像度は300
Icon-512.png は512ピクセル x 512ピクセル、解像度は300
なお「アダプティブアイコン」ついてだが
を使ってみたが、エクスポートしても結局四角いまま❓だったのでやめた。
私が使いこなせてないだけかも知れんし、まあこれは時間のある時にでも調べてみよう。
やっと、アイコンが出来たぜ🖼️
これをデフォルトのものと差し替える。
アプリ側の設定ファイル
●index.html
titleタグやmetaタグ"description"は、検索エンジン関連ではあるが、デモ用なので今回はそのままにする。
<!-- iOS meta tags & icons --> の部分はiOSにおいてWeb Appに関する指定。これも今回はそのままにする。
●manifest.json
manifest.jsonにはPWA(Progressive Web Apps)に関する設定を行う。これも今回はそのままにする。
※「PWA」については別途記事にする予定。
なお、「index.html」や「manifest.json」の細かい部分については、こちらのサイトが参考になった(「OGP設定」についても書かれていた)。
ビルド
$ flutter build web
Web用のビルドをします
build内にwebが出来る。
(web内にbuildではなく、build内にwebが出来ます)
このwebディレクトリ内にあるファイルを全部サーバーに上げれば良いわけです。
Firebase
Firebaseとは
アプリやWeb開発における様々なサービスを提供してくれるプラットフォームである。
●代表的なサービス
サービスはかなりの数があるが、代表的なものをピックアップしてみる
※ データーベースは「Cloud Firestore」と「Firebase Realtime Database」があるが、正直余り分かってなく、適当に書かせてもらった。ただ「Cloud Firestore」の方が新しく、こちらの方が推奨されている。
今回は簡単なデモアプリをデプロイするだけなので「Firebase Hosting」を使用するのみ。
料金
Firebaseは「Spark (無料) プラン」と「Blaze (有料) プラン」がある。
大半のサービスには無料枠が用意されており、ストレージ/通信量が「無料枠」を超える場合は、Blazeプランへ加入する必要がある。
つまり、Blazeプランへ加入していない場合、ストレージ/通信量が無料枠を超え、いきなりサービスが止まるという事も考えられる。
まあ、個人開発やポートフォリオ、デモ用のデプロイとかであれば、無料枠から様子見で良いんじゃないですかね。
ちなみに、私は無料枠しか使う気はない。
Firebase Hosting
Firebase Hostingの料金
今回のデプロイは、メモアプリなのでデーターベースは使うとはいえ、ローカルDB(ユーザーの端末内に保存)なので「Firebase Hosting」だけとなる。特に認証とかも使わないし、
気になる料金であるが
グーグルさん太っ腹すぎぃー🤣
個人開発だと余程のことがない限り無料枠に収まるんじゃないのかな。
グーグルさまさまである✨
プロジェクトの作成
では、早速使っていきましょう。
※ ブラウザ上において、Googleアカウントでログイン済みのものとする
Firebaseの画面構成は変更の頻度が高いです。
本記事の掲載内容は、執筆時点(2024年9月)のものとなります。
●Firebase公式サイト
Firebase公式サイトにアクセスする
「使ってみる」を選択
●新規プロジェクト作成
プロジェクト名を入力します。
今回は「memo-web-demo」とする。
「使用できるのは英字、数字、スペースと次の記号のみです: - ! ' "」らしい。
プロジェクト名を入力すると「一意となるプロジェクトID」が自動算出されます。
規約を読んで問題なければチェックを付けます。
「続行」ボタン押下します。
Google アナリティクスの設定
●Google アナリティクス(Firebase プロジェクト向け)
これを使うと、Webアプリに関する分析レポートを参照出来る
「無料」との事なので、ありがたく使わせてもらう
※ 何らかの理由で、データーを収集されたくない場合は、オフ(使わない)にしておきましょう。
●Google アナリティクスの構成
アナリティクスの地域:「日本」を選択します
ああ、やはり分析データーをGoogleと共有してと出るか
ちなみに、チェックを外すとこんな感じで食い下がってくる
まあ、今回はGoogleと共有(デフォルトのまま)のままとする
「プロジェクトを作成」ボタン押下
「続行」ボタン押下
プロジェクトが作成され、プロジェクトのトップ画面に遷移されます。
『Gemini』のアピール
『Gemini』をアピールしたがっているのが伝わってきます。
下にスクロールし「Hosting」を選択
Hostingのトップ画面
Firebase CLI
「Firebase CLI」をインストールする
ドキュメントを読んでみる
読み進めると「Firebase CLI」(Firebaseで使うコマンドラインツール)のインストールを促される。
方法は、npmやcurlなどがある。
新しく買ったばかりのMacbookAirなので、nodeもnpmも入っていないんですよね。
これだけの為にnodeを導入するのも面倒だ。
$ curl -sL https://firebase.tools | bash
よって、cUrlを使う。
「Firebase CLI」がインストールされる
Firebaseにログインする
早速、Firebaseにログインしたいのですが
$ cd ~/work_flutter/flutter_memo_web_demo
その前にまずはデプロイ対象のFlutterプロジェクト直下のディレクトリに移動しておきましょう。
Flutterのプロジェクト直下に移動
●Firebaseにログイン
$ firebase login
「Firebase CLI」を使い Firebaseにログインします。
” Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.”
と表示されてしまってますね ……
? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?
→ エラー情報の報告をしますか?
「No」にする。
「Visit this URL on this device to log in:」から全然進まないなあ ……
と思いながら、ふとブラウザを見ると
ログインが促されてました。
ブラウザ認証にてGoogleログインする
ターミナルではログイン成功のメッセージが出る
プロジェクトの初期化
$ firebase init
初期設定画面
●フィーチャーの選択
「Hosting」を選択しEnterキー押下
”Error: Must select at least one feature. Use SPACEBAR to select features, or specify a feature by running firebase init [feature_name]”
とエラーになる orz
「スペースキーを押してから選択してね」とのこと。
(これは全角モードでしてたので、数分調査に嵌まった)
「Hosting」を選択し。
スペースキーで選択状態(○の箇所が緑色になる)にさせます(複数選択も可)Enterキー押下
プロジェクトの選択
「Use an existing project」を選択しEnterキー押下
先程のFirebase Hostingで登録したプロジェクトが
選択欄で出てくるはずです(とは言え、まだ1つしか作ってませんが …… )
? What do you want to use as your public directory?
→ これは公開ディレクトリの指定となります。
「build/web」 と入力します
? Configure as a single-page app (rewrite all urls to /index.html)?
→ SPA(シングルページアプリケーション)として、全部のURLを「index.html」上書きするか? と聞かれます
「No」にします
? Set up automatic builds and deploys with GitHub?
→ GitHubと連携して自動ビルドとデプロイをしますか? と聞かれます
「No」にします
? File build/web/index.html already exists. Overwrite?
→ build/web/index.htmlはすでに存在してますけど、上書きしても良いですか?
いや、今回のWebアプリは、Firebase仕様のindex.htmlを上書きしたら動かなくなるから😂
てことで、「No」にします
プロジェクトの初期化が完了します
デプロイする
$ firebase deploy
Webアプリをデプロイしましょう
「Hosting URL:」に注目。
先程も述べましたが、https://プロジェクトID.web.appがWebアプリのデフォルトURLになります。
ブラウザ(Google Chromeが良い)を開き 「https://memo-web-demo-c303e.web.app」にアクセス
うぉーー‼️無事にデプロイされている〜🌐
カスタムドメイン(またの機会にする)
今回は、デモ用アプリのデプロイ検証なので、 カスタムドメインについては、またの機会にします。
Firebase Hostingでカスタムドメインの設定方法は公式参考にすると良いでしょう
大まかな流れとしては
になると思います。多分。
まあ、機会があればこれも記事にしたい🖋️
ログアウト
$ firebase logout
ログアウトのコマンド
ログアウトされます。
PWA(Progressive Web Apps)
Flutter WebのビルドではPWA(Progressive Web Apps)にしてくれます。
スマートホンから「Google Chrome」でアクセスすると
メニュー項目に 「アプリをインストールする」と出ます
インストールしましょう
ホーム画面にアイコンが増える
このようにネイティブアプリな感じで使えちゃう💡
著書
【辛島信芳の著書】
IT技術などに興味のある方は、是非ご覧になってください。
この記事が気に入ったらサポートをしてみませんか?