TL, DR

• Firebaseの勉強がてら自分用のブログサイト(これ)を作成しました
• Firebaseはすごいぞ(今更・・・)

作ったきっかけ

色々あって直近でFirebaseでサーバレスアプリケーションの開発をするかもしれない、ということになった(言い方が曖昧だけど確定ではないのも事実なのでこれくらいまでしか言えない)。

じゃあ流石に手を動かして自分でなんか作るか、何を作ろうとぼんやり思案したところ以前から自分でブログサイトを作りたかったことを思いだし難易度としても良さげだったので作ることにした。

使用した技術

• React(雛形はcreate-react-appで作成。webpackの導入は別のリポジトリで練習する)
• Firebase(Cloud Functions込みなので泣く泣く課金プランにした。と言っても料金は知れてるが)

さっすがサーバレス(Firebaseにおんぶにだっこ)アプリケーション

実際にmBaas(Firebase)を使ってみての感想

本当に便利。

これに尽きる。

認証、ストレージ、DB、ホスティング、バッチ処理など全部コミコミなんだから、なんというか、サーバサイド出身の自分としては

今まで僕がRailsでやっていたことは一体・・・

と思うくらいには衝撃を受けた。

このサイトで実装したもの

管理者としてのログイン機能

記事は管理者である自分しか操作出来ないようにするのはマストなわけで。

ここら辺はFirestoreとセキュリティルールの入門としては良い勉強になった。

参考にしたのはここら辺のサイト

https://firebase.google.com/docs/auth/admin/custom-claims

https://qiita.com/zaburo/items/cd078d768bd9fd239bf4

https://flattsecurity.hatenablog.com/entry/2020/04/10/122834

https://lnly.hatenablog.com/entry/2019/01/25/012744

どうやってユーザの権限管理をするのかというと、流れとしては

1. adminUsersにドキュメントが作成された時Cloud Functionsでそのアカウントにfirebase-adminを使ってadmin: trueみたいなフラグを追加するような関数を作成してデプロイする

2. ログインが成功した後にuser.getIdTokenResultの戻り値のclaims.adminがtrueがどうかチェック

みたいな感じ。

本当はコードを載せたかったけどまだコードのシンタックスハイライトがついていないのでそのうち追記します。

先ほど紹介したサイトに全部載ってるのでそっちを参照した方が早いです笑

記事の作成・編集・削除

Firestoreを触ったのが今回が本当に初めてだったので手探り状態でした。

まだシンプルなCRUDしか実現出来ていないのでこれからn対nのリレーションみたいなやつも実装していけたらと思っています。

最後に

とりあえずFirebaseの全体感というか

こんな感じでセキュリティルール設定してFirestoreの設計してデプロイするんだ〜

というのを体験できたので収穫としては上々ではないかと思いました。

明日からもガンガン触っていきます。

追記

管理者としてのログイン部分のコードです！

シンタックスハイライトついて良かった！

firebase
  .auth()
  .signInWithEmailAndPassword(email, password)
  .then(async (result) => {
    const { user } = result;
    if (user) {
      user.getIdTokenResult(true).then((r) => {
        if (r.claims.admin) {
          props.history.push("/");
          alert("管理者としてログインしました");
        }
      });
    }
  })
  .catch((error) => {
    alert(error);
  });