はじめに
おはようございます。こんにちは。こんばんは。
今回は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!と出れば準備終了。
因みにみなさんが触るファイルです。
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やってます。良ければチェックして見てください。