タイトルの通りのコンポーネントを作っていたのだが、クライアントサイドからでは他のサイトにリクエストを飛ばしてOGPデータを取得することができないので、バックエンドAPIを利用してOGP情報を毎回生成するCloud functions を作成しました。
iframelyやサードパーティのリンク作成ツール依存を脱却した pic.twitter.com/4KTAnOxyL4
— ゲン (@gen_sobunya) 2021年2月11日
コンポーネント自体はReact hooksで簡単に作れたのですが、Firebase側で色々ハマったので備忘録に。 コンポーネントのコードはこちら。
MDX pluginとしてどのマークダウンファイルからでも呼び出せるように設定してす。
Firebase Cloud Functions環境
- node.js 12
- TypeScript
Firebaseハマりどころ
AmazonのPAAPIv5もES Moduleとして使えなかったり、公式npmパッケージだとエラーが出るので、いい感じにラップしたサードパーティパッケージを使ったりと中々にひどかったのですが、Firebaseもドキュメントの狭間に落ちることが多い…
環境変数
dotenvやdirenvで設定するのではなく、firebaseのプロジェクトそのものに設定する必要があります。
ローカル開発ではそれらをファイルにエクスポートして利用、.gitignore必須。
リージョン
当然東京リージョンにデプロイしたいのですが、リージョン指定はコンソールでなくコード側で。また、それに伴ってローカルエミュレータの書き方も変える必要あり。
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');
node.js 12 functionのDockerレイヤー
GCSバケットにビルド時のDockerコンテナのレイヤーが残るので、これを自動削除するように設定しないと、いつの間にか課金が大変なことになります。
ライフサイクル設定するだけなので作業は一瞬ですが、知らないと間違いなく焦る。
ログ出力
nodeの console.hogehoge を使ってオブジェクトを渡すと、ログ管理画面では行ごとに分割されてしまいます。
import 'firebase-functions/lib/logger/compat' を挿入して、Cloud functions のロガーとして互換性を保つことが可能。
