TL;DR

Firebase の備忘メモです。

Firebase に触る機会が増えてきたので、曖昧だった機能や使い方をおさらいするために、簡単なTODOアプリを作ってみました。

Firebase SDK
認証機能 (Firebase Authentication)
データベース (Firestore)
アプリ公開 (Firebase Hosting)

を使ってみて、最初の理解に時間がかかった箇所を、メモとして記述しておきます。

今回は第一弾め、Firebase SDKの設定について。

仕様

Googleアカウントでログイン。ボタンを押してログアウトできる
ログイン後、TODO一覧画面が確認できる
TODOを入力→確定することで、新しいTODOをデータベースに追加
チェックボックスをチェックすると、データベースからTODOを削除
ログアウトしてもTODOは消えず、再ログインすることでいつでもTODOを確認できる
認証したGoogle アカウントごとにTODOリストのデータを分ける。

成果物

作業の順番

Firebase SDK の設定と開発環境のセットアップ
認証機能の実装
Firestoreを利用したデータベースの設定

今回は「Firebase SDK の設定と開発環境のセットアップ」について記述します。

開発環境のセットアップ

基本的な流れはここに書いてあるとおり

何度か実際にやってみると

Firebase プロジェクトの作成
必要なサービスの設定
1. 今回のサンプルの場合、Firestore,Auhentication,Hostingの各機能を設定
Firebase CLIでローカルに開発環境を構築
プロジェクトの同期
アプリの登録

の流れが一番迷いなく進めました。順を追って記述します。

1. Firebaseプロジェクトの作成

下記のドキュメントの通りに行えば大丈夫

2. 必要なサービスの設定

Firebaseが提供する各機能から必要な機能をセットアップします。

今回の例で言うと認証 (Authentication) と Database (Firestore)。詳細は別の記事で記述。

3. Firebase CLIでローカルに開発環境を構築

下記のドキュメントに従って、ローカル環境にCLIをインストールします。

https://firebase.google.com/docs/web/setup?hl=ja#install-cli_deploy
https://firebase.google.com/docs/cli?hl=ja#install_the_firebase_cli

npm install -g firebase-tools

で、グローバルインストール。

作業用のディレクトリを作成


mkdir hoge
cd hoge

Firebaseにログインして、アカウントが間違っていないか確認する。


firebase login
firebase projects:list

自分作成したプロジェクトが表示されたらOK。

開発環境の初期化と、プロジェクト情報の同期を行います。


firebase init

最初に、利用したいFirebaseの機能を選びます。全機能を選択できるが、プロジェクトで利用する機能に絞って選択した方が、最初は混乱がないかも。

どのFirebaseプロジェクトと同期するかを選ぶ。選んだプロジェクトとデータの同期が行われる。

設定が全て終了すると、ローカルの開発環境で作業
→Firebaseのオンラインプロジェクトにデプロイができるようになる。

動作テスト

以下のコマンドで、ローカルの開発環境でホスティング機能が動作。アプリの動作チェックが行える。


firebase serve --only hosting

そのほかの起動オプションは下記参照

設定ファイルの overwerite

既存のプロジェクトを再度イニシャライズする場合
既存のプロジェクト・アプリのデータを利用してFirebaseのプロジェクトの作業を開始する場合

イニシャライズ中に設定ファイルの上書きを聞かれることがある

これは

オンラインの設定ファイルを使うか
ローカルの設定ファイルを使うか

を確認している。

overwriteを許可すると、Firebase オンラインプロジェクトから、設定ファイルをローカルに保存し、既存の設定を上書きする。

拒否すると、ローカルの設定ファイルを優先し、データのデプロイ時にオンラインの設定ファイルを上書きする。

例えば

Firebase コンソール上で　firestore.rules を設定
ローカルの開発環境で overwrite を許可する

場合、オンラインのfirestore.rules がローカル環境に上書きされる

例：

ローカルのfirestore.json

オンラインプロジェクトの　firestore.rules を下記のように書き換える

ローカルのFirebaseプロジェクトを再設定し、firestore.rules の overwrite を許可する

overwrite後、ローカルのfirestore.rules を確認。オンラインのfirestore.rules によって上書きされていることがわかる。

Firebase SDKのインストール

ウェブアプリ版を前提に記述します。
公式ドキュメントはこちら。
https://firebase.google.com/docs/web/setup?hl=ja#add-sdks-initialize

ウェブアプリでSDKをインストールする場合

CDNからスクリプトをロード
予約済みホスティング環境からロード
Node.jsからロード、ビルド

などで、htmlファイルからJSファイルをロードして使います。

使い方の基本

最初に基本ファイル「firebase-app.js」をロード
アプリに必要な機能用のSDKをロード
構成オブジェクトのロード（SDK用設定の初期化）

の順番に行います。今回のユースケースでは「認証」「データベース」の2つがメインとなるため、以下のようにロードしました。


 <script src="/__/firebase/7.16.0/firebase-app.js"></script>
 <script src="/__/firebase/7.16.0/firebase-auth.js"></script>
 <script src="/__/firebase/7.16.0/firebase-firestore.js"></script>
 <script src="/__/firebase/init.js"></script>

テスト用のSDK

開発開始時には、テスト用として、認証(Authentication)、データベース(firestore)、サーバーレス関数(Firebase functions)、そのほか全機能をロードする、「ラーメン全部入り」のようなSDKファイルが存在します。

「firebase.js」と言うファイルです。


<script src="/__/firebase/6.2.0/firebase.js"></script>

このファイルをロードすると、個別にSDKを読み込まなくてもFirebaseの各種機能が使えるようになります。

ドキュメントによると、この「全部入り」SDKは本番環境では非推奨とされています。

テスト環境で「とりあえず動かす」時に使うのが良いでしょう。

Firebase構成オブジェクトについて

Firebase構成オブジェクトは、Firebaseプロジェクトの初期設定用オブジェクトです。

オブジェクトの設定は、以下のように行います。(公式ドキュメントから引用)
プロジェクトのAPIキーや、データベースのURLなどを設定しているのが分かります。


var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appID: "app-id",
};

Firebase構成オブジェクトの設定方法は2種類あります。

コード内でオブジェクトを生成する
構成オブジェクトをロードするためのスクリプトを読み込む

Firebase構成オブジェクトをロードするスクリプトは


  <script src="/__/firebase/init.js"></script>

と一行加えれば、構成オブジェクトを生成してくれます。

つまり


  <script src="/__/firebase/init.js"></script>

と


var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appID: "app-id",
};

は、どちらも同じことを行っているため、どちらか片方を記述すれば良いです。

オンラインへのデプロイ

ローカルで作成した各種ウェブアプリ用のファイルは、Fiebase cli からオンラインのプロジェクトへデプロイできます。


firebase deploy

htmL,JavaScript、画像ファイルなどのウェブアプリ用ファイルは、Firebase hsoting の領域にデプロイされます。

デプロイは、Firebase cli もしくは REST API からしか許可されておらず、SSHやFTPによるファイルのデプロイはできません。

チュートリアル

Firebase のチュートリアルプロジェクトが公開されています。

英語ドキュメントですが、Firebaseの機能を網羅的に理解できるので、おすすめです。

Firebase CLI/SDK の初期設定