ちょっと手こずったので、忘れないうちに備忘録しときます。
環境
- 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ライフをお送りください。
