Firebase Bootcamp 2025

00 Introduction

Introduction $ whoami ゆにねこ a.k.a Harineko - GDG on Campus Osaka Organizer - 趣味は CI/CD と自宅サーバーです - 甘いもの好きです

Cloud Credit のご案内 https://trygcp.dev/e/build-ai-KIX01 Introduction

• https://trygcp.dev/e/build-ai-KIX01

Cloud Credit のご案内 https://trygcp.dev/e/build-ai-KIX01 Introduction

• https://trygcp.dev/e/build-ai-KIX01

告知 - 分散技術勉強会 登壇者募集中 Introduction

Introduction 告知 - Google I/O Extended 2025 in Osaka

01 Agenda

Agenda Agenda 1) Build 2) Run 3) AI 1. Authentication 1. Cloud Messaging 1. Firebase AI Logic 2. Firestore 3. Realtime Database 2. In-App Messaging 2. Genkit 4. Data Connect 3. Remote Config 3. Firebase Studio 5. Cloud Storage 4. Crashlytics 6. Hosting 5. Google Analytics 7. App Hosting Firebase on Google I/O Cloud Functions A/B Testing 1. 8. 6. 9. Extensions 7. Test Lab 2. Release Notes (2025) 10. Firebase ML 8. App Distribution 11. App Check 9. Performance Monitoring 12. Emulator Suite 4) Updates

