Firebaseにアプリケーションを立ち上げてみた

最近フロントエンドも触れ始め、作ったアプリケーションを公開したいと思い、mBaaSの一つであるFirebaseを使ってみました。

mBaaSとは

BaaS(Backend as a Service）は利用者情報の管理やデータサーバへの保存といったバックエンド環境をクラウド上で行うサービスである。
mBaaSは「Mobile」が加わったものであり、スマホやタブレット等のモバイルアプリケーションのバックエンド側のインフラが提供されます。
BaaSやmBaaSを利用することでサーバーの構築と保持や運用管理の手間が不要になり、バックエンドを開発する分のコストが大幅に削減することができます。(利用している企業さんの中にはバックエンドエンジニアを抱えていない企業さんもあるようです。)

Firebaseとは

FirebaseはGoogleが運営しているmBaaSである。(元はFirebase社が開発したものだが、2014年にGoogleに買収されたことにより、GCPの一つとなった。)
利用者情報の管理や認証やデータベースの保持などは勿論、リアルタイムでデータを同期させる機能やプッシュ通知を送受信できる機能など、幅広い機能が備わっている。

特徴

データの更新と同期が簡単で速い

アプリケーションを誰かが使うと自動的にデータが更新され、他の端末に反映されます。
これはデータの保管と同期を自動的に行っており、データが更新されるたびに接続されている端末に数ミリ秒以内に受信される仕組みとなっています。
これにより、オフラインでもアプリケーションを動かすことができるだけでなく、ネットワーク処理のコーディングを行わなくて済みます。

アプリケーションの公開が簡単

アプリケーションを公開するには、必要なファイルの作成やコマンドの打ち込みなどの手順が多いなど、初学者にとってハードルが高くなってしまうものです。
しかしFirebaseはGoogleのアカウントを持っていればすぐに登録でき、環境構築を行うコマンドの量も少ないので、初学者にとって取っつきやすいものとなっています。
公開の手順は後述致します。

無料で備わっている機能が多い

サーバーを提供するサービスは有料のものが多く、無料のものは備わっている機能が少ないものが多いです。
ポートフォリオや自作のアプリケーションを公開している方が少ないのは、この理由が最も多いのではないでしょうか。
FirebaseはSparkプランと呼ばれる無料のプランとBlazeプランと呼ばれる従課金制のプランに分かれています。
無料でも使うことの出来る機能は以下の通りになります。

Analytics

SparkプランもBlazeプランのどちらもフルで使うことができます。

認証

電話認証:月に1万回まで無料。それ以降は都度加算。

その他サービスでの認証:無制限

Cloud Firestore

容量:1GB

データの書き込み:1日2万回まで

データの読み取り:1日5万回まで

データの削除:1日2万回まで

Hosting(アプリケーションの公開)

転送量:最大10GB

独自のドメインとSSLの設定

Realtime Database

同時接続:最大100個

容量:1GB

転送量:最大10GB

この他にも様々な機能や特徴がありますので、firebaseの公式ページを参考にして下さい。
・機能一覧(Firebase公式ページより)
・プランごとの機能一覧(Firebase公式ページより

アプリケーション公開の手順

使用環境

OS：Windows10 Home 64bit
エディタ:Visual Studio Code
公開するアプリの言語:html5/css

Firebase側

Firebaseを使用するには、Googleのアカウントが必要ですが、既に持っている方が多いと思うので、割愛致します。
以下のサイトに、Googleにログインした状態で開きます。
https://firebase.google.com/?gclid=Cj0KCQjwreT8BRDTARIsAJLI0KJQsXa_9LWtK5UY7Veb21rjGAur4q0cqtc6XIGFe2H4flzjQyWUjxcaAq7XEALw_wcB

トップページの「使ってみる」をクリックします。

以下のページが開きますので、「プロジェクトを追加」を押下します。
こちらの画像には幾つか作成されたプロジェクトが載ってしまっていますが、Firebaseを初めて使う場合は、「プロジェクトの追加」のみが表示されています。

初めにFirebaseに立ち上げるプロジェクトの名前を決めます。
「firebase-test」という名前にしました。

続いて、Googleアナリティクスを付けるか聞かれます。
立ち上げたアプリケーションにアクセス数などのデータ分析を行います。
無料で付けられるので、付けても付けなくてもどちらでも良いのですが、推奨通り付けることにします。
続行するとアカウントの選択画面に移りますが、デフォルトのものを選択すれば問題無いです。

最後にコンソール画面の「アプリを追加」をクリックします。

クリックすると、追加するアプリケーションの種類を聞かれます。
今回はWebアプリなので、「>」を選択します。

以下の画面に移ったら、アプリケーション名を命名します。
命名は日本語でもOKです。

「アプリを登録」を押下すると、Firebaseで動かすのに必要なスクリプトが出てきますので、対象のソースコードにコピペします。

これでFirebase側の準備は完了です。

プログラム側

今回は以下のディレクトリで構成されたHTMLファイルをアップロードしてみます！
├── firebase-test
├── public
├── index.html
└── css
└── style.css

まずはターミナルを開き、以下のコマンドを入力して、Firebase CLIをインストールします。

npm install -g firebase-tools

これで、Firebaseのコマンドをターミナルで使用できるようになりました。
続いて、Firebaseライブラリをインストールします。

npm install firebase

インストールが完了すると下図のように、プロジェクトにpackage-lock.jsonファイルと「node_modules」というFirebaseで動くためのファイルが入ったフォルダが追加されています。

次に、Firebaseにターミナルからログインします。

firebase login

ログインに成功すると「Already logged in as 自分のGoogleアカウント」とコマンドが表れます。
最後に、開発環境の初期化と公開の設定を行います。

firebase init

＿人人人人人人＿
＞　FIREBASE　＜
￣Y^Y^Y^Y^Y^Y^
この表記はいつ見てもビビりますね…。
初めに、Firebaseのどの機能を使うのか矢印キーで移動しスペースキーで選択します。
使う機能を選んだら、ENTERキーで進めます。
今回はHosting(アプリケーションの公開)のみを選びます。

次に、どのFirebaseのプロジェクトに同期するのか選択します。
上述で既にFirebase上にプロジェクトを作成しましたので、「Use an existing project」を選びます。
すると、Firebase上にあるプロジェクトが一覧に表れますので、同期させたいプロジェクトを選択します。

最後に公開するディレクトリを聞かれます。
本来は任意のフォルダ名を入力しますが、今回はpublicフォルダ(デフォルトのもの)を予め作成し、公開したいものを格納させているので、そのままENTERキーを叩きます。
次にシングルページアプリケーション用の設定を行うか聞かれますので、「n」と入力します。(これはフレームワーク使っている時は作成しますが、今回はフレームワークを使っていないものを上げるため)
最後にGithubを自動的に公開するのか聞かれます。今回はGithubのリポジトリは作成していないので「n」と入力します。
又、ディレクトリに「index.html」のファイルがある場合のみ、ファイルを上書きするか聞かれますが、「n」と答えましょう。

これで、セットアップが完了しました！

ローカルで起動

デプロイする前に、一度アプリケーションをローカルで起動してみましょう。
以下のコマンドをターミナルに入力し、出てきたURLをブラウザにコピペしてみましょう。

firebase serve

=== Serving from 'C:\git\firebase-test'...

i  hosting: Serving hosting files from: dist
+  hosting: Local server: http://localhost:5000

下図のような画面が出れば、OKです！

デプロイ(公開)する

最後に、アプリケーションをホスティング環境にデプロイしましょう。

firebase deploy

以下のようになればデプロイ成功です！
表示された「Hosting URL」をブラウザに貼り付けて開いてみましょう。


わーい！成功！！！！
デプロイしたものはこちらです。

「プロジェクトが無いぞ」とエラーが出た時

initで初期化と同期の設定を行っていると、Error: Failed to list Firebase projects. See firebase-debug.log for more info.とエラーが発生してしまいました。
調べると、長期間Firebaseにログインしっぱなしにしていると起きてしまうエラーのようです。
この場合は、一旦Firebaseからログアウトし、再度ログインしましょう。
再ログインを行うと、Firebase CLIとGoogleアカウントへの連携の許可を取る画面が表れますので、承認しましょう。
承認後にログイン成功した場合はinitでの設定を初めから行えば大丈夫です。

デプロイの取消

一度デプロイしたものは取り消せないのか…？
そんなことはありません。
以下のコマンドでデプロイを取り消すことができます。

firebase hosting:disable

「本当に取り消しますか。」と聞かれるので「y」と入力すれば取消完了です。

このコマンドでエラーが出てしまった場合は-yを付ければOKです。
さらに、一度デプロイを取り消したものは再度デプロイすることもできます。

デプロイするフォルダの名前を変更する

何らかの事情で公開しているフォルダの名前を変更してしまった場合はどうするのか。
その場合はfirebase.jsonの赤枠の部分を変更するだけでOKです。

変更後、再度デプロイすればOKです。

まとめ

今回は初めてFirebaseに触れてみました。
私の一番得意な言語はPHPなので本格的に使う機会は実はそんなにありませんが、ポートフォリオの作成等フロントエンドだけのサイトを作る際は是非使ってみたいと思います。

参考文献

Firebaseの始め方
Firebaseでデプロイしよう！
Firebaseとは？出来ること7選｜使うメリット5つと料金プラン
ハトらぼ：Firebaseでデプロイするフォルダを変更する
前菜の備忘録：FirebaseにアップしたWebサイトを非公開・削除する