2024年に発表されたFirebase(Web)の新機能を使ってみよう

https://gdgkwansai.connpass.com/event/327195/

Transcript

1. 1 Kanon (@ysknsid25) #gdgkwansai_kyoto 2024年に発表された Firebase(Web)の新機能を 使ってみよう！
2. README @ysknsid25 inori-kurari.info
3. Summary 3 • App Hosting ◦ CloudRunと統合して簡単にSSRができるようになった • Data Connect ◦ CloudSQLでホストされているPostgreSQLに直接接続できる ようになった ◦ GraphQLベースの簡潔な言語で定義できる • Firebase Genkit ◦ Geminiをより簡単に使えるようにSDKが追加
4. App Hostingとは 4 App Hosting
5. App Hostingとは 5 App Hosting • Firebase Hostingの代替品というわけではない ◦ 静的なアプリなら従来のHosting ◦ SSRなどサーバーサイドでの処理が必要ならApp Hosting ◦ このように棲み分ける • 料金 ◦ App HostingはBlazeプランでのみ利用可能
6. これまでFirebase HostingでSSRを扱うには 6 App Hostingとは • Cloud FunctionsやCloudRunの構築を自分でやらないといけな かった ◦ 過去の自分のブログをみると、やろうとしてめっちゃハマって た • 一方でVercelにデプロイするとその辺意識せずに勝手にデプロイ してくれる ◦ 個人リリースのアプリなので、「ほなVercelでええやん」となっ た • そういう人たちを今回やっと取り込みに来た感がある
7. 当時の私のこまりっぷり 7 App Hostingとは
8. Vercelで動いているアプリで検証 8 App Hostingを検証
9. Vercelで動いているアプリで検証 9 App Hostingを検証 この部分を SSR で取得している デプロイ ↓ 表示できれば動い ている
10. プロジェクトを作り、App Hostingを選択 10 App Hostingを検証
11. 画面に従って最後まで進むと勝手にデプロイが始まる 11 App Hostingを検証
12. SSRのログなどはCloudRun側に統合されている 12 App Hostingを検証
13. 1,2分待つとデプロイが完了 13 App Hostingを検証
14. 感想 14 App Hostingの検証 • 画面ぽちぽちしてただけでデプロイが終わった • なによりすごいのは、VercelからFirebaseに移行するにあたって コードを一行も変えていないこと ◦ 設定ファイルすらいじってない • 試せてないけど、GitHubインテグレーションされているので、バー ジョンのロールアウトなんかも簡単にできるらしい
15. What’s Firebase Data Connect 15 Data Connect • これまで ◦ Firebase でデータソースを扱うには基本的にはFirestoreを使う必要 があった ◦ Firestore = NOSQL ◦ RDB(CloudSQL)を使うには、Cloud Functionsを作る必要 • これから ◦ Data Connect が選択肢の一つに
16. Data Connectでできること 16 Data Connect • GraphQLを書けば、Data Connectが勝手にSQLへ変換してくれる ◦ 裏側ではCloud SQL for PostgreSQLが動いている • SQLに詳しくない人でもGraphQLだけわかればDBにアクセスできる ◦ 後述しますが一長一短とは思います • Cloud SQLを使うための設定などがめちゃくちゃ簡単 • 現在は限定公開プレビューのため、申請者のみ利用可能
17. 17 Data Connect たぶん今日話す内容で 記事書いたり発表してるのは 日本人では自分が初 Qiitaにも記事あるけど ちゃんと環境作って試して 記事を出してるのは自分 がおそらく初
18. 18 Data Connect
19. Cloud SQL インスタンスの用意 19 Data Connectの検証
20. Cloud SQL インスタンスの用意 20 Data Connectの検証
21. Cloud SQL インスタンスの用意 21 Data Connectの検証
22. Cloud SQL インスタンスの用意 22 Data Connectの検証
23. VSCodeに開発用拡張機能を追加 23 Data Connectの検証
24. firebase init dataconnect でプロジェクトを作成 24 Data Connectの検証
25. デモ用のファイルができあがる 25 Data Connectの検証
26. 編集に連動してDBの定義も修正される 26 Data Connectの検証
27. query, mutationも自動作成 27 Data Connectの検証
28. VSCodeのエディタから実行も可能 28 Data Connectの検証
29. データを登録 29 Data Connectの検証
30. 登録したデータを参照 30 Data Connectの検証
31. 本番へデプロイ 31 Data Connectの検証
32. Cloud SQLのログを観察 32 Data Connectの検証
33. デプロイ後、Firebase Console 33 Data Connectの検証
34. 実行 34 Data Connectの検証
35. Cloud SQL側のログを確認 35 Data Connectの検証
36. Cloud SQL側のログを確認 36 Data Connectの検証
37. アプリに組み込んで使うには？ 37 Data Connectの検証 SDKに firebase/data-connect がいないので 検証できず…
38. 感想 38 Data Connectの検証 • ローカルでの開発体験やGraphQLがそのままSQLになっ てるのは素直に感動 • アプリケーションの成長に伴いFirestore -> CloudSQLへの 移行とかが発生しなくなりそうなのは良い • 複雑なデータ抽出が必要になったり、チューニングが必要 になったときはしんどそう • どういうGraphQLを書けばどういうSQLができるか？がイ メージできないのはしんどい
39. What’s Firebase Genkit 39 Firebase Genkit
40. Discord Chat Botを作ってみる 40 Firebase Genkitの検証
41. 必要なライブラリたちをインストール 41 Firebase Genkitの検証
42. APIキーの取得 & Discord側の設定を割愛してコード 42 Firebase Genkitの検証
43. 作成したbotをサーバーに追加 & node index.js 43 Firebase Genkitの検証
44. 話かけると・・・ 44 Firebase Genkitの検証
45. 感想 45 Firebase Genkitの検証 • 実装自体はめちゃくちゃ手軽 • Vertex AI in Firebaseとサーバーサイド側は試せてないのでこれも試したい
46. @tanabee さんの記事が詳しい 46 Firebase Genkitについて
47. 47 ご清聴、あざざました
48. 48 📢 おわりに宣伝 🙏 オフラインLT会を 神戸で開催してます！ TS＋周辺技術 Figma、npmなどなど 範囲が広いので登壇しやすい！