Firebase Cloud Functionsと連携してOGPカードを生成するReactコンポーネントを作っていたらいっぱいハマった

タイトルの通りのコンポーネントを作っていたのだが、クライアントサイドからでは他のサイトにリクエストを飛ばしてOGPデータを取得することができないので、バックエンドAPIを利用してOGP情報を毎回生成するCloud functions を作成しました。

iframelyやサードパーティのリンク作成ツール依存を脱却した pic.twitter.com/4KTAnOxyL4
— ゲン (@gen_sobunya) 2021年2月11日

コンポーネント自体はReact hooksで簡単に作れたのですが、Firebase側で色々ハマったので備忘録に。コンポーネントのコードはこちら。

github.com

MDX pluginとしてどのマークダウンファイルからでも呼び出せるように設定してす。

Firebase Cloud Functions環境

node.js 12
TypeScript

Firebaseハマりどころ

AmazonのPAAPIv5もES Moduleとして使えなかったり、公式npmパッケージだとエラーが出るので、いい感じにラップしたサードパーティパッケージを使ったりと中々にひどかったのですが、Firebaseもドキュメントの狭間に落ちることが多い…

環境変数

dotenvやdirenvで設定するのではなく、firebaseのプロジェクトそのものに設定する必要があります。

ローカル開発ではそれらをファイルにエクスポートして利用、.gitignore必須。

blog.katsubemakito.net

firebase.google.com

リージョン

当然東京リージョンにデプロイしたいのですが、リージョン指定はコンソールでなくコード側で。また、それに伴ってローカルエミュレータの書き方も変える必要あり。

firebase.google.com

USリージョン

Functions

functions.https.onCall((data, context) => {
  // ... 処理
});

呼び出し

//ローカルエミュレータ
if (process.env.NODE_ENV === 'development' ){
  firebase.functions().useEmulator("localhost", 5001);
}

// ...

const function= firebase.functions().httpsCallable('getOgpLinkData');

東京リージョン

Functions

functions
  .region("asia-northeast1")
  .https.onCall(async (data: Props, context) => {
    //...処理
  }

呼び出し

//ローカルエミュレータ
if (process.env.NODE_ENV === 'development' ){
  firebase.app().functions('asia-northeast1').useEmulator("localhost", 5001);
}


// ...

const getOgpData = firebase.app().functions('asia-northeast1').httpsCallable('getOgpLinkData');