Chapter 03無料公開

Cloud Functions を触ってみる

てんてる
てんてる
2021.05.29に更新

作成したプロジェクトの中身を確認(JavaScript)

環境構築で作成したプロジェクトの中身を確認していきましょう。
プロジェクトをVS Codeで開く
先ほどの続きであれば、code .と入力するとVS Codeが立ち上がるはずです。立ち上がらない場合は、エクスプローラーからプロジェクトディレクトリを右クリック→Codeで開くをクリックするとVS Codeで開くことができます。

$ code .

VS Codeで開くとエディタ左側にディレクトリ一覧が表示するので、functions/src/index.jsをダブルクリック。
その後、index.jsのコメントアウトを解除して保存。

初期状態のコードのざっくりとした解説です。
※余計なコメントは削除しています。

functions/index.js
// Firebase Functionsを使うのに必要なモジュールをインポート
const functions = require('firebase-functions');

// 上でインポートしたfunctionsが持つメソッドの1つであるHTTPリクエストメソッドを利用
// HTTPリクエストがくると関数が発火する
exports.helloWorld = functions.https.onRequest((request, response) => {
    // FirebaseConsole(GUIの管理画面)のFunctionsにログを出力
    // ログについては後程詳しく解説するので、今は無視でOK
    functions.logger.info("Hello logs!", { structuredData: true });
    // response.sendでリクエスト元に値を返す。今回は文字列を返している。
    response.send("Hello from Firebase!");
});

作成したプロジェクトの中身を確認(TypeScript)

環境構築で作成したプロジェクトの中身を確認していきましょう。
プロジェクトをVS Codeで開く
先ほどの続きであれば、code .と入力するとVS Codeが立ち上がるはずです。立ち上がらない場合は、エクスプローラーからプロジェクトディレクトリを右クリック→Codeで開くをクリックするとVS Codeで開くことができます。

$ code .

VS Codeで開くとエディタ左側にディレクトリ一覧が表示するので、functions/src/index.tsをダブルクリック。
その後、index.tsのコメントアウトを解除して保存。

初期状態のコードのざっくりとした解説です。
※余計なコメントは削除しています。

functions/index.js
// Firebase Functionsを使うのに必要なモジュールをインポート
import * as functions from "firebase-functions";

// 上でインポートしたfunctionsが持つメソッドの1つであるHTTPリクエストメソッドを利用
// HTTPリクエストがくると関数が発火する
export const helloWorld = functions.https.onRequest((request, response) => {
  // FirebaseConsole(GUIの管理画面)のFunctionsにログを出力
  // ログについては後程詳しく解説するので、今は無視でOK
  functions.logger.info("Hello logs!", { structuredData: true });
  // response.sendでリクエスト元に値を返す。今回は文字列を返している。
  response.send("Hello from Firebase!");
});

Cloud Functions のデプロイ

初期状態のソースコードをざっくりと確認したので、続いてコードをデプロイしてみましょう。
デプロイ方法はとてもシンプルで、firebase deployでデプロイ完了です。

functions以外のFirebaseの機能を利用している場合は、firebase deployとすると、全ての機能をデプロイしてしまうので、関数のみをデプロイしたい場合はfirebase deploy --only functions としましょう。

$ firebase deploy --only functions

=== Deploying to 'functions-test-ce134'...

i  deploying functions
Running command: npm --prefix "$RESOURCE_DIR" run lint

> functions@ lint \functions-test\functions
> eslint .

+  functions: Finished running predeploy script.
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
+  functions: required API cloudbuild.googleapis.com is enabled
+  functions: required API cloudfunctions.googleapis.com is enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (36.17 KB) for uploading
+  functions: functions folder uploaded successfully
i  functions: updating Node.js 12 function helloWorld(us-central1)...
+  functions[helloWorld(us-central1)]: Successful update operation.

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/functions-test-ce134/overview

デプロイが完了したら、上記ログに表示されたURL(https://console.firebase.google.com/project/プロジェクトID/overview) にアクセスまたは、Firebase Consoleにアクセス。

サイドバーにあるFunctionsをクリック。

先ほどの関数がデプロイされているので、画像内赤線のURLをコピーしてブラウザで表示してみましょう。

このように、index.jsresponse.sendで指定した文字列が表示されます。

ひとまずCloud Functionsの基本的な使い方はこれで終了です。
ここからは、さらに細かい設定方法や各種ユースケースに合わせたチュートリアルを行っていきます。