Disclaimer Agenda 本セッションは、Firebase 公式ドキュメント (https://firebase.google.com/docs) に基づ いて構成されています。 細心の注意を払って情報の提供に努めておりますが、本セッションで提供する情報、また は本セッションの内容に起因したいかなる損害や不利益についても、主催者、講師、およ び運営関係者は一切の責任を負いません。 Firebase のご利用にあたっては、必ず公式ドキュメントをご確認いただき、ご自身の判断 と責任においてご活用ください。

02 Fundamentals

What’s Firebase? Firebase は、モバイル • Web 開発プラットフォームで、 アプリの構築や運⽤を⽀援する様々なツールを 提供しています。

Why Firebase?

アプリ開発はやることが多い ホスティング データベース 認可認証 アクセス解析 ⾏動分析

システム障害 ⾮効率なインデックス ハードウェア故障 不正アクセス ロック etc... クラッシュ • バグ • サーバーダウン ユーザー離脱 収益減

時間的 ･ ⾦銭的コストを削減 認可認証 テスト 監視 配信 データベース ファイルサーバー

時間的 ･ ⾦銭的コストを削減 認可認証 テスト 監視 コア機能の開発に集中できる ! 配信 データベース ファイルサーバー

Hierarchy of Firebase projects

Firebase Console の使い方

03 Authentication

What’s Firebase Authentication? ユーザー認証機能を手軽に導入できるバックエンドサービス - 認証: ログインとか登録とか言われるもの あるエンティティがそのエンティティ本人かを検証する 様々な認証方法を提供 : Authentication

Authentication Usage

Usage (1/) - 認証方法を設定 Authentication

Usage (2/) - 認証方法を設定 Authentication

Usage (3/) - UI を作成 Firebase UI が使用可能 - 自分で作った方が綺麗だが、手間はかかる 余談: 手間 - ログイン画面 - パスワード再設定画面 - メールアドレス確認画面 - 電話認証の PIN コード入力画面 - etc Authentication

Usage (4/) - UI を作成 Authentication

Usage (5/) - 認証の関数を呼び出す パスワード認証の場合は signInWithEmailAndPassword() プロバイダの場合は signInWithPopup() or signInWithRedirect() Authentication

詳しくは公式ドキュメントを参照 Authentication

Authentication Tips

Verify ID Tokens 認証に Firebase Auth を用い、バックエンドで認可したい → ID Token を使用する Authentication

注意: OIDC ID Token とは少し異なる OpenID Connect の ID トークン - 認証されたことを証明するトークン 宛先 (aud) はクライアントで、バックエンドに送信するのは非推奨 OAuth 2.0 のアクセストークン - リソースへのアクセスを認可するためのトークン バックエンド (リソースサーバー) に送信するため Firebase Auth の ID トークン - Firebase Project 内での認証が目的 宛先 (aud) が Firebase Project ID いわば、ID トークンとアクセストークンをまとめたもの Authentication

何が言いたいかというと・・・ OIDC の ID トークンで認可するのはやめよう Authentication

Authentication 閑話休題

Custom Claims Authentication ユーザーオブジェクトに独自の値を追加できる (<= 1000 bytes) - 格納可能な型: string, number, boolean, object, Array - 後述する Security Rules 内でも使用可能！(というかこれが一番の使い道) Functions

Extend with Cloud Functions ユーザーの登録, 削除時に何らかの処理を実行できる - ユーザーが登録されたらデータベースにユーザーデータを追加とか Functions Authentication

Blocking Functions Authentication 認証系のイベントをブロックできる - 例: メールアドレスのドメインが osaka-u.ac.jp でなければ Sign up を拒否 - ユーザーが作成される前, ユーザーがログインする前などに実行できる Functions

Pricing Authentication

04 Firestore

What’s Firestore? 柔軟でスケーラブルな NoSQL クラウドデータベース - 柔軟 = スキーマレスで豊富なデータ型 - スケーラブル = アクセス数増加で自動スケール - NoSQL = RDB 以外のデータベース 特徴: - 柔軟で階層的なデータ構造 - リアルタイム同期 - SDK によるオフラインサポート - インデックス自動作成 (例外あり) Firestore

Firestore 余談: RDB 行と列からなる表形式でデータを管理するデータベース - Microsoft Excel, Google Spreadsheet のようなもの https://cloudnavi.nhn-techorus.com/archives/2708

• https://cloudnavi.nhn-techorus.com/archives/2708

Firestore Usage

Usage (1/) - Firestore を作成 Location は多くのターゲット ユーザーが存在する地域 Firestore

Usage (2/) - データを追加 Firestore

Usage (3/) - データを取得 Firestore

Usage (4/) Converter Firestore とアプリケーション間で型を変換できる (+Type safe にできる) おすすめの使い方: - as を排除する - Timestamp と Date を変換 - Document ID をオブジェクト に入れる { id: “...”, … } Firestore

Firestore データの定義方法

Data model (1/) - Document Document = ストレージの最小単位 . オブジェクト形式の軽量なレコード (< 1MiB) Map ユーザー alovelace のレコード ドキュメント内にオブジェクトを持つこ とも可能 (map) Firestore

Firestore Data model (2/) - Collection Collection = Document の集合. 一意なキーに各ドキュメントが対応する キー ドキュメント ユーザーのコレクション

Data model (3/) - Reference Reference = Document や Collection を指す値 . ポインタ, シンボリックリンク… Document, Collection への Reference Firestore

Data model (4/) - Reference その2 Firestore Reference = Document や Collection を指す値 . ポインタ, シンボリックリンク… Document のデータとして 追 加も可能 ユースケース : Many-to-many

Firestore Data model (5/) - Subcollection Subcollection = Document が持つ Collection. (subcollection depth < 100) Document Subcollection Collection 注意: Document を削除すると , Subcollection も削除される

Data types
●
●
●
●
●
●
●

string
number
boolean
map
array
null
timestamp

~1MiB までのテキスト. 最初の 1500bytes がクエリ対象
64bit 浮動小数点数 or 整数
{a: "bar", b: "qux", c: "foo"}
[1, 2, 3]
実態は {seconds: number, microseconds: number}
from 0001-01-01T00:00:00Z to 9999-12-31T23:59:59.999999999Z

●
●
●

geopoint
reference
vector

lat, lng. “ある距離以内” のクエリしかない
2048次元までのベクトルデータ

Firestore

Index Index = データに素早くアクセスできるようにするもの (索引) Firestore は全てのフィールドに単一フィールドインデックスを自動で貼る (インデックス除外をすると貼られない ) 複合クエリのためには複合インデックス が必要 インデックスが不足している場合、作成リンクがエラーメッセージで返却される ただし、ベクトルインデックスはコンソール (gcloud CLI) から作成する 基本的に Firestore は SQL ほどクエリが充実していない ! →データ構造でクエリを補う Firestore

Firestore Transaction and Batched writes

Firestore Transaction (1/) Transaction = データベースの更新操作を、不可分に扱う方法 例: 在庫数: 1 Alice Bob 在庫数: 0 在庫数 1 以上を確認、購入手続開始 在庫数 1 以上を確認、購入手続開始 💥

Firestore Transaction (2/) Firestore においては、読み取りの後に書き込みがあるオペレーション - 楽観ロック : 更新対象が取得時と同じ状態かを確認する (ロックしない) - Firestore など - 悲観ロック : データにロックをかけて他者が更新できないようにする - Postgres, Firebase Admin SDK など 失敗したら 有限回だけリトライする

Batched writes 書き込みのみのオペレーション Firestore

Firestore Security Rules

Firestore What’s Security Rules Security Rules = Firestore へのアクセスを制御するための設定 (JavaScript もどき) Collection と Document ID Document ID は変数として使用可能 read と write に対してルール設定 Subcollection も可 詳細なオペレーション cities 以下の任意の深さの Subcollection

Examples of <condition>
request.auth != null
ユーザーが認証しているかどうか
/users/{userId} で request.auth.uid == userId
アクセス対象のデータが自分のものかどうか
resource.data.visibility == 'public'
要求されたドキュメントが公開状態かどうか
get(/databases/$(database)/documents/users/$(request.auth.uid)).data.admin == true
データを取得し、ユーザーが管理者かどうか (Custom Claims がベター)
request.auth.token.role == “admin”
Custom Claims の role が admin かどうか
!request.resource.data.diff(resource.data).affectedKeys().hasAny(['role', 'createdAt'])
更新の際に role と createdAt の変更を禁止

Firestore

詳細は Reference https://firebase.google.com/docs/reference/security/database Firestore

• https://firebase.google.com/docs/reference/security/database

Firestore Best practices

Document IDs [must] ., .., /は使用不可 [want] 単調増加の ID は不可 (例: Customer1, Customer2, Customer3 ) - パフォーマンス問題を発生させる可能性があるため。 >> Hotspot Firestore

Firestore Hotspot Hotspot: 辞書順で近い一連のドキュメントに対して、 高頻度で読み取りや書き込みを行うことで生じる性能劣化 なぜ? Firestore の祖先の Bigtable で解説 (c.f. GCP Database Next Generation (sinmetal-san) ) データはキーの辞書順に Tablet に保存される Tablet はサーバーに分散して保存される 辞書的に近いキーのデータは同じタブレット orサーバーに存在する 可能性が高く、特定のサーバーにアクセスが集中してしまう https://cloud-ace.jp/column/detail95 https://qiita.com/kawamou/items/dbb81473d63bdedf2967

• https://docs.google.com/presentation/d/11Jp1gt-n8LxVgrHBRy1ym6iJMsKww-mit1A00IS-oHk/edit?slide=id.g3fe2636a65_0_23#slide=id.g3fe2636a65_0_23
• https://qiita.com/kawamou/items/dbb81473d63bdedf2967
• https://cloud-ace.jp/column/detail95

Firestore Hotspot その2 データ (辞書順) Google Cloud Key Visualizer を使うと Hotspot をヒートマップで可視化できる Little or no activity very high activity significantly more activity シーケンシャルキーだと こんなヒートマップになる 時間 ( https://cloud.google.com/firestore/native/docs/keyvis-patterns ) https://qiita.com/kawamou/items/dbb81473d63bdedf2967

• https://qiita.com/kawamou/items/dbb81473d63bdedf2967
• https://cloud.google.com/firestore/native/docs/keyvis-patterns

Firestore 閑話休題

Firestore Field Names [must] ., [, ], *, ` は使用非推奨 [want] camelCase 推奨 (kebab-case, snake_case, PascalCase よりも) - TypeScript, Dart, Go などの言語では変数名は camelCase - 変数をそのまま Firestore に保存できる - FIrestore から取得したデータをそのまま扱える Insert Read

Pricing Firestore

05 Realtime Database

What’s Realtime Database? Realtime Database データを 1 つの大きな JSON ツリーとして保存 ● JSON なので import, export が容易 ● 請求対象が容量なので、小さいデータを頻繁に読み書きするのに向いている (FIrestore は回数) ● 状態の同期に特化. レイテンシーが低い (らしい) (Firestore はクエリ結果の同期 ) 例えば、リアルタイムに変化する設定値とかユーザステータスとかは Realtime Database が向いている (かも?)

Pricing Realtime Database

06 Data Connect

What’s Data Connect? Data Connect Cloud SQL for PostgreSQL を Web • Mobile クライアントから直接呼び出す 特徴: ● ● ● ● データベーススキーマの定義 (ORM 的なやつ ) Postgres をラップした GraphQL エンドポイント Gemini でクエリの生成 型安全な SDK の生成

実のところ & 主観 まだ使ったことがないので分からない (GA 2025/04/09) 感想: ● ● ● ● プロトタイピングで SQL が必要になるアプリで使える・・・か？ プロトタイピングはできるだけ無料で済ませたい → Firestore? スキーマフルで有料の DB → バックエンド作る .gpl の学習コスト・・・ Data Connect

Data Connect

07 Cloud Storage

What’s Cloud Storage? 写真や動画などのコンテンツを保存できるストレージ Google Cloud Storage をクライアント特化にした感じ 特徴: ● ● シンプルなインターフェース Security Rules による保護 Cloud Storage

Cloud Storage Usage

Usage (1/) - バケットをセットアップ 無料ならこちら 後から Bucket 追加も可能 Cloud Storage Google Cloud Storage ● STANDARD ● NEARLINE ● COLDLINE ● ARCHIVE に対応

Usage (2/) - アップロード ファイルへの参照 ファイルをアップロード Upload 進捗をモニタリング Upload 後に Download URL 取得 Cloud Storage

Usage (3/) - ダウンロード / 削除 Cloud Storage

Bucket の分け方 Cloud Storage バケットは可能な限り論理的に分けた方がよい (Hobby や小規模でない限り) ● user-profiles, product-images とか とはいえ、 Firebase Cloud Storage は Security Rules があるので、そこまで神経質にな る必要はない ただし、ユーザ数が多い場合は、アクセス頻度で分けることは必要 ● 長い間ログインしていないユーザのデータは ARCHIVE に移すとか

Cloud Storage Security Rules は割愛 (Firestore とほとんど一緒)

Pricing Cloud Storage

08 Hosting

What’s Hosting? Web アプリを 1 コマンドで CDN にデプロイして配信する Static なサイトと Single Page Application が専門 (MPA もできなくはない) - Web アプリ - CDN {HTML, CSS, JS}, React, Next.js, Angular, Flutter Web etc コンテンツをユーザーに最も近いサーバーから配信する仕組み Hosting

Usage 1. 2. 3. 4. Firebase CLI をインストール $ firebase init hosting firebase.json を編集 $ firebase deploy --only hosting Hosting

Hosting Tips

Custom Domains Hosting

Rewrites Hosting にアクセスした URL のパスから表示対象を変更する ● https://foo.web.app/bigben → Cloud Functions “bigben” にリクエスト ● https://foo.web.app/helloworld → Cloud Run “helloworld” にリクエスト 他には Dynamic Link も使える Hosting

• https://foo.web.app/bigben
• https://foo.web.app/helloworld

⚠ Hosting は __session クッキーのみ Hosting Hosting は CDN なので、リクエストをキーとしてレスポンスをキャッシュする - ちなみに Fastly の CDN を使っている (Rewrite 後のヘッダーを見るとわかる) 任意のクッキーを許可すると、ユーザーごとにクッキーは大きく異なるため、キャッシュの 妨げになってしまう 唯一 __session クッキーだけが認証目的で許可されている スクラッチの認証を実装したバックエンド Cloud Run に Rewrite するときは注意

CI/CD でデプロイ Hosting は GitHub Actions でも利用可能 - GitHub Actions GitHubが提供する CI/CD サービス コードのプッシュ、プルリクエストの作成などをトリガーとして、 自動的にビルド、テスト、デプロイなどのワークフローを実行 Hosting

Preview channels 変更を本番環境にデプロイする前に、プレビュー環境で動作確認などをしたい → Preview channels を使用する これを応用すると、CI/CD でプレビューチャネルをデプロイできる - CI/CD ソフトウェア開発のプロセスを自動化し、効率化するための手法 (継続的インテグレーション & デリバリー) Hosting

Preview channels for CI/CD Zenn AI Agent Hackathon で作った CI/CD Workflow の概要 1. Preview channel を取得する。なければ新規作成 2. Web フロントエンド, バックエンド, DB を Cloud Run にデプロイ 3. Hosting で / (ルート) は Web フロントに、/api はバックエンドに Rewrite 完全な YAML はこちら https://github.com/gdsc-osaka/ai-agent-hack/blob/main/.github/workflows/ci-preview.yaml Hosting

• https://github.com/gdsc-osaka/ai-agent-hack/blob/main/.github/workflows/ci-preview.yaml

09 App Hosting

What’s App Hosting? Managed な Docker ビルド 動的な Web サイトのデプロイ シークレットの設定 GitHub Integration Cloud CDN 一方、Hosting は ● ISR 不可 ● CI/CD は手動 App Hosting

謝罪 App Hosting

App Hosting Usage

Usage (1/) - Web で GitHub を接続 App Hosting

Usage (2/) - Edit apphosting.yml App Hosting

App Hosting Tips

CI/CD はお早めに App Hosting App Hosting に限らず、本番環境でビルドできないとか動作しないとかはよくある プロジェクト開始時に少なくともビルドを、できればデプロイまで設定すると良い

10 Cloud Functions

What’s Cloud Functions? Cloud Functions バックエンドコードを様々なイベントをトリガーに実行できる - バックエンドコード = サーバー上で実行されるプログラム (JS, TS, Python) - 様々なイベント = HTTP リクエスト, Cloud Scheduler, Auth, FIrestore etc… コード自体は Cloud Run にデプロイされている模様

Cloud Function Usage

Usage 1. 2. 3. 4. Firebase CLI をインストール $ firebase init functions コードを書く $ firebase deploy --only functions Cloud Functions

Cloud Functions Use cases

1. Gemini API のタスクキュー onTaskDispatched で Cloud Tasks のキューに タスクを入れられる - Cloud Tasks: タスクキューサービス. アプリケーションのメインフローから独立した処理 を非同期で実行. 信頼性 UP (retry) Gemini API はレスポンスが不安定かつ遅いので、タ スクキューに入れてしまう Cloud Functions

2. ユーザー通知 Cloud Functions

3. Firestore のリレーション シナリオ: ● ● ユーザーは users/{userId}/posts/{postId} を更新する Collection Group では不可能なクエリを実行するために posts/{postId} にレプリカを作りたい → users/{userId}/posts が更新されたら posts も更新する Cloud Functions

Pricing Cloud Functions

11 App Check

What’s App Check? 未承認のクライアントが Firebase リソースにアクセスするのを防ぐ 前述の Security Rules の前段階 Q. Security Rules があるから不要? A. 多層防御 の観点であった方がいい 未承認のクライアントとは : ● ● ● .apk .ipa 不正入手 GitHub 上のコードからビルド Bot App Check

Usage (1/) - reCAPTCHA Enterprise App Check

Usage (2/) - キーを設定 App Check

Usage (3/) - クライアント実装 App Check

12 Extensions

What’s Extensions? Extensions Firebase プロダクトの拡張機能 (Auth, Firestore, Storage, Realtime Database) (有料版限定) 例: ● ● ● ● Delete User Data Trigger Email from Firestore Run Payments with Stripe Search Firestore with Algolia

13 Emulator Suite

What’s Emulator Suite? Firebase のプロダクトをローカルでテストできるツール 開発時の ● ● ● 複数開発者による DB のコンフリクト そもそも開発者ごとに環境分けたい 環境を初期化したい のようなときに便利 (割と) 統一されたインターフェース Admin SDK も対応 Emulator Suite

意外となんでもできる 前述した Cloud Functions で Cloud Tasks に enqueue するやつとか Firestore のベクトル検索とか (Cloud Tasks はエミュレータ用に 若干コードを変える必要あり) Emulator Suite

14 Cloud Messaging

What’s Cloud Messaging? Cloud Messaging クライアントにコンソールまたは SDK から通知を送信する . 略称は FCM 特徴: ● ● コンソールから通知を送信できる メッセージに任意のレコードを含められる

Cloud Messaging Usage

Usage - Flutter の場合 Cloud Messaging 1. Apple Push Notifications 証明書を作成 (macOS が必要だったはず) 2. デバイストークンを取得 & サーバーに保存 3. メッセージ受信用のコードを書く a. フォアグラウンド メッセージの中身を見て対応する処理を実行 Twitter なら Notifications に通知バッジを表示するとか b. バックグラウンド 何も書かなくても通知は出るが、通知をトリガーにした 処理を追加可能 . 受信したデータを localStorage に保存とか 4. サーバーでデバイスに通知を送信する

Cloud Messaging Tips

Localization 通知のメッセージをローカライズ (翻訳) したい 1. メッセージにキーを付ける 2. Android, iOS の設定ファイルに言語ごとに翻訳されたメッ セージを設定する 3. サーバーはメッセージを locKey, placeholder を locArg として送信 Cloud Messaging

動的な Localization? Cloud Messaging メッセージを動的にローカライズしたい ● 地名とか デバイスの言語設定をサーバー側に保存しておき、言語ごとに locArg を変更する

デバイストークンの管理 デバイストークンは自分で管理する必要がある ● ● アプリ起動時にトークンをサーバーに保存 uid とデバイスの識別子を PK にすると良さそう? 古いデバイストークンは削除する (デバイスが停止している可能性がある) “古い”とは?: ● ● デバイストークンの最終更新日が 1 ヶ月前 通知送信のレスポンスが UNREGISTERED or INVALID_ARGUMENT

15 Remote Config

16 Crashlytics Google Analytics

17 Firebase AI Logic

18 Genkit

19 Firebase Studio

20 Google I/O Recap (Firebase)

Firebase Studio Builder.io で Figma から Firebase Studio を作成できるように Google I/O Recap

Firebase AI Logic クライアントサイド Google I/O Recap サーバーサイド

21 Firebase Updates

GA ● ● ● ● ● Firebase App Hosting (25/04/09) Firebase Data Connect (25/04/09) Firebase Studio (25/04/09) Firebase AI Logic (25/05/20) Android Device Streaming (25/05/21) Firebase Updates

Firestore が MongoDB 互換に Firebase Updates Cloud Next 2025 にて https://zenn.dev/cloud_ace/articles/google-cloud-next25-firestore

• https://zenn.dev/cloud_ace/articles/google-cloud-next25-firestore