見出し画像

Angular(standalone)+Firebaseを使ったアプリで、複数のFirebaseプロジェクトを使用する方法

はじめに

Angular(standalone)+Firebaseを使ったWEBアプリもしくはionicなどのスマホアプリを構築するとき、通常であれば一つのFirebaseプロジェクトを使用することがほとんどです。
ですがいくつかの理由により、一つのアプリ内で複数のFirebaseプロジェクトを使用したいことがあります。
例えば、単純に新しい機能を追加する時にデータも完全に切り分けたいという理由や、すでにある他の機能をマージしたいなどの理由、さらには使用するユーザーの国ごとにFirebaseのリージョンを切り替えたい場合などが考えられます。
今回は、ユーザーの国ごとにFirebaseのリージョンを切り替えたい場合を想定して、最も簡易な構築方法を説明したいと思います。
なお、angularおよびFirebaseの使い方などはご存知である前提での説明になりますので、今回の主目的以外の部分については割愛して掲載しています。


環境

⭐️必要なパッケージ

  • @angular: v16.2.2

  • @angular/fire: v7.61 (現時点での最新版)

  • firebase: v9.23.0 (@angular/fireがv10以降に対応していないため)

  • rxfire: v6.0.3 (v6.0.4以降はfirebasev10未満には対応していないため)

 ※ 今回はAngular縛りなので、angular/fireを使用していますが、バージョンアップが滞っているので、今後はfirebaseそのものとrxfireのペアで構築していく必要があるかもしれません。
その場合、今回の記事の内容は随時変更していくつもりです。

※ @angular/fireのv16がリリースされました。(2023/10/27)
取り急ぎfirebaseとrxfireも共に最新版にアップデートし、手持ちのプログラムをビルドし簡単なテストをしてみましたが、エラー等発生しませんでした。細かい部分のチェックまではしていませんがこれで今後の不安も解消です。

※ 更新(2024/7/31)
とりあえず1年ほど経過しましたので現在の最新バージョンでも確認してみました。

  • @angular: v18.1.2

  • @angular/fire: v18.0.1

  • firebase: v10.12.4

  • rxfire: v6.0.5

現状問題なく動いていると言いたいのですが、今度は@angular/fireの中で重要な役割をしているrxfireの更新が停止、というよりプロジェクトが破棄?された模様です。
そのためangular@18以降の新しい推奨設定ではコンパイルエラーになる可能性があります。設定を古いものにすることで回避は可能ですが、この先どうなることやらわかりません。
ちなみに設定は以下の部分です。
tsconfig.json内の
"moduleResolution": "node" (旧設定)
"moduleResolution": "bundler" (新推奨設定)

個人的には@angular/fireチームが更新を引き継ぐか、取り込む形になるのではないかと考えていますが、@angular/fire自体もFirebaseの機能アップデートに対応しきれていないように見受けられるため、ちょっと行く先不安な状態が続きそうです。
firebase@11以降がリリースされた時にこの組み合わせが動くかどうかは神のみぞ知るところでしょうか?

⭐️Firebase環境

  • USリージョンのプロジェクト

    • リージョンコード: nam5 (us-central)

  • JPリージョンのプロジェクト

    • リージョンコード: asia-northeast1

  • 開発用のプロジェクト

    • リージョンコード: asia-northeast1(近いところでOK)

ここから先は

11,007字 / 2画像

¥ 400

この記事が気に入ったらサポートをしてみませんか?