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

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

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

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

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

今日テーマ

今日お話する事 ● 前々回のおさらい ● 前回のおさらい ● Firebase での構築例

● 前々回のおさらい

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

nx ワークスペース作成例

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

● 前回のおさらい

前回：エンジニア達の「完全に理解した」Talk #66 タイトル：Firebase を完全に理解した！ ・Angular, Rust を Firebase にデプロイする LT です。 スライド Youtube connpass

● Firebase での構築例

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

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

ここで、気付くべきだった・・・。

お分かり頂けたであろうか・・・？

一体いつから・・・・・・ Firebase functions に Rust の バイナリをデプロイ出来ると 錯覚していた？

これを理解した時のワイ

では、実現できる方法は？

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

deploy build Cloud Functions Rust Github Action Nx Cloud deploy build Angular

この構成で、デプロイを解説します！

Firebase の Hosting の準備

Firebase emulator で ローカルの起動確認 ※フロントエンドのみ

デプロイ環境準備

Firebase の token の取得

$ firebase login:ci

Nx Cloud の token の取得

・Nx Cloud にログイン ・連携リポジトリ選択 ・開発用 Organization 作成 ・Nx Cloud の token 作成

Nx Cloud ログイン > Organization > Overview > Setting > Access control

Github の secret token 設定

Github リポジトリ > Setting > Secret and variables > actions

ワークフローの作成

Nx Cloud の token Firebase の token

Pull Request がマージされると

Nx Cloud のジョブのリンク

ビルド結果が deploy されると

Firebase ログイン > プロジェクト > Hosting > ダッシュボード 最新の deploy が分かる

GitHub Actions + Nx Cloud の 組み合わせメリット

◎自動化された作業でミスを減らせる ・コードを GitHub にアップするだけで、自動でテストやビルドが実行される ・手作業の操作が不要なので、人的ミスが起きにくい ◎作業時間を大幅に短縮できる（Nx Cloud のキャッシュ機能） ・Nx Cloud は「前にやった作業の結果（キャッシュ）」を覚えていて、再実行せずに済む ・例：テストやビルドに 5 分かかっていたのが、数秒で終わることもある ◎チーム開発でも効率アップ ・他のメンバーがビルドした結果も共有できるので、同じ作業を繰り返さなくてよい ・結果的に、待ち時間が少なくなる ◎コードの品質が保たれる ・GitHub Actions で自動的に「テストが通るか？」「書き方は正しいか？」を確認できる ・バグやミスが入りづらくなる ◎どこでも同じ環境で確認できる ・手元のパソコンと GitHub 上の動作を合わせることで「うちでは動いた問題」が減る ・誰がやっても同じ手順でチェックされる安心感 ◎本番環境へのデプロイ（公開）も自動化できる ・GitHub Actions 経由で Firebase や Cloud Run に自動でデプロイ可能 ・「アップロード忘れ」などのミスを防げる

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

あれ・・・？バックエンドは・・・？

ということで、次回告知！！！

次回テーマ Cloud Functions

Google Cloud を完全に理解した エンジニア達の「完全に理解した」Talk #68

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