Google I/O 2024で発表された Firebase App HostingでNext.jsのSSRを試す

Google I/O Extended 2024でのLT発表資料です。

Transcript

1. Google I/O 2024で発表された Firebase App HostingでNext.jsの SSRを試す Copyright © 2024 blessing software. All Rights Reserved. Kanon (@samurai_se) #GDG_Kyoto 1
2. 自己紹介 2 Kanon 株式会社 虎の穴ラボ 個人事業 blessing software samurai_se ↓詳しくは↓ • 3次元に嫁が1人います。2次元にはたくさんいます。 • 水瀬いのりライブTで神戸から色んなテックカンファレンスに登壇してる人です • 最近「アイコンみたことある！」と声かけていただける率が増えてて嬉しい • 本業はKtor(Kotlin), Next.jsで副業がLaravel, Nest.js,Next.js Copyright © 2024 blessing software. All Rights Reserved.
3. 祝!! 新機能リリース 🎉 3 Copyright © 2024 blessing software. All Rights Reserved.
4. 簡単にFirebase関連のリリース • App Hosting ◦ CloudRunと統合して簡単にSSRができるようになった • Data Connect ◦ CloudSQLでホストされているPostgreSQLに直接接続できるようになった ◦ GraphQLベースの簡潔な言語で定義できる • Geminiをより簡単に使えるようにSDKが追加 • モニタリングの強化 4 Copyright © 2024 blessing software. All Rights Reserved.
5. Webエンジニアの自分として特に気になったもの • App Hosting ◦ CloudRunと統合して簡単にSSRができるようになった • Data Connect ◦ CloudSQLでホストされているPostgreSQLに直接接続できるようになった ◦ GraphQLベースの簡潔な言語で定義できる • Geminiをより簡単に使えるようにSDKが追加 • モニタリングの強化 5 Copyright © 2024 blessing software. All Rights Reserved.
6. Webエンジニアの自分として特に気になったもの • App Hosting ◦ CloudRunと統合して簡単にSSRができるようになった • Data Connect ◦ CloudSQLでホストされているPostgreSQLに直接接続できるようになった ◦ GraphQLベースの簡潔な言語で定義できる • Geminiをより簡単に使えるようにSDKが追加 • モニタリングの強化 6 Copyright © 2024 blessing software. All Rights Reserved. そのうち今回は App Hosting を試してみた話
7. App Hosting Copyright © 2024 blessing software. All Rights Reserved. 7
8. App Hostingとは 8 Copyright © 2024 blessing software. All Rights Reserved.
9. App Hostingとは • Firebase Hostingの代替品というわけではない ◦ 静的なアプリなら従来の Hosting ◦ SSRなどサーバーサイドでの処理が必要なら App Hosting ◦ このように棲み分ける • 料金 ◦ App HostingはBlazeプランでのみ利用可能 9 Copyright © 2024 blessing software. All Rights Reserved.
10. これまでFirebase HostingでSSRを使うには • Cloud FunctionsやCloudRunの構築を自分でやらないといけな かった ◦ 過去の自分のブログをみると、やろうとしてめっちゃハマってた • 一方でVercelにデプロイするとその辺意識せずに勝手にデプロイ してくれる ◦ 個人リリースのアプリなので、「ほな Vercelでええやん」となった • そういう人たちを今回やっと取り込みに来た感がある 10 Copyright © 2024 blessing software. All Rights Reserved.
11. 当時の私の困りっぷり 11 Copyright © 2024 blessing software. All Rights Reserved.
12. 検証の方法 Copyright © 2024 blessing software. All Rights Reserved. 12
13. Vercelで動いているアプリで検証 13 Copyright © 2024 blessing software. All Rights Reserved.
14. Vercelで動いているアプリで検証 14 Copyright © 2024 blessing software. All Rights Reserved.
15. Vercelで動いているアプリで検証 15 Copyright © 2024 blessing software. All Rights Reserved. この部分を Server Actions で取得している デプロイ ↓ 表示できれば動い ている
16. App Hostingを始める Copyright © 2024 blessing software. All Rights Reserved. 16
17. プロジェクトを作り、App Hostingを選択 17 Copyright © 2024 blessing software. All Rights Reserved.
18. 画面の案内に従って、GitHubリポジトリと接続 18 Copyright © 2024 blessing software. All Rights Reserved.
19. 最後まで進むと勝手にデプロイが始まる 19 Copyright © 2024 blessing software. All Rights Reserved.
20. SSRのログなどはCloudRun側に統合されている 20 Copyright © 2024 blessing software. All Rights Reserved.
21. しばらく待つとデプロイが完了し… 21 Copyright © 2024 blessing software. All Rights Reserved.
22. きちゃあああああああああ 🎉 22 Copyright © 2024 blessing software. All Rights Reserved.
23. 感想 • 画面ぽちぽちしてただけでデプロイが終わった • なによりすごいのは、VercelからFirebaseに移行するにあたって コードを一行も変えていないこと ◦ 設定ファイルすらいじってない • 試せてないけど、GitHubインテグレーションされているので、バー ジョンのロールアウトなんかも簡単にできるらしい 23 Copyright © 2024 blessing software. All Rights Reserved.
24. 24 こんなに素晴らしいのにまだパブリックプレビュー版！ Copyright © 2024 blessing software. All Rights Reserved. 新機能など楽しみに待ちたい
25. 25 Copyright © 2024 blessing software. All Rights Reserved. 📢 最後に宣伝だけ 🙏 オフラインLT会を 神戸で開催します！ オンラインでも毎朝もくもく会 してます！
26. 26 Copyright © 2024 blessing software. All Rights Reserved. 📢 最後に宣伝だけ 🙏 PHP以外の話も ウェルカムです！！ GCPの話もしにきて ください！
27. 27 ご清聴、あざざました Copyright © 2024 blessing software. All Rights Reserved.
28. Copyright © 2024 blessing software. All Rights Reserved. Illustrated by @amon_mikio おわりに 三ノ宮で待ってます！！ samurai_se