初めてのFirebaseを触ってみる(Functions)

16799 ワード
Firebase Vue.js cloudfunctions nuxt.js 初心者 初心者 テキストリンク

はじめに

おはようございます。こんにちは。こんばんは。
今回はFirebaseのFunctionsについて見てきます。
では、早速行って見ましょう。
※今回もwebベース(Vue.js)の解説です。

Functions(Cloud Functions)とは

https://firebase.google.com/docs/functions?hl=ja
Firebase 機能や HTTPS リクエストによってトリガーされたイベントに応じて、バックエンド コードを自動的に実行できます。

Cloud Functionsの使い方

準備

まずは、CLIでfirebaseコマンドを使えるようにします。

以下のコマンドで、firebase-toolsをインストールします。

$ npm install -g firebase-tools

インストールできたら、正常にインストールされているか以下のコマンドでバージョンを確認してみます。

$ firebase --version

firebaseにログインする
まず、CLIからfirebaseにloginします。

理由は、CLI上からアプリケーションのデプロイをしたいためです。

ログインは以下コマンドで出来ます。

$ firebase login

Cloud Functionsの使い方

適当なディレクトリを作成して移動し、以下を叩きます。

$ firebase init

次に紐ずけるプロジェクトを聞かれるので選択する。

次にFunctionsを書く言語を聞かれるので選択する。
※JavascriptとTypescriptが選べます。
※今回はjavascriptを選択するのでjavascriptを使った解説をします。
次にESLintを使うか聞かれますが特にこだわりがないのでエンターを押します。（指定しないでエンターをするとNoになります）
最後にnpmで依存関係のインストールをするか聞かれます。（指定しないでエンターするとYesになります）
Firebase initialization complete!と出れば準備終了。

因みにみなさんが触るファイルです。

funstions/index.js

const functions = require('firebase-functions');

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions

exports.helloWorld = functions.https.onRequest((request, response) => {
 response.send("Hello from Firebase!");
});

ローカル環境での実行

$ cd functions
$ npm run serve

デプロイ

$ firebase deploy

コレクションを取得するAPI


const functions = require('firebase-functions');

// cloud functionでfirestoreを使うのに必要な設定は以下の３行
const admin = require('firebase-admin')
admin.initializeApp(functions.config().firebase)
const db = admin.firestore();

exports.helloWorld = functions.https.onRequest((request, response) => {
 //response.send("Hello from Firebase!");
    db.collection("users")
    .get()
    .then((query) => {
        var buff = [];
        query.forEach((doc) => {
            var data = doc.data();
            buff.push({
                "id": doc.id,
                "name": data.name, 
                "age":data.age
            });
        });
        response.json(buff);
    })
    .catch((error)=>{
        response.send(error);
    });
});

まずここで解説することはCloud FunctionsでFireStoreなどの
Firebaseの機能を使いたいと思ったら、コメントでも書いてあるのですが、
下記のコードを加えてください。


const admin = require('firebase-admin')
admin.initializeApp(functions.config().firebase)
const db = admin.firestore();

ただここで問題が・・・

Firebase上にデプロイすればデータは取れるがローカルではデータが取れません。
開発中にわざわざデプロイしてインターネット上に公開してから動作確認しなければなりません。
はっきり言ってめんどくさいです。
次はローカルでもデータを取得し確認する方法です。
以下の手順を行なってください。

③をクリック後jsonファイルができるのでserviceAccountKey.jsonに名前を変え、プロジェクトに追加してください。
このファイルは絶対に後悔しないで下さい

念のためにGitの管理に含めないファイルを指定するためgitignoreの一番下に以下を追加ください。

functions/serviceAccountKey.json

最後にこのようにコードを編集するとローカル環境でも動くようになります。


const functions = require('firebase-functions');
// cloud functionでfirestoreを使うのに必要な設定は以下の２行
const admin = require('firebase-admin')
//admin.initializeApp(functions.config().firebase)
const serviceAccount = require("../functions/serviceAccountKey.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "*********************"
});


// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions

const db = admin.firestore();
exports.helloWorld = functions.https.onRequest((request, response) => {
 //response.send("Hello from Firebase!");
    db.collection("users")
    .get()
    .then((query) => {
        var buff = [];
        query.forEach((doc) => {
            var data = doc.data();
            buff.push({
                "id": doc.id,
                "name": data.name, 
                "age":data.age
            });
        });
        response.json(buff);
    })
    .catch((error)=>{
        response.send(error);
    });
});

感想

  • これを機に本気でTypeScriptやろうと思った。
  • expressを使ってREST APIを作りたい。

ということで緊急クエスト!
expressを使ってのREST API作成方法をやっていきます。

以上。
解説が浅いところとか、間違い等があれば教えてください。
最後まで読んでいただきありがとうございました。

Twitterやってます。良ければチェックして見てください。

リンク