Firebase CLI/SDK の初期設定

# TL;DR

Firebase の備忘メモです。

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

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

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

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

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

## 成果物

https://todomanage.web.app/

<img width="600" alt="todoapp.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/bd09e3ac-94df-bd0b-37a8-98e0b95c8270.png">



## 作業の順番

* Firebase SDK の設定と開発環境のセットアップ
* [認証機能の実装](https://qiita.com/TakeshiNickOsanai/items/7eed1ca8b9e482d392bc)
* Firestoreを利用したデータベースの設定

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

## 開発環境のセットアップ

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

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


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

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

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

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

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

https://firebase.google.com/docs/web/setup?hl=ja#create-project


## 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

```bash
npm install -g firebase-tools
```

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

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

```bash

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

```bash

firebase login
firebase projects:list
```

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

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

```bash

firebase init
```

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

![initialize.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/d954204f-c3d4-2def-564c-926691c62f44.png)



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

![selectprj.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/c31c9d43-5aea-0ce9-33e5-dd925fcb1b43.png)


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

## 動作テスト

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


```bash

firebase serve --only hosting
```

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

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


## 設定ファイルの overwerite 

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

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

![overwrite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/ef4dd147-5472-7835-2060-4b6ef5668ad7.png)


これは

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

を確認している。

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

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

例えば

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

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

例：

ローカルのfirestore.json

![local_rule.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/3af0903f-777f-3b63-ffbd-175b41171893.png)


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

<img width="600" alt="firestorerule_online.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/13acedaf-b4c2-ca60-61b2-5f94f949afca.png">

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

![overwrite.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/485a3a9e-ea57-03c2-d6bf-e7cd03294931.png)


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

<img width="600" alt="written_rules.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/f965bf64-b8c4-45c3-b134-7dbd2af02173.png">


## Firebase SDKのインストール

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

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

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

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

## 使い方の基本

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

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

```javascript

 <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」と言うファイルです。

```javascript

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

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

ドキュメントによると、この「全部入り」SDKは [本番環境では非推奨](https://firebase.google.com/docs/web/setup?hl=ja) とされています。

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

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

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

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

```javascript

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構成オブジェクトをロードするスクリプトは

```javascript

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

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

つまり

```javascript

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

と

```javascript

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 からオンラインのプロジェクトへデプロイできます。

```bash

firebase deploy
```

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

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


## チュートリアル

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

https://codelabs.developers.google.com/?cat=Firebase


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