Firebase

firebaseはGoogleのBaaS (Backend as a Service)．

参考

導入

firebase-toolsのインストール

code: bash

$ npm install -g firebase-tools

$ firebase -V

7.2.1

ローカルターミナルからfirebaseにログインする

code: bash

$ firebase login

静的Webページのホスティング

Webコンソール側の準備

＋を押してプロジェクトを追加

プロジェクト名，国を設定

チェックを入れてプロジェクト作成

ローカル側の作業

プロジェクトフォルダを作成

publicフォルダを作成し，公開したいWebサイトのデータを入れる

後でデプロイするフォルダは選べる．distとかあるなら作らなくていい

プロジェクトフォルダに移動し，プロジェクトを初期化

code: bash

$ firebase init

Hostingのところでスペース，エンター

さっきWebコンソールで作ったプロジェクトを選ぶ

publicを公開用フォルダとする.

SPAにするかを選ぶ

index.htmlを自動生成してくれる．もともとあれば，上書きするかを選択

firebase.json，404.htmlが生成される.

デプロイする

code: bash

$ firebase deploy

公開されたサイトのURLが表示される．それにアクセスするとちゃんと公開されているはず．

存在しないページへアクセスすれば404page も動く．

別サイトを作りたい場合は，projectをもう一度立ち上げ，上記と同様に行う．

$ firebase login --reauth

利用状況の確認

料金タブ　＞　Hosting　から料金と機能を見られる

開発　＞　Hosting　＞　ダッシュボード　から，公開中のURLとリリース履歴が見れる．

履歴の　…　＞　ロールバック　でリリースされているサイトの状態を以前のものに戻せる

開発　＞　Hosting　＞　使用状況　から，データ転送量を見れる．

firebaseでチャットアプリ作成

FirebaseリアルタイムDBの仕組み

Firestoreでのデータ構造は，Collectionの中にDocumentが複数存在する形．

JSONをたくさん持てるってこと．

今回，Documentにはmessage, created, uidを持たせる．

Cloud Firestoreでは，DB上のデータが更新されたら，DBに接続しているすべての端末に

データの更新を通知することができる．

Webコンソール側の準備

firebaseのコンソールでプロジェクト作成

開発　＞　database　＞　データベースの作成　＞　テストモードで開始　＞　有効にする

productionではロックモードにすること

Project Overview　＞　</>　＞　コードをコピー　＞　別JSファイルなり何なりに書き込み，使う.

apiKeyやmessagingSenderIdがハードコーディングされているが，Googleアカウントにログインできなければデプロイできないし，DBへのアクセス権限は別に行うことができるので，セキュリティ上の問題はないらしい．

このままだとコンソールで開発用に全部のスクリプトを読んじゃダメだよ的な警告が出るので，

ドキュメント　＞　ガイド　＞　スタートガイド　＞　Web　＞　アプリにfirebaseを追加

にある，機能別のスクリプトを読み込む．ここでは-appと-firebaseを取得するようにする．

このとき，firebase.jsは削除する．

JSでDBにアクセス

プロジェクトフォルダを作成し，index.htmlを適当に作成

code: javascript

// firebaseに接続

const db = firebase.firestore();

db.settings({

timestampsInSnapshots: true // これがないとコンソールで怒られる

})

const collection = db.collection('messages');

// firebaseにデータを送信する.　JSONをどんどん入れていく感じ

collection.add({

message: 'test',

created: firebase.firestore.FieldValue.serverTimestamp(),

})

.then(doc => {

})

.catch(error => {

console.log(error)

})

// あとはDBの変更の検知をトリガーにして表示を変えればよい

// IDではなく投稿時間でソートし，Snapshotで変更を監視

collection.orderBy('created').onSnapshot(snapshot => {

snapshot.docChanges().forEach(change => {

// 要素の追加なりなんなり

})

})

あとはJS, HTML, CSS でよしなに作る

なお，コンソール　＞　データベース の...から全てのデータを消せる

Firebase Authenticationによるユーザ認証

Firebase Authenticationでは，ログインが行われると，各端末に

ユニークなIDを発行することができる．

Webコンソール側の準備

コンソール　＞ Authentication ＞　ログイン方法を設定　＞ 匿名　を今回は選択　＞ 有効にする　＞ 保存

アプリ側でログイン

firebase-auth.jsをscriptタグで追加

authモジュールの作成

code: javascript

import firebase from 'firebase/app'

const auth = firebase.auth()

code: js

auth.createUserWithEmailAndPassword(this.email, this.password)

.then(user => {

// サインアップ成功

alert('Create account: ' + user.displayName)

this.$router.push('/')

})

.catch(error => {

alert(error.message)

})

})

.catch(error => {

// サインアップ失敗

alert(error.message)

})

匿名サインイン

code: javascript

auth.signInAnonymously()

E-mailとパスワードでログイン

code: js

aut.signInWithEmailAndPassword(email, password)

.then(user => {

// サインイン成功

this.$router.push('/')

})

.catch(err => {

// サインイン失敗

alert(err.message)

})

サインアウト

code: javascript

auth.signOut()

ログイン状態の監視

code: javascript

auth.onAuthStateChanged(user => {

if(user) {

// サインインしている時の処理

} else {

// サインインしていないときの処理

}

})

updateEmailとかupdateProfileとかを使う

サインインしていないとDBを書き換えられないようにする

コンソール　＞　開発　＞　Database　＞　ルール　で以下の変更を加える

allow read, write;

↓

allow read, write: if request.auth.uid != null;

↓

公開　または　Ctrl + s

このとき，サインアウトしたらonSnapShotができなくなるので，

onSnapshotの第2引数に error => {} などを追加しておくとよい．

Flaskをホスティングしてみようとした

作成したプロジェクトでCloud Build APIを有効化する

ターミナルで次のコマンドを打つ

code: bash

Windowsは作成された.bashrcに書いてあるパスを環境変数によしなに追加

Macとかなら.bashrcに追加で書き出させる

ターミナルを開きなおすなり.bashrcを再読み込みするとgcloudコマンド使えるようになっている

code: bash

$ gcloud --version

Google Cloud SDK 255.0.0

bq 2.0.45

core 2019.07.19

gsutil 4.41

...

CurrentProjectを設定する

code: bash

$ gcloud init

ログイン後，作成したプロジェクト名の番号を選ぶ

firebase-adminが入ったrequirements.txtが必要なので作成

code: bash

$ pip install firebase-admin

$ pip freeze > requirements.txt

そして，次のようなapp.yamlを作成

code: app.yaml

runtime: python37

service: default

serviceは先ほど作成したプロジェクトの名前

謎エラーが出てあきらめ

そもそもFirebaseはFlaskのホスティングに対応していなかった？

ここらへんで出てくるfirebaseって，flaskでfirebaseのDBに接続って意味？

FirebaseのリアルタイムDBを使う

Project Overview 歯車 > ユーザと権限 > サービスアカウント > 新しい秘密鍵の生成

好きなところに置いておく．プロジェクトディレクトリでもいいがgitignoreすること

app.pyでfirebase_adminによる初期化処理を最初に行う

code: app.py

import firebase_admin

firebase_admin.initialize_app("path/to/credential.json")