FirebaseでWebアプリのホスティング
【概要】
FirebaseでUnityWebのアプリをホスティングした際に初めての事ばかりで少し戸惑ったのでその忘備録用に記載しました👀
【前提条件】
Firebaseのアカウント作成等のセットアップは記事内容に含めていません
Firebaseの料金プランの話しですが、記事執筆時点では下記のプランがあるようです
- 無料プランの「Spark」
- 従量課金制の「Blaze」
この記事では「Spark」プランのアプリホスティングのやり方の例を記載しています。
【全体的な流れ】
ざっくりと「デプロイ用にローカルディレクトリを準備」→「Firebaseプロジェクトの準備」→「Firebase CLIのインストール」→「Firebase CLIを操作しWebアプリをデプロイ」といった流れです
① デプロイ用にのローカルディレクトリを作成
デプロイ向けにローカル環境の任意の場所にデプロイ用ディレクトリを用意します
② Firebase プロジェクトを作成
「Firebase プロジェクトを使ってみる」のボタンを押してプロジェクトを作成します。
ボタンを押すと下記のような画面に進むので、「利用規約等」各種確認しながら画面を進めてください
画面にそって進めると最終的に下記画面のようにプロジェクト作成処理に入り「続行」ボタンが押せます
ボタンを押すと下記の画面のようなプロジェクトページが用意されます
③ Firebase CLIをインストール
今回はFirebaseの「Hosting」というサービスを使用したいので下記画像のように「構築」→「Hosting」の順番にボタンを押すと「Hosting」ページに移動できます
そしたら「始める」ボタンを押してください
そうすると下記のように手順が丁寧に説明されています
今回は「Firebase CLI リファレンス」のページから「Windows」用のアプリをローカルに落とします
下記ドキュメントからダウンロードする事が出来ます
ダウンロード出来た「Firebase CLI」が下記です
④ 【Firebase CLI】firebase loginでログイン
「Firebase CLI」を実行後下記のようにログインをします
⑤ 【Firebase CLI】「①」で作成したディレクトリに移動
「cd」コマンドを打つと現在参照しているディレクトリを表示してくれるので、意図したディレクトリを参照しているか確認します。意図したディレクトリでなければ「cd 参照したいフルパス」で切り替え出来ます。
⑥ 【Firebase CLI】で「firebase init」を実行
yを押してエンター
「Hostiong:~」の項目で「スペース」キーを押してエンター
事前に作成したプロジェクトを使用したいので一番上を選択
Firebaseプロジェクトの一覧が表示されるので任意のプロジェクトで実行
色々質問されるのですが、今回は下記のような形で設定を進めました
※「publicディレクトリを作成」、「サンプル用のindex.htmlを作成する」、「GitHubの自動デプロイの設定はしない」
⑦ 【Firebase CLI】で「firebase deploy」を実行
最終的にディレクトリの中身は下記のような形になる事を確認
最後にUnityWebの場合はUnityでビルドしたファイルをpublicフォルダに配置し、firebase deployをコマンドで実行すれば完了です
アプリの使用制限
無料プランでは下記のような制限が現時点で確認されています。
その上で上限を超えてしまう場合、その月の期間内はプロダクトが使用できなくなる仕様のようです。
- ストレージ量 10GB
- データ転送 360MB/日
【参考ドキュメント】
Discussion