エンジニア達の「完全に理解した」Talk　#66

Firebase を完全に理解した エンジニア達の「完全に理解した」Talk #66

自己紹介 akihiko.KIgure a.k.a グレさん 恵比寿とグンマー帝国の 2 拠点でフロントエンド開発をしています。

個人的推しOSS ※アルファベット順 Angular CHIRIMEN Open Hardware Firebase

個人的推しOSS ※アルファベット順 MDN Web Docs Nx Rust

今日テーマ

今日お話する事 ● 前回のおさらい ● Firebase の簡単な歴史と特徴 ● Firebase での構築例 ● 小ネタ

● 前回のおさらい

前回：エンジニア達の「完全に理解した」Talk #61 タイトル：Nx を完全に理解した！ ・Angular, Rust, Nx を使ったモノレポ開発の LT です。 スライド Youtube connpass

nx ワークスペース作成例

質問 続編として、下記 A or B どちらが見たい／聞きたいですか？ Youtube のコメント欄に A or B どちらかポストしてください！ A. Firebase に今回のコードをデプロイする話 B. さくら VPS に今回のコードをデプロイする話 視聴者の皆様と一緒に続編 ＆ 登壇を決めていくスタイル

● Firebase の簡単な歴史

2011 年：誕生 ・リアルタイムチャットサービス「Envolve」としてスタート ・James Tamplin と Andrew Lee がサンフランシスコで設立 2012 年：Firebase として独立 ・チャット機能とリアルタイム同期基盤を分離 ・Firebase Realtime Database を公開 ・iOS、Android、Web 間でリアルタイムデータ同期 2014 年：Google に買収 ・Google のクラウドサービス群の一部として拡大 ・Firebase Hosting、Firebase Authentication などを追加

買収後：機能拡張 ・総合プラットフォームに ・認証、ファイル保存、ホスティング、分析、プッシュ通知など ・Google Cloud Platform との連携強化 ・機械学習（ML Kit）、拡張機能、セキュリティ機能も追加

● Firebase の主な特徴

1. サーバー管理不要 ・サーバーの用意や管理を Google が代行 ・開発者はアプリの見た目や機能作りに集中可能 2. リアルタイム同期 ・データが変わると即座に全ユーザーのデバイスに反映 ・チャットアプリや共同編集アプリに最適 3. 総合プラットフォーム ・認証、データ保存、ホスティング、分析、通知など必要な機能が一式揃い ・別々のサービスを探して組み合わせる手間が不要

4. 簡単に使える ・短いコードで多くの機能が利用可能 ・初心者でも比較的簡単にアプリ開発を開始 5. マルチプラットフォーム対応 ・iOS、Android、Web アプリで同じ機能を利用可能 6. 無料から始められる ・最初は無料で利用可能 ・規模拡大に応じて料金が発生 7. Google の信頼性 ・高い信頼性とセキュリティ ・常に新機能追加と改善が継続

● Firebase の主なサービス

・Realtime Database：リアルタイムデータ同期 ・Firestore：より強力な NoSQL データベース ・Authentication：多様な認証方法（メール、SNS、匿名） ・Hosting：高速・安全なウェブサイト配信 ・Cloud Messaging：プッシュ通知 ・Analytics：ユーザー行動分析 ・Cloud Functions：サーバーレスバックエンド処理 ・ML Kit：モバイル向け機械学習機能

● Firebase の簡単なまとめ

Firebase は「アプリの裏側（サーバー部分）」を 簡単に作れる Google のサービス。 プログラミング初心者でも、リアルタイム同期や ユーザー認証、通知などがすぐ使える。 スマホアプリやウェブサービスを素早く作りたい人に とって、とても便利な「全部入りの道具箱」。

● Firebase での構築例

プロジェクト構成 ・フロントエンド: Angular 20.x デプロイ先： Firebase Hosting ・バックエンド: Rust + Actix-web デプロイ先： Firebase Functions ・モノレポ管理: Nx 21.x ・CI/CD: GitHub Actions + Nx Cloud

