Sunday morning

#firebase

YouTubeの「Firebase Release Notes」プレイリスト

最新のアップデートの概要を把握するのにちょうど良い

Firebase Extensions

Functionsを実装する際の参考になる

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

Nuxt.jsのservice workerで環境変数を切り替えられるようにする

設定情報をハードコードしたくなかったので、ビルド時にnodeコマンドでファイル生成を行い環境変数を切り替えられるように対応した。

CloudFunctionsを使ってFirestoreのサブコレクションを削除する

CloudFunctions内でFirebase CLIのdeleteコマンドを呼び出すことで一括削除ができる

Firebase Hostingのリリース履歴を一括削除する

いつの間にか一括削除機能が追加されていた

Firebase HostingでCache-Controlヘッダーを設定する

firebase.jsonに追記する

Firebase Hostingで動いているNuxt.jsプロジェクトにAnalyticsを導入する

gaメソッドをinjectするようにした

Github ActionでfirebaseプロジェクトをS3にデプロイする

deploymentブランチにpushしたら自動でs3にデプロイできるようになった

Google Domainsで取得したドメインをFirebase Hostingのカスタムドメインに設定する

ルートドメインをカスタムドメインに設定する場合、リソースレコードは「@」を指定する

Firebase Hostingのキャッシュ設定をする

firebase.jsonに追記することで手軽にキャッシュ設定ができる

Next.jsでFirebase Local Emulatorを使う

NEXT_PUBLIC_USE_FIREBASE_EMULATORを設定して切り替えた

Next.js on firebase Hostingの静的サイトで404ページをカスタマイズする

page/404.tsxではなくpage/_error.tsxを記述する必要があった

Firebase Functionsを呼び出す際にregion指定するとEmulatorではなく本番に接続してしまう

Emulator環境ではregionを指定しないようにした

Next.js + Firebase Functionsが同居するリポジトリでnext buildを実行するとエラーが発生

Type error: Cannot find module 'xxx' or its corresponding type declarations.

Cloud Firestoreのbatchを使って一括書き込み

いいね及びいいね削除の際に、2つのサブコレクションに書き込みを行う必要があったのでbatchを利用した

GCPの課金上限緩和申請をした

50ドル分の料金を事前支払いする必要があった

Firebase AuthのLocal EmulatorはAuthProviderに応じて適切なダミーユーザを生成してくれる

エミュレータのおかげでローカル開発がとてもやりやすくなった

Next.js on Firebase Hostingの際にページリロードすると404になる

trailingSlash設定を毎回忘れる

firebase hostingで301リダイレクト設定を行う

旧ブログから新ブログへリダイレクト

Firebase公式Github ActionsでPull RequestごとにHostingのプレビュー環境を作る

手軽にプレビュー環境で動作確認できるようになったので、継続的なアップデートがやりやすくなった

FirebaseRTCを試す

300行程のコードで二者間ビデオチャット機能が作れるのはすごい

「Unit testing security rules with the Firebase Emulator Suite」でセキュリティルールのtestを学ぶ

ローカルでセキュリティルールのtestができるようになったのはありがたい

Local Emulator Suiteを使ってFirestoreのローカル開発を行う際に初期データ（seeds）を用意する

ローカル管理画面でDeveloperToolsを開くとwindow.firestoreが使える

JestでFirestoreセキュリティルールのテストを書く

Github ActionsでCIを回せるようになった

Firebase FunctionsでonCallで実装しているにも関わらずCORSエラーが発生した場合

Cloud Functions（GCP）の管理画面を確認してみる

「Firebase productivity tips」を観た

ドキュメントに載っていないような細かいtipsが知れて良い

Cloud Functions for FirebaseでStripeのWebhook Endpointを作る

onRequestでHTTP requestを受け取れるようにする

Value for argument "dataOrField" is not a valid Firestore value. Cannot use "undefined" as a Firestore value

デフォルト設定だとundefinedをFirestoreに保存しようとするとエラーが発生する

Firebase HostingのデプロイをWebhook(API)経由で行う

デプロイボタンが作れるようになった

Cloud BuildでFirebase Hostingのデプロイを行う

リポジトリへのpush以外をトリガーにしたい場合に使用

Firebase Functions呼び出し時に Error: function terminated. が発生した場合

firebase functions:logで詳細を確認できる

Firebase Emulator Suiteで起動しているFunctionsから本番のFirestoreにアクセスする

functionsのみエミュレータを使うようにするとできる