気まぐれDeveloperブログ: Firebaseのfuncsionsを色々試す

Cloud Funcsions

環境構築

事前にfirebase-toolsをインストール

sh

$ npm install -g firebase-tools

firebaseにログイン

sh

$ firebase login

※ 複数のアカウントを使用している場合
~/.config/configstore/ここに

firebase-tools.json
update-notifier-firebase-tools.json

がアカウント毎に作成されるので、アカウント切り替える場合は
このファイルを一旦削除なりして firebase login すると新しいのが作成される。

functionsプロジェクトの作成

sh

$ firebase init functions

                      
                                               
                      
                                               
                               

You're about to initialize a Firebase project in this directory:

  /xxxxxxx/xxxxxx/xxxxx


=== 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: xxxxxx (xxxxxxxx)

=== 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.

✔  Wrote functions/package.json
✔  Wrote functions/index.js
? Do you want to install dependencies with npm now? Yes

複数プロジェクトがあった場合プロジェクトの選択と
依存パッケージのインストールをついでにやってくれるので
インストールしたい場合はここでインストールする。

実装

簡単なサンプル

とりあえずHello worldやってみる。
firebase init functionsで作成されたfunctions/index.js に実装されて
コメントされているのでコメントアウトする。

javascript

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

デプロイ

sh

$ firebase deploy --only functions

firebase consoleからFunctionsを選択すると先ほどデプロイされたHello worldがデプロイされていればOK!

スクリーンショット 2017-07-09 17.24.19.png (74.9 kB)

URLを叩けばHello from Firebase!が表示されるはず。

ローカルでの動作確認方法

`firebase serve` を使う

例)

js

exports.hello = functions.https.onRequest((request, response) => {
  response.status(200).send('hogehoge!');
});

functionsディレクトリ直下で　firebase serve --only functions コマンドを実行したいけど、
プロジェクト直下で実行しないと設定ファイルとかが読み込めなくてエラーになるorz

なので、プロジェクト直下で実行する場合は

$ npm --prefix functions run serve

とすると functions ディレクトリの package.json の scripts の serve を実行してくれる

functions/package.json

  "main": "lib/index.js",
  "scripts": {
    "serve": "firebase serve --only functions",
    "shell": "firebase experimental:functions:shell",
    "build": "./node_modules/.bin/tsc"
  },

↑ Typescript などを使っている場合は "main": "lib/index.js", とする事で
トランスパイラ先のjsを指定できる

そしていざ実行すると

i  functions: Preparing to emulate functions.
✔  functions: sampleHandler: http://localhost:5000/xxxxxxx/us-central1/sampleHandler

こんな感じでurlが表示されるので叩いてやればOK

バッドノウハウ

firebase serve --only functions コマンドを実行するとエラー1

Error: No project active, but project aliases are available.

Run firebase use <alias> with one of these options:

  xxxxx (xxxxxx)
  xxxxx (xxxxxx)

active projectを設定してやる

sh

$ firebase use <project>

↑のコマンドを実行すると、~/.config/configstore/firebase-tools.json の activeProjects にパスが設定される!

firebase serve --only functions コマンドを実行するとエラー2

⚠  functions: Cannot start emulator. Error: Cannot find module '@google-cloud/functions-emulator/src/config'
(node:49529) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Cannot read property 'exit' of undefined

同じようなissueが上がっていた