前提条件 必要なツール ・Node.js 22.x ・Angular CLI 20.x ・Rust (latest stable) ・Firebase CLI ・Git

Firebase プロジェクトの作成 ・Firebase Console にアクセス ・新しいプロジェクトを作成 ・プロジェクト ID をメモ 例: completely-understood-vol61

• https://console.firebase.google.com/

Firebase CLI のセットアップ # Firebase CLI のインストール npm install -g firebase-tools # Firebase にログイン firebase login

# プロジェクトの初期化 firebase init # 選択項目: # - Hosting: Configure files for Firebase Hosting # - Functions: Configure a Cloud Functions directory and its files # - Use an existing project: 作成したプロジェクトを選択 # - Public directory: dist/apps/frontend/browser # - Configure as a single-page app: Yes # - Set up automatic builds and deploys with GitHub: Yes

設定ファイルの作成 firebase.json, .firebaserc の作成

バックエンドの Firebase Functions 対応 package.json, index.js の作成

フロントエンド環境設定の追加 environment.ts, environment.prod.ts の作成

CI/CD パイプラインの設定 deploy.yml の作成

Firebase Token の設定 Firebase CLI でトークンを生成

Github の Secret Token の設定 Firebase CLI でトークンを生成

ローカルでのテスト ローカルビルド npx nx run-many --target=build --all

ローカルでのエミュレーター起動 firebase emulators:start

http://localhost:4000/ にアクセスすると

• http://localhost:4000/

ローカルでのエミュレーター起動（最小構成） firebase emulators:start --only hosting,functions

動作確認

つまづきポイント 1. CORS エラー - Firebase Functions で CORS ヘッダーが正しく設定されているか確認 - フロントエンドの API URL が正しいか確認 2. ビルドエラー - Node.js と Rust のバージョンが正しいか確認 - 依存関係が正しくインストールされているか確認

いよいよデプロイです！

その前に

Rust を Functions にデプロイする準備 Firebase プロジェクトをアップグレードする必要があります。

クラウド破産怖いですよね。。。。 自分も怖いので、ChatGPT に聞いてみま した。

Q ・フロントエンドは、Angular v20.x をビルドしたもの ・バックエンドは、Rust v1.87.0 をビルドしたバイナリ Firebase にデプロイするとランニングコストは どれくらいかかりますか？ フロントが API 送信したデータをバックエンドが 受け取り 2 倍にした結果を返却するシンプルなものです。

A

本当に？？？

◆ フロントエンドのコードサイズ ◆ バックエンドのコードサイズ

フロントエンド ー バックエンドの通信サイズ

◆ Firebase Hosting (フロントエンド) 無料枠(Spark) ・月間 1GB のストレージ ・月間 10 GB のデータ転送量まで無料 有料プラン(Blaze) ・1 GB あたり $ 0.026 ・1 GB のデータ転送あたり $ 0.15 ◆ Firebase Functions (バックエンド) 有料プラン(Blaze) ・1 百万回の関数呼び出しあたり $ 0.40 ・1 GB秒の計算時間あたり $ 0.000002 ・アウトバウンドネットワークトラフィックは、1 GB あたり $ 0.12

A このようなシンプルなプロダクトの場合 Firebaseの無料枠で十分に対応でき、 ランニングコストは基本的に 発生しないでしょう。

いよいよデプロイです！

・・・なんですが！

手動デプロイの段階で問題が 発生して検証終わりませんでした

次回 CI & 自動デプロイをするネタとして 取っておいて頂けたら嬉しいです

登壇の失敗を次回登壇の ネタにするスタイル

● 小ネタ

Firebase のダッシュボードは、 Angular で作られています。

まとめ Firebase できるよ、にんげんだもの ぐれを

ご静聴ありがとうございました！