JavaScript
Cloud
Firebase
FirebaseCloudFunctions

WindowsでFirebase CloudFunctionsを使ってみる

FNCT創造工学演習、予備実験向けにハンズオンを作成しました。


Firebaseを準備する

GmailなどのGoogleアカウントを所有していることを前提として、記事を読みすすめてもらいたい。

Googleアカウントでログインした状態で、Firebase Consoleにアクセスしてみよう。

https://console.firebase.google.com/u/0/?hl=ja

「プロジェクトを追加」をクリックして、サンプルプロジェクトを作成する。

image.png

「sample」と名前を入力して、サンプルプロジェクトを作成。

image.png

ここまでで、Firebaseの前準備は完了だ。


開発環境を準備する


node.jsをインストールする

開発環境のベースとして、まずはnode.jsをインストールする。

こちらの公式サイトからインストーラをダウンロードする。

https://nodejs.org/en/

左側にある、「Recommended For Most Users」と書いてあるボタンから。

image.png

ダウンロードしたインストーラを起動して、node.js一式をインストールする。

選択肢はデフォルトのままでOK。

インストール後、コマンドプロンプトから下記コマンドを実行。バージョンが表示されればインストール成功だ。

> node --version

v10.15.3


Firebaseツールをインストールする

続いて、Firebaseの開発環境を準備していこう。

npmを使って、次のコマンドでFirebaseツールをインストールする。

> npm install -g firebase-tools

次に、Firebaseアカウントにログインする。

> firebase login

エラーレポートについて訊ねられるので、いちおうYesを選んでおこう。

? Allow Firebase to collect anonymous CLI usage and error reporting information? (Y/n)

Windowsファイアウォールのアクセス許可を求められるかもしれないが、その場合は「アクセスを許可する」を選んでおく。

image.png

ブラウザ画面上でGoogleログインを促されるので、適切なGoogleアカウントでログインする。


CloudFunctions開発環境をセットアップする

下記のコマンドで、Functionsセットアップに進もう。

適当なところに新しくフォルダを作成して、そこで下記コマンドを実行。

> firebase init functions

続けていいか聞かれるので、当然Yesを。

? Are you ready to proceed? (Y/n)

どのプロジェクトを使用するか選択を求められるので、先程Firebase上で作成したsampleプロジェクトを指定しよう。

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Select a default Firebase project for this directory:
[don't setup a default project]
> sample-00000 (sample)
[create a new project]

使用する言語を聞かれるので、まずはJavaScriptを選択しておこう。

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? (Use arrow keys)
> JavaScript
TypeScript

文法・構文などをチェックしてくれるESLintというツールの使用を訊ねられるが、いったんNoを選んでおこう。

? Do you want to use ESLint to catch probable bugs and enforce style? (y/N)

必要な依存ライブラリ等をインストールするか聞かれるので、Yesを選んでおこう。

? Do you want to install dependencies with npm now? (Y/n)

ファイル・フォルダがいくつか自動で作成されるので、下記のように /functions/index.js ファイルの下半分がコメントアウトされている部分を、コメント除去する。

なおコード編集には、Visual Studio Codeの利用がオススメ。


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



ローカル環境で実行を確認する

下記のコマンドを実行すると、ローカルのPC内に仮想サーバが起動し、Functionsのデバッグ実行が可能となる。

> firebase serve --only functions

すると下記のようにメッセージが表示され、下の行にアドレスが記載されているので、これをコピーしてブラウザでアクセスしてみる。

メッセージが表示されるのを確認しよう。

=== Serving from 'C:\xxxxxxxx\Functions'...

i functions: Preparing to emulate functions.
Warning: You're using Node.js v10.15.3 but Google Cloud Functions only supports v6.11.5.
+ functions: helloWorld: http://localhost:5000/sample-00000/us-central1/helloWorld

次にパラメータを使った関数を作成してみる。

helloWorld 関数を、以下のように書き換えてみよう。


/functions/index.js

exports.helloWorld = functions.https.onRequest((request, response) => {

const name = request.query.name;
response.send(`Hello, ${name}!`);
});

書き換えて保存したら、ブラウザのURLを helloWorld?name=hoge のように変更してアクセスしてみる。表示されるメッセージが変わったはずだ。

ローカルデバッグを終了するときは、Ctrl+Cを押すこと。


Firebaseにデプロイする

ローカルでの動作が確認できたので、下記コマンドでFirebaseにこのプログラムを送信しよう。

> firebase deploy

しばらく待つとデプロイが完了する。

デプロイしたFunctionは、Firebase Consoleからアドレスが確認できる。

このアドレスをブラウザから開いて、動作を確認しよう。

image.png

以上で、Firebase CloudFunctionsの簡単なサンプルが実行できた。

他の動きに書きかえる、関数を増やすなどして、Functionsの使い方を続けて探っていってみよう。