Google Cloud Functions でAPIを公開して Javascript から呼び出す

アプリ開発

ちょっと手こずったので、忘れないうちに備忘録しときます。

スポンサーリンク

環境

  • Windows 11 Home 21H2 22000.434
  • Node.js v16.13.1

Cloud Functions の準備

Google Firebase の Cloud Functions を使ってAPIを公開するため、まず Firebase にプロジェクトを作成します。

無料枠を使うと 200万回の呼び出しまでできます。ソレを超えると有料ですが、バズらない限り超えないと思うので、実質無料で使い放題ですね。

Google の無料枠については こちら にまとめられていました。ごく稀に変更されるので、たまに気がついたら再確認するとよいです。

Firebase プロジェクトの作成

まず Firebaseコンソール にアクセスしてプロジェクトを作成します。

Firebase プロジェクトの作成

適当なプロジェクト名を入力し、

プロジェクト名を入力

アナリティクスは無効にしておきます。オススメされてるが使わないのです。

アナリティクス無効

しばらく待つとプロジェクトが完成します。

プロジェクト完成

Cloud Functions を有効化

続いて Cloud Functions を有効化します。

Sparkプランだと Functions が使えないので、Blazeプラン(従量制) にアップグレードをします。アップグレードしても、すぐに請求されることも無いのでご安心を。ですが200万回呼び出しをしたら請求されます。

Blazeプランにアップグレード

左メニューの「Functions」を選択しプロジェクトをアップグレードします。

プロジェクトをアップグレード

課金情報がない場合は、ここで請求先アカウントの作成に入ります。

請求先アカウントの作成

課金情報を作ったら、Blazeプラン(従量制) にアップグレードできます。

Blazeプラン(従量制) にアップグレード

APIの作成

Firebase にプロジェクトが出来たら、APIの作成に入ります。

まず作業用のフォルダーを作成して、右クリックメニューから Windowsターミナル を開きます。

Windowsターミナル

Firebaseコマンドラインツールのインストール

はじめに、次のコマンドを入力して、Firebaseコマンドラインツールをインストールします。

npm install -g firebase-tools
npm install -g firebase-tools

プロジェクトの作成

続いて、次のコマンドを入力してプロジェクトの作成をします。

firebase init
firebase init

対話をしながらプロジェクトの作成ができます。

プロジェクトを作るディレクトリーに間違いがなければエンターキーを押します。

ちなみに、YやNを入力せずにエンターキーを押すと大文字の方が選択されるみたいです。今回はYが大文字なのでYesってことですね。

次に、どの機能を使うか聞かれるので「Functions」にチェックを入れてエンターキーを押します。

Functions

先ほど作ったプロジェクトにAPIを作成したいので「Use an existing project」を選択してエンターキーを押します。

Use an existing project

Firebaseのプロジェクトが表示されるので、先ほど作ったプロジェクト(今回は【functions-api】)を選択してエンターキーを押します。

プロジェクト選択

Cloud Functions で使う言語を聞かれるので「JavaScript」を選択してエンターキーを押します。

JavaScript を選択

ESLint は「No」を入力しエンターキーを押します! ESLint はエラーとか警告とかがメンド臭かった思い出。

ESLint

依存関係のインストールもしたいのでそのままエンターキーを押します。

依存関係のインストール

これでプロジェクトの作成が完了です。

プロジェクト作成完了

デプロイ

APIを作成して Cloud Functions にデプロイをします。

とりあえず、サクッとサンプルのコメントを外してデプロイしてみます。

functionsフォルダーの「index.js」を開いてコメントになっている処理を有効にします。

コメントになっている処理を有効化

次のコマンドを入力すると Cloud Functions にAPIをデプロイすることが出来ます。

firebase deploy
firebase deploy

デプロイには3分ほどかかりました。

無事にデプロイが完了すると Function URL が表示されるので、そのURLをブラウザにコピペすると Cloud Functions の API を実行することが出来ます。

Cloud Functions API 実行

Javascript から呼び出し

APIの動作確認ができたら、最後に Javascript から呼び出しをしてみましょう。

適当なディレクトリーに新規で「index.html」ファイルを作成して、次のコードを貼り付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="ajaxButton" type="button">Cloud FunctionsのAPIを実行</button>
    <script>
        (function () {
            var httpRequest;
            document.getElementById("ajaxButton").addEventListener('click', makeRequest);

            function makeRequest() {
                httpRequest = new XMLHttpRequest();

                if (!httpRequest) {
                    alert('中断 :( XMLHTTP インスタンスを生成できませんでした');
                    return false;
                }
                httpRequest.onreadystatechange = alertContents;
                httpRequest.open('GET', 'https://us-central1-functions-api-a8011.cloudfunctions.net/helloWorld');
                httpRequest.send();
            }

            function alertContents() {
                if (httpRequest.readyState === XMLHttpRequest.DONE) {
                    if (httpRequest.status === 200) {
                        alert(httpRequest.responseText);
                    } else {
                        alert('リクエストに問題が発生しました');
                    }
                }
            }
        })();
    </script>
</body>
</html>

httpRequest.open関数の URL は自分のAPIに置き換えて下さいね。

貼り付けたら保存して、ダブルクリックで実行します。

index.html実行

実行してブラウザ内のAPI実行ボタンを押すと、APIから取得した結果が表示されます。

エラーアラート

エラーになってしまったので F12キーで DevTools を開き、原因を探していきましょう。

DevTools のネットワークタブを開いてから、再度API実行ボタンを押すとコンソールにエラー内容が表示されます。

Access to XMLHttpRequest at 'https://us-central1-functions-api-a8011.cloudfunctions.net/helloWorld' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to XMLHttpRequest at ‘https://us-central1-functions-api-a8011.cloudfunctions.net/helloWorld’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

ふむふむなるほど。今回はCORSポリシーに違反しているので、エラーにされていることが分かりました。

CORSポリシー違反の解決

CORSエラーの場合は、APIがクロスドメインを許可していないため起こるので、クロスドメインを許可する設定を与えてあげれば問題解決です。

functionsフォルダーの「index.js」を開いて、次の1行を追記します。

response.setHeader("Access-Control-Allow-Origin", "*");

こんな感じになればOK

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

修正して保存したら、再度デプロイをして動作確認をします。

アラートで「Hello from Firebase!」と表示されれば大成功です!!!

Hello from Firebase!

以上、お疲れさまでした。よきAPIライフをお送りください。

タイトルとURLをコピーしました