見出し画像

【Flutter Web】Firebase Hosting でWebアプリをデプロイ(リリース)する


概要

「Firebase Hosting」でWebアプリをデプロイして見たので備忘録を記す。
Flutter Webでビルドしたものを前提としているが、その他、単に”Firebase Hostingでデプロイする手順を知りたい”という人にも役に立つであろう。

本記事の掲載内容は、執筆時点(2024年9月)のものとなります。

  1. FlutterでWeb用ビルドの仕方

  2. Webアプリのリリースにおけるアイコン作成

  3. Webデプロイにおける設定ファイルの記述

  4. Firebaseについて

  5. Firebase Hostingでのデプロイ手順

  6. PWA(Progressive Web Apps)について簡単に

などを記載した( アプリのコード自体は完成しているものとする )

※ PWAについては、後日のメモアプリ解説の記事にて詳しく書こうかと思います

●デプロイしたアプリ

色々と機能をごっちゃ混ぜしたデモ用のメモアプリである📝
すっげー適当に作ったアプリなので、軽く遊んでやって欲しい。

なお、このメモアプリの解説の記事も後日、書く予定だ🖋️

なお「デプロイ」と言う単語を使っているが
デプロイ:取り敢えずアップして、関係者が見れる(動作確認など)ようにする
リリース:一般ユーザーへの公開リリース
と言う認識である。

●検証環境
検証環境は以下の通り

macOS Sonoma 14.3
VSCode 1.92.1
Flutter 3.22.3
Dart 3.4.3

●参考になったサイト

起動アイコン

起動アイコンについて

※ ここで言う「起動アイコン」とは、アプリ内のUIのアイコンではなく、アプリ自体の起動アイコンの事を指す。

リリースにおいて、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』で試してみよう🎨

・テンプレート

https://www.canva.com


正方形」で検索し、適当なテンプレートを見つけ、空っぽにして作成していく。

・素材
背景の素材として「メモ帳」で検索

これが良いかな

素材の一部として「鉛筆」で検索

素材の一部として「リスト」で検索

円形アイコンになった場合の余白を考慮しながら配置していく。

エンジニアなので、デザインセンスがアレなのはご容赦を😉

ちなみに、有料版に加入すると、ダウンロードの際にサイズ変更が出来るらしい。

リサイズする

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開発における様々なサービスを提供してくれるプラットフォームである。

●代表的なサービス
サービスはかなりの数があるが、代表的なものをピックアップしてみる


Firebase Authentication:ユーザー認証の実装を提供するサービス
Firebase Analytics:アプリにおける使用状況やユーザーアクション等を分析するサービス
Cloud Firestore:データーベース。大規模アプリケーション向け。
Firebase Realtime Database:データーベース。リアルタイム監視に強いため、チャットアプリ等は向いている。中小規模アプリケーション向け。
Firebase Hosting:Webコンテンツのホスティングサービス

※ データーベースは「Cloud Firestore」と「Firebase Realtime Database」があるが、正直余り分かってなく、適当に書かせてもらった。ただ「Cloud Firestore」の方が新しく、こちらの方が推奨されている。

今回は簡単なデモアプリをデプロイするだけなので「Firebase Hosting」を使用するのみ。

料金

Firebaseは「Spark (無料) プラン」と「Blaze (有料) プラン」がある。
大半のサービスには無料枠が用意されており、ストレージ/通信量が「無料枠」を超える場合は、Blazeプランへ加入する必要がある。
つまり、Blazeプランへ加入していない場合、ストレージ/通信量が無料枠を超え、いきなりサービスが止まるという事も考えられる。

まあ、個人開発やポートフォリオ、デモ用のデプロイとかであれば、無料枠から様子見で良いんじゃないですかね。
ちなみに、私は無料枠しか使う気はない。

【Blaze (有料) プラン】
Blazeプランへ加入する場合、クレジットカードの登録が必要となる。
従量課金制』であり、使用状況に応じて料金が変わってくる。
つまり、定額制でなく使えば使うほど料金が上乗せされる事になる。
その為、使用料の監視や上限の設定は必ずしておくべきであろう(この辺りは公式サイトで確認してください)。
もちろん、APIキー等の漏洩にも最大限の注意を払っておく。

Firebase Hosting

Firebase Hostingの料金

今回のデプロイは、メモアプリなのでデーターベースは使うとはいえ、ローカルDB(ユーザーの端末内に保存)なので「Firebase Hosting」だけとなる。特に認証とかも使わないし、

