ちょっと手こずったので、忘れないうちに備忘録しときます。
環境
- Windows 11 Home 21H2 22000.434
- Node.js v16.13.1
Cloud Functions の準備
Google Firebase の Cloud Functions を使ってAPIを公開するため、まず Firebase にプロジェクトを作成します。
無料枠を使うと 200万回の呼び出しまでできます。ソレを超えると有料ですが、バズらない限り超えないと思うので、実質無料で使い放題ですね。
Google の無料枠については こちら にまとめられていました。ごく稀に変更されるので、たまに気がついたら再確認するとよいです。
Firebase プロジェクトの作成
まず Firebaseコンソール にアクセスしてプロジェクトを作成します。

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

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

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

Cloud Functions を有効化
続いて Cloud Functions を有効化します。
Sparkプランだと Functions が使えないので、Blazeプラン(従量制) にアップグレードをします。アップグレードしても、すぐに請求されることも無いのでご安心を。ですが200万回呼び出しをしたら請求されます。
Blazeプランにアップグレード
左メニューの「Functions」を選択しプロジェクトをアップグレードします。

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

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

APIの作成
Firebase にプロジェクトが出来たら、APIの作成に入ります。
まず作業用のフォルダーを作成して、右クリックメニューから Windowsターミナル を開きます。

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

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

対話をしながらプロジェクトの作成ができます。
プロジェクトを作るディレクトリーに間違いがなければエンターキーを押します。
ちなみに、YやNを入力せずにエンターキーを押すと大文字の方が選択されるみたいです。今回はYが大文字なのでYesってことですね。
次に、どの機能を使うか聞かれるので「Functions」にチェックを入れてエンターキーを押します。

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

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

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

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

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

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

デプロイ
APIを作成して Cloud Functions にデプロイをします。
とりあえず、サクッとサンプルのコメントを外してデプロイしてみます。
functionsフォルダーの「index.js」を開いてコメントになっている処理を有効にします。

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

デプロイには3分ほどかかりました。
無事にデプロイが完了すると Function URL が表示されるので、そのURLをブラウザにコピペすると 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に置き換えて下さいね。
貼り付けたら保存して、ダブルクリックで実行します。

実行してブラウザ内の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.
ふむふむなるほど。今回は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!");
});

修正して保存したら、再度デプロイをして動作確認をします。
アラートで「Hello from Firebase!」と表示されれば大成功です!!!

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