Firebase Data Connect・Firebase App Hosting を試す

【Google I/O Extended Nagoya 2024】 Firebase Data Connect Firebase App Hosting を試す Github: junseinagao / Twitter: @junpai_code

自己紹介 長尾准誠 (ながおじゅんせい) Kodanshatech 合同会社 Webエンジニア 1997年2月生まれ (27歳) ・Next.jsを使ったモダンフロントエンドの開発が得意です。 ・大学卒業後、フリーランスを2年間やったのちに会社員になりました。 ・大学は法学部でした。 ・趣味はTeslaを買ったり、スノボ行ったり、名城公園でスケボなどしてます。 JUNSEINAGAO/@JUNPAI_CODE

Firebase Data Connectの解説

Firebase Data Connectは... 1. Graphqlのtypeを用いてpostgresのスキーマを定義できる ・定義されたGraphqlスキーマからマイグレーションが生成される ・もちろんGraphqlスキーマからTS型情報も定義される type User @table { firstName: String! lastName: String! email: String! country: String! } JUNSEINAGAO/@JUNPAI_CODE

Firebase Data Connectは... 2. Grpahqlのqeury,mutationを用いてクエリを定義できる ・定義されたクエリからAPIとSDKが生成される ・(テーブルを全公開するわけではなくAPI経由の操作に留められる) query GetUsers @auth(level: USER) { users { id firstName lastName } } JUNSEINAGAO/@JUNPAI_CODE

Firebase Data Connectを試す

『Firebase Data Connect を試す』 予定だったのですが... PostgreSQL で安全 でスケーラブルなア プリを構築する Cloud SQL for PostgreSQL を使用して、モバイ ル アプリ、ウェブ アプリ、AI 搭載アプリを迅速 に構築できます。シンプルで安全なクエリ管 理、型安全な SDK、ローカル開発ツールによ り、新しい機能のビルドと反復処理が容易にな ります。 早期アクセスに申し込む 使ってみる JUNSEINAGAO/@JUNPAI_CODE

本日までにEarly Accessが採択されなかった 限定公開プレビュー版 Data Connect 強力な管理アプリサーバーを使用して、アプ リをPostgreSQLデータベースに接続する Firebase の SQL ソリューションについて詳しく知 りたい場合は、限定公開の Firebase Data Connect プレビュー プログラムにご参加ください。 詳細 詳細 何から始めるべきか ドキュメントを表示 #Firebase does SQL with Data Connect 後で見る 共有 JUNSEINAGAO/@JUNPAI_CODE

ので、App HostingでNext.js App Routerを試していきます 公開プレビュー版 App Hosting フルスタック ウェブアプリをグローバルス ケールでデプロイします 始める 詳細 何から始めるべきか ドキュメントを表示 App Hosting の料金 料金を見る Introducing #Firebase App Hosting 後で見る 共有 JUNSEINAGAO/@JUNPAI_CODE

Firebase App Hostingとは

Next.js App Hosting は... ・Firebase版Vercel デプロイライン ・GithubレポジトリからNext.js | Angularをデプロ イしてくれる ・Google Cloudのサービスを利用してデプロイされ る JUNSEINAGAO/@JUNPAI_CODE

Firebase App Hostingで Next.js App RouterをHostingする

Next.jsプロジェクトを作成する A server generated page! Generated Jun 14, 2024, 10:18:14 AM UTC UUID 120341cb-e403-4851-9124- ed5fc0f1d7b4 Contetents From PrismaClient 野菜 なす 野菜 にんじん JUNSEINAGAO/@JUNPAI_CODE

コンソールでポチポチする App Hosting を設定する us-central1 へのデプロイ 現在サポートされているフレームワークは Next.js と Angular です GitHub リポジトリをインポートする デプロイの設定 3 バックエンドに名前を付ける ID を入力してください firebase-app-hosting-sandbox Firebase ウェブアプリが自動的に作成されます。このウェブアプリは App Hosting バ ックエンドに関連付けられ、それに基づいて名前が付けられます。 終了してデプロイ 終了 ダッシュボード 設定 現在のロールアウト ロールアウトを作成 ロールアウトが失敗しました build-2024-06-14-003 作成日時 19:05 ソース リポジトリ https://github.com/junseinagao/firebase-app-hosting-sandbox ドメイン firebase-app-hosting-sandbox-jaukjtws.us-central1.hosted.app add apphosting.yaml (4bcefe6) junseinagao • main ドメインの管理 ロールアウトの履歴 ロールアウトのステ タス ビルド 変更の詳細 作成日時 ロールアウトが失 敗しました build-2024-06-14-003 add apphosting.yaml (4bcefe6) 19:05 ロールアウトが失 敗しました build-2024-06-14-002 add apphosting.yaml (ca5d8a8) 18:39 ロールアウトが失 敗しました build-2024-06-14-001 add apphosting.yaml (ca5d8a8) 18:33 ロールアウトが失 敗しました build-2024-06-14-000 add using prisma/cleint example (6f8ea61) 18:15 ページあたりのアイテム数: 10 1~4/4 < > JUNSEINAGAO/@JUNPAI_CODE

うまくデプロイできるはずが... JUNSEINAGAO/@JUNPAI_CODE

Firebase App Hostingの何が良いのか

Firebase App Hosting は何が素晴らしいのか ・0円からNode.jsランタイムのNext.jsをリリース できる！ App Hosting キャッシュに保存されていない送信帯域幅 キャッシュに保存された送信帯域幅 ストレージ Cloud プロダクト App Hosting のパブリック プレビュー期間中は、次の Cloud プロ ダクトのみが課金対象となります。 Cloud Run Cloud Build Artifact Registry Cloud Logging Cloud Secrets Manager Cloud Calculator 該当なし 該当なし 該当なし 該当なし 該当なし 該当なし 該当なし 該当なし 該当なし 5 GB/月まで無料 その後は $0.20/GB 5 GB/月までは無料 その後は $0.15/GB 5 GB/月までは無料 その後は $0.10/GB JUNSEINAGAO/@JUNPAI_CODE

Firebase App Hosting は何が素晴らしいのか ・Firebaseは個人開発・スモールプロダクトを中心 にコミュニティに受け入れられてきた ・では、個人開発の時にフルランタイムのNext.jsを 安くリリースする方法はあったのか？ JUNSEINAGAO/@JUNPAI_CODE

フルランタイムのNext.jsをデプロイする比較 ・Google Cloudでセルフホスト：高い ・Vercel：良いんじゃない ○ 商用利用ならProプラン契約で月$20払ってね ○ Github 組織にあげるなら1人につき+$20だよ ・Cloudflare Pages：良いんじゃない ○ ただし、サーバーの処理はedgeで動くAPIだけね JUNSEINAGAO/@JUNPAI_CODE

Firebase App Hosting なら... ・個人開発で滅多にアクセスがないアプリケーショ ンでも月0円で放置できる ・スモールプロダクトでインフラ予算が付かないチ ームでも安く早くリリースできる JUNSEINAGAO/@JUNPAI_CODE

ご清聴 ありがとうございました nagaojunsei/@junapi_code