2021.02.24

firebase開発環境セットアップ

CLI tool をインストール

firebase-toolsがまだ入っていなかったらインストールする。

yarn global add firebase-tools

ログインする。

firebase login

firebase プロジェクトを作成

CLI でプロジェクトを作成しても良いんだけど、アプリの uniqueid の設定だったりいろいろ親切じゃないので UI 側からある程度作成して追加する方が面倒なくて良い気がする。AWS の方がこの辺親切。

cd ~/[プロジェクトのディレクトリ]
firebase init

などでプロジェクトを作成。あとで firestore 追加したいときもfirebase initでやっていけば追加できるが、最初に console から作っておいた方が面倒ないかも。

プロジェクトの設定から GCP のリソースロケーション選択しておく東京ならasia-northeast1。一度決めると変更できない。

.
├── dist # hostingのサイトデータ入れるとこ。任意なんでもよい。
├── firebase-debug.log
├── firebase.json # firebaseの諸々設定ファイル
├── firestore.indexes.json　# firestoreのファイル
├── firestore.rules # firestoreのファイル
├── functions # functionsのディレクトリ
├── node_modules
└── package.json

functions

functions/index.js

const functions = require("firebase-functions");
const admin = require("firebase-admin");

exports.helloWorld = functions
  .region("asia-northeast1")
  .https.onRequest((request, response) => {
    functions.logger.info("Hello logs!", { structuredData: true });
    response.send("Hello from Firebase!");
  });

ローカル環境で確認

firebase serve --only functions

http://localhost:5000/[projectname]/asia-northeast1/helloWorld にアクセスで開発できる。

本番環境に反映

firebase deploy --only functions

で本番に公開

cloud functions から firestore に add

functions/index.js

const functions = require("firebase-functions");
const admin = require("firebase-admin");

// init
admin.initializeApp(functions.config().firebase);
const db = admin.firestore();

// define
const DB_XML_COLLECTION_NAME = "test";

exports.addTest = functions
  .region("asia-northeast1")
  .https.onRequest((request, response) => {
    db.collection(DB_XML_COLLECTION_NAME).add({
      name: "gollowars",
      job: "engineer",
      createdAt: admin.firestore.FieldValue.serverTimestamp(),
    });

    response.send("Hello from Firebase!");
  });

addTestエンドポイントへの request で collection に add される。