はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【firebase】Cloud Functionsのチュートリアルをやってみた

はじめに

今回はfirebaseのCloud Functionsのチュートリアルをやってみる記事になります!

私はRealtime DatabaseHostingしか今まで使ったことがなかったのですが、たまたまこの機能についての記事を見つけたところ、めっちゃ便利じゃない!?と思い今回にいたりました。

普段Unityを使ったアプリ制作を行っているのですが、Cloud Funcitonsを使えばライブラリ(アセット)を使わずとも簡単にfirestoreといったデータベースを利用できるようになったりと、かなり魅力的な事があるように思います。

では早速やっていきましょう

その前に

公式のチュートリアルはこちらになります。

firebase.google.com

是非一緒に見ていただけるとより理解がしやすいと思います。

プロジェクトを作成する

まずはプロジェクトを作成するためにFirebaseコンソールを開きましょう。

console.firebase.google.com

ログインができたら、以下の画像のように自分のプロジェクトを作成します。

f:id:hanaaaaaachiru:20190725220913p:plain

f:id:hanaaaaaachiru:20190725221034p:plain

ちなみにプロジェクトIDは世界中で1つだけのものになるので、もしプロジェクト名にかぶりがあれば後ろに数字が付いたりします。またアナリティクスの地域は日本にしておいたほうが無難でしょう。

環境を整える

実際に作業をする前に環境を整えなければなりません。

今回の場合はNode.jsnpmFirebase CLIが必要になります

これらのインストール方法はちょっと忘れてしまったので、公式のチュートリアルを参照してみてください。

firebase.google.com

Firebase SDK for Cloud Functions を初期化する

まずはFirebaseにログインをしちゃいましょう。こちらのコマンドでログインできます。

firebase login

次にFirebase Cloud Functionsを利用したいプロジェクトのディレクトリまで移動します。これは本当に好みの問題なので、好きなところに移動してOKです。

cd hanachiru-test

ここまでできたら、やっとFirebase Cloud Functionsを初期化します。

firebase init functions

いくつか質問をされますが、

? Are you ready to proceed? Yes
? Select a default Firebase project for this directory: hanachiru-test (hanachiru-test)
? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? Yes
? Do you want to install dependencies with npm now? Yes

と私の場合は答えました。

今回はこれらについて深くは触れませんが、よければ調べてみてください。

アプリを初期化する

これまでの操作ができると、いくつかのフォルダなどが生成されているはずです。

この中のfunctions -> index.jsにコードを追加し、Cloud Functions と Admin SDK モジュールをインポートする必要があるそうです。

f:id:hanaaaaaachiru:20190726160637p:plain

f:id:hanaaaaaachiru:20190726160730p:plain

before

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!");
// });

after

// The Cloud Functions for Firebase SDK to create Cloud Functions and setup triggers.
const functions = require('firebase-functions');

// The Firebase Admin SDK to access the Firebase Realtime Database.
const admin = require('firebase-admin');
admin.initializeApp();

addMessage()関数を作る

以下のコードを先程のindex.jsに追加してください。

exports.addMessage = functions.https.onRequest(async (req, res) => {
	const original = req.query.text;
	const snapshot = await admin.database().ref('/messages').push({original: original});
	res.redirect(303, snapshot.ref.toString());
});

たったこれだけのコードで、Httpリクエストを送るとクエリとして渡されたテキストをRealtime Databaseに書き込むことができます。

あまりに簡単すぎて実感ができないですよね。

addMessage()をデプロイする

せっかくコードができたのに一度も試さないのはもったいないので、誰でも使えるようにデプロイをしちゃいましょう。

このコマンドを打ち込みます。

firebase deploy --only functions

f:id:hanaaaaaachiru:20190726163814p:plain

成功するとこのような表示になると思うので、ここの赤枠で囲ったところがHTTP 関数のエンドポイントの URLになります。

このURLにクエリパラメータ、つまりRealtime databaseに書き込みたいテキストをつけて実際に試してみましょう。

https://us-central1-hanachiru-test.cloudfunctions.net/addMessage?text=はじめてのcloud-functions

f:id:hanaaaaaachiru:20190726164520p:plain

f:id:hanaaaaaachiru:20190726164556p:plain

makeUppercase() 関数を作る

cloud functionsではRealtime databeseに書き込まれたことをトリガーとして実行することもできるみたいです。

本当にすごい。。。

先程と同様にindex.jsに次のコードを追加します。

exports.makeUppercase = functions.database.ref('messages/{pushId}/original')
	.onCreate((snapshot, context) => {
		const original = snapshot.val();
		console.log('Uppercasing', context.params.pushId, original);
		const uppercase = original.toUpperCase();
		return snapshot.ref.parent.child('uppercase').set(uppercase);
	});

ここまでできたら、先程と同様にデプロイ、お試しをしてみてください。

firebase deploy --only functions

f:id:hanaaaaaachiru:20190726180411p:plain

f:id:hanaaaaaachiru:20190726180443p:plain

さいごに

これでひとまず最初のチュートリアルは終わりになります。

もっと色々みてみたという方は是非こちらの公式ドキュメントからみてみてください。

ドキュメント