私たちは、firestore.rulesのどこで、どのようにして弾かれているのか？
概要
firestore.rulesは、ルールを侵すとこんな感じでフロントで怒ってくれます。
ざっくり訳すと「このpostを行うためのパーミッションは存在しません、もしくはパーミッションが不十分な状態です」などになるでしょうか。
しかしこれだと、「firestore.rulesに関してエラーが出た」ということ以外、何がなんだか正直わかりません。
ということで本記事では、firestore.rulesで弾かれた際に、具体的にどの行で弾かれていて、そのときに運んでいるデータの内容はどのようなものなのかを知るためのデバッグ方法を整理していきます。
こちらはざっくり、Firestoreのemulatorを用いて実現します。
手順
手順はこんな感じです。
- Firebaseのemulatorをセットアップ
- Firestoreのemulatorを立ち上げる
- post先を、本番からemulatorのFirestoreに変える
- ローカルから何かpostする
- emulatorにアクセスして詳細確認 🎉
0. Firebaseのemulatorをセットアップ
まず、Firebase各種サービスのemulatorをセットアップします。
すでに完了している方は、こちらのステップはスルーしていただいて構いません。
まだの方は、こちらの記事の「インストール」という節にやり方が記述されているので、それを参考にセットアップを進めてください。
ちなみにこちらの記事は、Firestoreのemulatorでできること全般をわかりやすく説明してくださっており、その際のよくあるエラーも列挙してくれているので、おすすめです。
1. Firestoreのemulatorを立ち上げる
次に、Firestoreのemulatorをターミナルから立ち上げます。
これを叩けばOKです。
FIRESTORE_EMULATOR_HOST="localhost:8080" firebase emulators:start --only firestore
emulatorがリッスンするポートを指定し、emulatorのうちfirestoreだけ起動するよう指定しています。
長いので、面倒な方はエイリアスにすることをおすすめします。
2. post先を、本番からemulatorのFirestoreに変える
次にpost処理の向け先を、本番のFirestoreから、emulatorのFirestoreに変更します。
やり方はとてもかんたんで、post処理をしている箇所で、こんな風に保存先のDBを定義していると思うのですが、
// appはapiKeyなどのconfigからFirebaseプロジェクトをinitializeしたもの
const db = getFirestore(app)
それをこういう感じに変更してください。
const db = getFirestore()
connectFirestoreEmulator(db, "localhost", 8080)
実際のFirestoreにつなげる必要はないので、getFirestoreに引数は要りません。
これで、emulatorのFirestoreに書き込みできるようになります。
3. ローカルから何かpostする
あとはローカルから、何かwrite処理を投げてみてください。
ここでは例として、下図のような、タイトルと絵文字と本文を入れるフォームで、コード側から強引に絵文字に不適切な値を入れて、その状態でpostをしてみます。
4. emulatorにアクセスして詳細確認 🎉
それではemulatorにアクセスして、3のリクエストがどうなったのかを見ていきましょう。
1でemulatorを立ち上げたので、そのemulatorUIをhttp://localhost:4000/firestore/requestsから確認できます。
叩くと、下図のような画面になるはずです。
ちょっと私は他のリクエストも表示されてしまっているので、わかりづらいですが、postを1回しただけであれば、赤色の通行止めマークがアイコンのリクエストが1件表示されているはずです。
そのリクエストをクリックしましょう。
すると、以下のような画面が表示されると思います。
画面左側で、rulesのどの行で弾かれたのかが示されており、右側で、リクエストの詳細が確認できます。
特にrequest.resourceを見ると、投げたデータの内容を表示してくれます。
上図の例でいうと、emojiというプロパティの中にhogeが入っちゃっているのが確認できますね。
これでfirestore.rulesのかんたんなデバッグが可能となったので、抽象的なエラーを具体的に深堀りしていくことができそうです🙌
所感
個人的に、rulesのデバッグどうすればいいのかなとけっこう気になっていたので、やり方がわかってよかったです😁
また、調べる中でrulesのテストに関する情報もけっこうあったので、また書いてみたいと思います。
参考記事
Discussion