FirebaseでReactアプリを作る際のDBアクセスサンプル

はじめに

連載の3回目です。今回はアプリ側のFirebaseコードを中心に解説します
本当はサンプルアプリを作ろうと思ったのですが、
仕様の考慮漏れで課金プランでないと動かせないことが分かり断念しました

これまでの記事↓
Firebase超概要
Firebase+Reactの開発環境構築とはまりどころ解説

Hostingからアクセスする

パッケージインストール

npm install firebaseでfirebaseのパッケージをインストールします。

clientで使う初期化情報の取得

APIキーやアクセス先DB情報等を取得して、FirebasseのクライアントSDKの初期化をします。

• ブラウザでFirebase Consoleを開き、左メニュー上にある「Project Overview」をクリック
  

• 中央上部にある「+アプリを追加」をクリック
  

• Webサイトの場合は「>」をクリック
  

• ポップアップが出てくるのでコードをコピー
  

• 「src/index.js」に初期化コード貼り付けます
  

  • ちゃんとやる場合はconfig部分を別jsonファイルに分けて読み込むといいと思います。今回はそのまま貼り付けます

  • APIキーを張り付けるという結構怖いことを言ってますが、これは漏れても大丈夫なやつです。

  • デフォルトでhttps://<project-id>.firebaseapp.com/__/firebase/init.jsに公開されています。
    

  • 別のところで使う、管理者権限でアクセスする際に使うprivate_keyを含むconfigは絶対漏れちゃダメなやつです。

Firestoreへアクセスさせてみる

FirebasseのクライアントからFirestoreへアクセスさせてみます。

Firestoreのだいたいのデータ構造

• 「ドキュメント」と「コレクション」の入れ子構造になっています
  • 「ドキュメント」：だいたいJsonオブジェクトと思えばいいです。
  • 「コレクション」： だいたいドキュメントの集合です。
  • "だいたい"と言っているのは、細かいことを割愛するためです。

Firestoreの初期化コードを追記

src/index.js

firebase.initializeApp(config);
// この3行を追記
const db = firebase.firestore();
const settings = { timestampsInSnapshots: true };
db.settings(settings);

ためしにFirestoreにデータを入れてアクセスさせてみる

• Firebase consoleの「Databaseを選択します」
  

• コレクション・ドキュメントを追加します
  
  
  

  • 結果をFirebase consoleで確認
    

• DBアクセスコードをApp.jsに追加します

src/App.js

...
  async componentDidMount() {
    const db = firebase.firestore();
    const docRef = db.collection("gallery").doc("testDoc");

    const doc = await docRef.get()
    console.log(doc.data())
  }
...

• ブラウザで表示するとDBのtestドキュメントの中身がコンソールに出ます
  

• その他のコードの書き方はマニュアルにサンプル付きで書かれています

firestoreのアクセスルール

• Database > ルール　から設定を確認できます
  

• match ...となっている部分が対象のコレクションやドキュメントの指定です

• その中にあるallow read, write;の部分が許可内容です

  • 次のようにifを付けて制限することができます。これは常に拒否と同等です
    

  • クライアントからアクセスしてもエラーが出るようになります
    

• 詳細はFirestore rules tipsに詳しく解説されています

• 注意点としては、「Firebase Admin SDK 」を使った場合はルールを無視してアクセスできることです。なのでFirebase Admin SDKのクレデンシャルは漏れてはいけません

functions等から管理者権限で操作する

• 管理者権限のキーを発行します
• firebase consoleのから「サービスアカウント」を選択します

• から秘密鍵を生成します。jsonファイルがダウンロードされます

• functionsディレクトリでnpm install firebase-adminします

• ダウンロードしたjsonを配置して、読み込むアプリを書けば使えるようになります
  

• 使い方はconst db = admin.firestore();としてdbオブジェクトを作る以外は基本的に変わりません