気になる料金であるが

Hosting コンテンツのストレージは 10 GB まで無料です。
・Blaze プランを利用していない場合、Hosting ストレージが無料の 10 GB の上限に達すると、新しいコンテンツをサイトにデプロイできなくなります。古いリリースを削除するか、Blaze プランにアップグレードする必要があります。
・Blaze プランをご利用の場合、Hosting ストレージが無料の 10 GB の上限に達すると、Hosting ストレージの追加容量 1 GB ごとに $0.026 が課金されます。

https://firebase.google.com/docs/hosting/usage-quotas-pricing?hl=ja

グーグルさん太っ腹すぎぃー🤣

個人開発だと余程のことがない限り無料枠に収まるんじゃないのかな。
グーグルさまさまである✨

プロジェクトの作成

では、早速使っていきましょう。
※ ブラウザ上において、Googleアカウントでログイン済みのものとする

Firebaseの画面構成は変更の頻度が高いです。
本記事の掲載内容は、執筆時点(2024年9月)のものとなります。

●Firebase公式サイト

Firebase公式サイトにアクセスする

「使ってみる」を選択

●新規プロジェクト作成

プロジェクト名を入力します。
今回は「memo-web-demo」とする。

「使用できるのは英字、数字、スペースと次の記号のみです: - ! ' "」らしい。

プロジェクト名を入力すると「一意となるプロジェクトID」が自動算出されます。

https://プロジェクトID.web.appがWebアプリのデフォルトURLになります。
( 通常はここに独自ドメインを割り当てますが、今回はデプロイ検証用なのでこのままとします )

規約を読んで問題なければチェックを付けます。
「続行」ボタン押下します。

Google アナリティクスの設定

●Google アナリティクス(Firebase プロジェクト向け)
これを使うと、Webアプリに関する分析レポートを参照出来る

「無料」との事なので、ありがたく使わせてもらう

※ 何らかの理由で、データーを収集されたくない場合は、オフ(使わない)にしておきましょう。

●Google アナリティクスの構成

アナリティクスの地域:「日本」を選択します

ああ、やはり分析データーをGoogleと共有してと出るか

ちなみに、チェックを外すとこんな感じで食い下がってくる

まあ、今回はGoogleと共有(デフォルトのまま)のままとする
プロジェクトを作成」ボタン押下

「続行」ボタン押下

プロジェクトが作成され、プロジェクトのトップ画面に遷移されます。

『Gemini』のアピール

Safariからだとレイアウトが崩れているような ……

Gemini』をアピールしたがっているのが伝わってきます。

●Geminiとは
OpenAIのChatGPTに対抗すべき、Googleが開発した生成AIです。
Google製なのでFlutterとの親和性が高く「Gemini API」を使うと『AI機能搭載のアプリ』をすぐに開発出来ちゃいます(簡単なものであれば)📱
Geminiに関しては、またの機会に記事にしたいと思います。

下にスクロールし「Hosting」を選択

Hostingのトップ画面

Firebase CLI

「Firebase CLI」をインストールする

ドキュメントを読んでみる

https://firebase.google.com/docs/hosting/?hl=ja

読み進めると「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

プロジェクトの初期化をします
※ 先述通り、予めデプロイ対象のFlutterプロジェクト直下のディレクトリに移動しておきましょう

初期設定画面

●フィーチャーの選択


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でカスタムドメインの設定方法は公式参考にすると良いでしょう

大まかな流れとしては

1.DNSプロバイダー
 独自ドメイン取得
2.Firebase
 独自ドメインを指定し、TXTレコードを取得。
3.DNSプロバイダー
 TXTレコードを設定
4.Firebase
 ドメイン所有権を証明
 SSL証明書のプロビジョニング
 Aレコードの取得
5.DNSプロバイダー
 Aレコードを設定

になると思います。多分。
まあ、機会があればこれも記事にしたい🖋️

ログアウト

$ firebase logout

ログアウトのコマンド

ログアウトされます。

PWA(Progressive Web Apps)

Flutter WebのビルドではPWA(Progressive Web Apps)にしてくれます。

スマートホンから「Google Chrome」でアクセスすると

メニュー項目に 「アプリをインストールする」と出ます

インストールしましょう

ホーム画面にアイコンが増える

このようにネイティブアプリな感じで使えちゃう💡

著書

【辛島信芳の著書】
IT技術などに興味のある方は、是非ご覧になってください。


この記事が気に入ったらサポートをしてみませんか?