Firebase cloud functionsサービスを利用するための初期設定およびテスト

Firebase functionsはFirebaseと他システムとをつなぎ合わせる、橋渡し的な機能を持っています。

まずはこのFirebase functionsでHTTPリクエストを実行する関数をテストで構築します。

Firebase functionsを利用する際は、無料のSparkプランではなく従量制のBlazeプランに変更する必要があります。

Cloud Functions for Firebaseとは

Cloud Functions for Firebase（以下：Firebase functions）とは、Firebaseが持つ各機能と他システムの連携を担う機能です。

Firebase側にサーバーの構築や保守を任せ、他のプログラムを実行する補助の様な役割です。

例：SendGridとの連携

例えばメール一斉配信システム「SendGrid」の機能を、WEBアプリやWEBサービスから利用するとしましょう。

「SendGrid」とのやり取りには、APIキー（秘密鍵：Secret key）の認証が必要になります。

これらをバックエンド側（サーバー側）で処理する必要がある訳ですね。

こんな時にFirebase functionsを利用すれば、簡単にアプリやWEBサービスに組み込みことが可能です。

Firebase functionsは従量制プラン

Firebase functionsは従量制（有料プラン）でのみ稼働する様になっています。

ですので作成したプロジェクト（デフォルトは無料プラン）を、従量制プランに変更する必要があるのですね。

従来が「Sparkプラン」であるのに対し、従量制は「Blazeプラン」と呼びます。

今回は実際に課金される前の段階までしか進みませんので、ご安心ください。

本記事ではまず、このFirebase functionsをローカル環境で実行するためのインストール方法を紹介します。

Firebaseへのログイン・Node.jsのインストール

Firebase functionsを利用する前に、Firebaseのログインや操作ツールのインストールが済んでいる必要があります。

以上2つが済んでいる事を前提に進めます。

これらは別記事（Firebaseのインストール）にまとめていますので、参考の上済ませておいて下さい。

上記記事では、以下から紹介する「新規プロジェクトの作成」方法まで解説しています。

どちらを参考にして頂いても構いません。

新規プロジェクト作成

Firebase functions向けの新規プロジェクトを、作成していきましょう。

Firebaseへログインしたら作成済みプロジェクトが表示されますので、「＋」マークをクリックして下さい。

新規プロジェクトの名前を任意につけます。記事上はlpeg-functionsにしています。

次のGoogleアナリティクスとの連携はOFFにして、「プロジェクトを作成」ボタンを押しましょう。

しばらく待つと、lpeg-functionsプロジェクトが作成されます。

プロジェクトを従量制プランに変える

先程も説明した通り、Firebase functionsは従量制プランでないと稼働しません。

作成されたプロジェクトは基本「Sparkプラン」となっていますので、それを「Blazeプラン」へ変更します。

TOPページに戻ってきたら「Sparkプラン」の名称部分をクリックしましょう。

Firebase料金プラン

Firebase料金プランの画面が出てきますので、右下の「プランを選択」をクリックしましょう。

課金予算の設定

課金予算の設定は適当に単価設定して構いません（画像では10円にしています）。

今回はテストであり、課金されるところまでは進まないためです。

設定したら右下の「続行」を押しましょう。

購入画面

さらに次の画面では、そのまま「購入」を押して下さい。

「購入」ボタンを押すのは怖いかも知れませんが、従量制にするのは今回のプロジェクトのみです。

このサービスが実際に使われない限り、料金が発生する事はありません。

プロジェクトを削除する事もできますので、まずは進んでみましょう。

アップグレード完了

アップグレードが完了すると「従量制」のBlazeプランに変わったことがわかります。

後ほどFirebaseのログインアカウントであるGmailアドレスにも、通知が届きます。

ローカル環境の構築

Firebase側の設定が終了したら、次はローカル環境の準備です。

任意の位置に今回は、lpeg-functionsという名前でフォルダを作りました。

今回構築をしているのは「Windows11環境」ですので、コマンドプロンプトを立ち上げて進めていきます。

Firebaseの初期化

まずは、そのディレクトリまで進みましょう。

cd C:\Users\info\xxxxxxx\デスクトップ\lpeg-functions

移動したら、Firebaseを初期化するコマンドを入力します。

firebase init

Are you ready to proceed? (Y/n)と聞かれたら、Yを押してEnterを押します。

サービスの選択

上記画像の様に、項目の中から選択するサービスを選びます。

( ) Functions: Configure a Cloud Functions directory and its files

上記項目に矢印キーをあわせてスペースを押し、丸マークが付いたらEnterを押しましょう。

プロジェクトの選択

次に利用するプロジェクトの手段を聞かれますので、以下の項目を矢印キーで選択（青字になる）してEnterを押します。

「Use an existing project」を青字にする

これは既に作っているプロジェクトを選択するという意味です。

表示された一覧の中から今回のプロジェクトを青字にして、Enterを押しましょう。

スクリプト選択

しばらく待つと以下の2つから選択を聞かれます。

今回はJavaScriptにあわせて（青字）、Enterして下さい。

次の「ESLint」の行には、「N」を押してEnterしましょう。

インストール実行

Do you want to install dependencies with npm now? (Y/n)に対して、Yを押してEnterします。

「+ Firebase initialization complete!」と出たら、Firebaseの初期化は完了です。

構成ファイル

初期化が終了したら、作成していたlpeg-functionsの中身を開いてみましょう。

以下のような構成になっています。

lpeg-functions内データ

├―functionsフォルダ ├─.firebaserc ├─.gitignore ├─firebase.json

functionsフォルダを開くと以下の様な状態です。

functionsフォルダ内

├―node_mojules ├─.gitignore ├─index.js ├─package.json ├─package-lock.json

index.jsを編集する

コードを書くのは、functionsフォルダ内の「index.js」です。

中を開くと以下の様になっているはずです。

初期コード

1行目以外はコメントアウトされていますね。

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) => { // functions.logger.info("Hello logs!", {structuredData: true}); // response.send("Hello from Firebase!"); // });

実際はこの中に自由にコードを入れて、展開をしていく事になります。

有効にしたコード部分

上記の様に下から3行のコメントアウトを外して、コードが活きる様にします。

exports.helloWorld = functions.https.onRequest((request, response) => { functions.logger.info("Hello logs!", {structuredData: true}); response.send("Hello from Firebase!"); });

これにより「Hello from Firebase!」と表示される事になりますね。

デプロイ作業

準備が整ったら、コマンドラインでデプロイを実行します。

対象ディレクトリに移動している事を確認して、以下のコマンドを入力しましょう。

cd C:\Users\info\xxxxxxx\デスクトップ\lpeg-functions firebase deploy

しばらくすると「Deploy complete！」と表示されます。

ブラウザで確認（HTTPリクエスト）

下に専用のアドレスが表示されているのでそれをコピーして、ブラウザのアドレスバーに貼り付けてみましょう。

以下の様な文字が表示されたら成功です。

Firebase Consoleの確認

Firebase Consoleへ進み、左の構築メニューから「functions」を選びます。

すると「関数」というページが開き、「ダッシュボード」タブが開いた状態になります。

HTTPリクエストによる呼び出し関数が設定されているのがわかります。

人気記事

Firebase関連記事