🔥

Firebase9へ移行してみた。つまづいた点を公開

2022/01/24に公開

はじめに

個人開発しているSushi WorkというWEBサービスをFirebase8から9に移行した時のメモです。これから移行する人のお役に立てば幸いです。

移行を完了させてみて思うのは、1番の大敵は、移行面倒だなー、デグレしたらやだなーという気持ちです。やってみると、Firestoreのクエリ書き換えに時間はかかるけど、そんなに難しくないので、さくっと終わらせてしまいましょう!

前提

基本はここに書いてあります。
https://firebase.google.com/docs/web/modular-upgrade

公式よりざっくり知りたい方はこちら。
https://zenn.dev/hiro__dev/articles/605161cd5a7875

移行前のサイズを知る

Firebase9にする1番のメリットは、Firebaseライブラリのバンドルサイズの削減です。どれくらい削減できたかを知るために、移行前のサイズを調べておきましょう。

https://github.com/webpack-contrib/webpack-bundle-analyzer
を使います。Vue cliを使っていれば特にインストールせずに使えます。

npx vue-cli-service build --report

を実行すると、dist/report.html が作成されるので、 open dist/report.html
で開けます。

FirebaseUIは、compat版だけに対応

FirebaseUIは、v6.0.0で、Firebase9のcompat版だけに対応してます。
https://github.com/firebase/firebaseui-web/releases/tag/v6.0.0

そのため、FirebaseUIを使っていると、サービスをFirebase9のmodular版に対応させても、バンドルサイズ削減の恩恵に預かれません😭

自分のサービスは、FirebaseUIを使っていたため、バンドルサイズはgzippedで12KBしか削減できませんでした。

https://github.com/firebase/firebaseui-web/issues/837
https://github.com/firebase/firebaseui-web/issues/877

まだmodular版に対応させる目処が立ってないようなので、気長に対応を待つか、FirebaseUIを外す必要がありそうです。

手順

  1. とりあえずcompat版で動くか確認
  2. 簡単にできるものから書き換える。Firebase Auth、Functions、Analyticsなど
  3. 時間がかかるものを書き換える。Storage、Firestoreなど
  4. initializeAppを書き換える。

自分の場合はFirestoreのクエリ書き換えに全体の8割の時間がかかりました。

公式ドキュメントにFirebase9とFirebase8の書き方が両方載ってるので、それを見比べながら修正していきます。


https://firebase.google.cn/docs/firestore/query-data/listen?hl=ja

リファレンスも役立ちました。
https://firebase.google.com/docs/reference/js

Firestoreでの注意点

existsがプロパティからメソッドに変更されている

https://zenn.dev/mktu/articles/3905b13500ffb6#注意事項

この記事を見ていたので、事前に気付けました。他にもこういう罠がないか不安になリます。

2022/02/21 追記
公式ドキュメントにも本件が追加されていました。
https://firebase.google.com/docs/web/modular-upgrade#exists-update

サブコレクションの取得

クエリ書き換えをしていると、最初はこのクエリ、どう書き換えるんだろうと悩みます。例えば、サブコレクションの取得は、どうすればいいのか戸惑いました。

https://qiita.com/kyk_nr/items/fb59e237020189dc1c08

何度も書き換えていると、段々理解できます。最初はとっつきにくいですが、徐々にこっちの書き方のが良い面もあるなと思えてきます。

オフラインモード

オフラインモードを有効化するコードの書き換えです。

v8
firestore
  .enablePersistence({
    synchronizeTabs: true,
  })
  .catch(function(err) {
    if (err.code == "unimplemented") {
      console.log("Offline support error.");
    }
  });
v9
enableMultiTabIndexedDbPersistence(db).catch(function(err) {
  if (err.code == "unimplemented") {
    console.log("Offline support error.");
  }
});

Firebase9では、 enableIndexedDbPersistenceenableMultiTabIndexedDbPersistence の2つのメソッドが用意されていました。

複数のタブで同一のIndexedDBを使用したいので、enableMultiTabIndexedDbPersistence を使っています。

https://firebase.google.com/docs/reference/js/firestore_.md#enablemultitabindexeddbpersistence

Admin SDKもmodular対応が必要だよ

https://firebase.google.com/docs/admin/migrate-node-v10?hl=en#node.js

こちらはまだ対応してないので、後でやる予定。

終わりに

こういう気が重くなる作業は、まず少しでも着手して、やる気を上げるのが重要だなーと感じました。

Discussion