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

Uncategorized
1.6k words

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

環境

  • 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コマンドラインツールをインストールします。

1
npm install -g firebase-tools

npm install -g firebase-tools

プロジェクトの作成

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

1
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をデプロイすることが出来ます。

1
firebase deploy

firebase deploy

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

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

Cloud Functions API 実行

JavaScript から呼び出し

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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.

1
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行を追記します。

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

こんな感じになればOK

1
2
3
4
5
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ライフをお送りください。