Firebase HostingにホスティングしたウェブサイトからCloud FunctionsのHTTPS関数を実行する 🔥

発行されたURLを普通に叩くとクロスオリジンになってしまうのでどうしたものかと思っていたのですが、ホスティングのリライトルールを使うと回避できます。

firebase.google.com

というか、公式のドキュメントに詳しい手順が書いてあるので、その通り進めればFirebase HostingからCloud FunctionsのHTTPS関数を実行できるようになります。

firebase.google.com

Firebase HostingからCloud FunctionsのHTTPS関数を実行するまでの手順

❶ Cloud Functionsを作成する

const functions = require('firebase-functions');

exports.getTime = functions.https.onRequest(async (_, resp) => {
  return resp.send({
    timestamp: Date.now()
  });
});

とりあえず、現在時刻のタイムスタンプを返す関数を作ってみました。

❷ firebase.jsonを編集する

"hosting": {
  "rewrites": [ {
    "source": "/getTime",
    "function": "getTime"
  } ]
}

hostingの項目にrewritesを追記します。

❸ ホスティグするサイトに関数を実行するコードを書く

fetch('/getTime').then(async (data) => {
  const json = await data.json();

  console.log(json);
});

と言う感じで実行できます。

❹ デプロイする

デプロイします。

基本的には、これでOKです。
Firebase Hostingのサイトの /getTime にアクセスすると、getTimeを実行した結果が表示されるはずです。
これにより、クロスオリジンにならずにホスティングしたサイトから実行できるようになります。

みかづきブログ・カスタム

基本的にはちょちょいのほいです。