WindowsでFirebase CloudFunctionsを使ってみる

FNCT創造工学演習、予備実験向けにハンズオンを作成しました。
（2020/5/18 更新）

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

Googleアカウントでログインした状態で、Firebase Consoleにアクセスしてみよう。
https://console.firebase.google.com/u/0/?hl=ja

「プロジェクトを追加」をクリックして、サンプルプロジェクトを作成する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/69744/42605dd9-161c-f381-cd86-51201158073a.png)

「sample」と名前を入力して、サンプルプロジェクトを作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/49e8b75e-ebd3-cee9-c198-06c6d98884b3.png)

続いてGoogle Analyticsの設定になるが、いったん無効にしておこう。本番ではアクセス状況などを確認するために、有効にしておくことをお勧めする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/dd090383-eb63-ad9c-2796-ee716a51a26c.png)


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

## 開発環境を準備する
### node.jsをインストールする
開発環境のベースとして、まずはnode.jsをインストールする。
こちらの公式サイトからインストーラをダウンロードする。
https://nodejs.org/en/

左側にある、「Recommended For Most Users」と書いてあるボタンから。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/10e59235-b29f-e4db-9e52-7c68109a74b9.png)

ダウンロードしたインストーラを起動して、node.js一式をインストールする。
選択肢はデフォルトのままでOK。

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

```
> node --version
v12.16.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](https://qiita-image-store.s3.amazonaws.com/0/69744/69f08fe6-d1cd-57bf-cba5-e9c01d9e6666.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](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)の利用がオススメ。

```javascript:/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` 関数を、以下のように書き換えてみよう。

```javascript:/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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69744/aacb4d3d-5231-d7ce-7505-3170c4a36709.png)

以上で、Firebase CloudFunctionsの簡単なサンプルが実行できた。
他の動きに書きかえる、関数を増やすなどして、Functionsの使い方を続けて探っていってみよう。