Nuxt.js(SPA)+FirebaseのWebアプリで初マイグレーションをしてけど、いろいろ失敗した話。。

これはただの失敗談です。。役に立つかわからないけど、誰かの参考になるといいな。。

Nuxt.js+Firebaseで開発したWebサービスをリリースして2ヶ月目くらい。
サービス止めて、初マイグレーションしてときの失敗談です。

サービスを止めてやりたかったこと

いままではちょこっとした変更が多かったため、
サービスを止める必要なく、Nuxtアプリの更新だけで十分でしたが、
新しい機能を追加する際に、Firestoreのスキーマを変える必要が出てきました。

やりたいことは、
「 今までのデータを読み取って、別の形式に再構成する 」
という感じのことで、止めないとダメかなと。

メンテンナンスのときの手順

手順はこんな感じ。

1. メンテナンス画面に遷移するようにmiddlewareを変更
2. firestoreのルールを全部ブロックするように変更
3. スキーマ変更処理を実行
4. メンテナンス画面を解除し、hostingに最新版をアップロード
5. firestoreのルールをもとに戻す

ポイントとしては、

• ページを移動したら、middlewareでメンテナンス画面に遷移する
• クライアントから変更されないように、全部ブロックするルールに変更する

の2点くらい。

結果、かなりの失敗をしました。。

やらかした失敗と反省点

ダメだったのは以下の2点。

1. 時間がかかりすぎ(予想5h以内→実際11h)
2. メンテナンス画面がちゃんと出ていなかった

1. 時間がかかりすぎ問題

一番の失敗は時間かかりすぎです。。
予想以上に時間が。。予想5h以内→実際11h

対象のスキーマが、

本 - 履歴 - ユーザ

多対多の関係を持つ構造を持っていて、
本を起点に履歴データの構造を変更するような処理だった。

規模としては、本の件数が47670ドキュメントで、履歴が58144ドキュメント。

実際に実行してみたところ、速度が上がったり下がったりで、
1時間に5000冊位な感じ。。これだけで10時間近く。。

振り返ってみて

やってみていくつか良くない感じだったなと。。
振り返ってみて、改善できそうなのは以下の2点な感じ。。

a. メンテナンスでは差分部分のみ反映する

全量を読み込んで、反映していたので、かなりの時間が。。

とはいえ、1日の変更であれば、そこまで多くないので、
事前に全量の変更を用意しておき、メンテナンスにしてから、
差分があるところだけを更新をするなどのほうが良かった気がしてる。。

次はそうしよう。。

b. 処理の並列実行

内部の処理もPromise.allを使ってない部分がいくつか。。

foreachで実行している部分を置き換えて、
並列実行にするだけでも改善されそうな感じ。。

この記事がわかりやすい感じだった。

• Node.js で Promise の直列実行と並列実行、同時実行数の制御 - Qiita

2. メンテナンス画面が出てない

メンテナンスをはじめてから、GoogleAnalyticsを見てると、リアルタイムユーザがちらほら。
終わってからも、メンテナンス画面じゃないとの報告もちらほら。。

Firebase Hostingにアップロードしてもキャッシュが残っているとだめだったもよう。。

振り返ってみて

振り返ってみて、改善できそうなのは以下の2点な感じ。。

a. PWAモジュールを使ってnetworkファーストで取得する

以下の記事の前半で書かれている通り、キャッシュ戦略を設定することで解決できそう。
・Nuxt.js(SPA)とFirebaseで強制リビジョン（バージョン）アップするならPWAモジュールを使おう - Qiita

b. Remote Configを使って切り替える

同じく上記の記事で書かれている通り、Remote Configを使うのが良さそう。
・Firebase Remote Config  |  Firebase

Remote Configの値によって、メンテナンス画面の表示を切り替えれるようにしておけば、
Firebaseのコンソール上での変更で、切り替えれるようにできる感じ。

まとめ

やってみてわかることも多いですが、なかなかつらい感じ。。

Firebase/Firestore関連の運用系の話はあまり見ないので、
とりあえず書いてみましたが、誰かの役に立てば。。

こんな方法もあるよ！こっちのほうがいいよ！などあれば、
コメントもらえるとうれしいです(´ω｀)

ほかの失敗談

以前にもこんなのを書きました。
初級向けの話が多いですが、実際にやってみての体験談的な話。

• Nuxt.js(SPA)+Firebaseで積読用の読書管理サービスを作ってみたときにハマったこと... - Qiita
• Firebaseで作ったWebサービスを3ヶ月運用してみて、ハマったこと・知っておきたかったこと - Qiita

こんなのつくってます!!

やらかしたWebサービスはこちら。。
積読用の読書管理アプリ 『積読ハウマッチ』
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてください〜

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