Firestore、とっても便利ですが、Firebaseのコンソールがイケてないので、
ローカルで動かせる簡易の簡易ツールを作ってみました。Nuxt.js製です。
Firebase Admin SDKを使ってるので、秘密鍵を配置すればOK。
セキュリティルールの変更も不要です。
動いているところはこんな感じ。
GitHubで公開してます。ただ書きなぐりなので、ソースはイケてないです。。
まだα版くらいなので、機能は限定的です。。
memory-lovers/simple-firestore-admin: Simple Firestore Admin
なんで作ったか
Firestoreを使ったWebサービスを作ってみたところ、
ちょこっとしたDBの変更にもデータが多かったり、1ドキュメントのサイズが大きいと、
Firebaseコンソールだと重い感じに。。
いろいろ見ていると、Webサービスなどもあるのですが、
セキュリティールールを変えないといけないなど、設定がめんどくさいなと。。
なので、 設定が少なくて、軽い管理ツールがほしい、と思い、作ってみました。
できること
とりあえず、いま自分が必要な機能だけなので、最小な感じ。
- コレクションの検索:
collection().where().orderBy() - ドキュメントの更新:
doc().update() - ドキュメントの削除:
doc().delete()
使い方
1. インストール
インストールは、GitHubからクローンしてください。
$ git clone git@github.com:memory-lovers/simple-firestore-admin.git
$ cd simple-firestore-admin
2. セットアップ
2-a. 秘密鍵の取得
Firebaseコンソールから秘密鍵を生成して配置してください。
左上の歯車から「プロジェクトの設定」をクリックし、
「サービス アカウント」タブの下にある、「新しい秘密鍵を生成」をクリックすると、
秘密鍵のjsonファイルをダウンロードできます。
この例では、./credential.jsonとしてます。
2-b. 設定ファイル(.env)の作成と設定
env_sampleという設定ファイルの雛形があるので、.envにコピーしてください。
$ cp env_sample .env
コピーしたら、.envを開いて、配置した秘密鍵の相対パスを設定してください。
# Copy this file with file name '.env'
## ex. CREDENTIAL_PATH=./credential.json
- CREDENTIAL_PATH=YOUR_CREDENTIAL_PATH
+ CREDENTIAL_PATH=./credential.json
これで設定はOK。
3.起動
Nuxt.js製なので、こんな感じでビルドと起動をしてもらえればOK。
# パッケージのインストール
$ npm install
# ビルド
$ npm run build
# 起動
$ npm run start
http://localhost:3000で起動するので、
ブラウザで操作できるようになります。
開発時のポイント: serverMiddlewareでfirebase-admin
開発時にハマったポイントとしては、
firebase-adminがNode.js上でしか使えなかったことです。。
当初はNuxtアプリから直接firebase-adminを呼ぼうとしていましたが、
Node.js上でしか扱うことができないことをあとから知り。。
Expressなどからだと呼ぶことができるので、
NuxtのserverMiddlewareを使って、
APIサーバ的なものを内部で持たせるようにしてみました。
serverMiddlewareの使い方はこんな感じ。
Express関連のコード
簡易化してますが、こんな感じのコードを、server/index.tsに配置
import { Request, Response } from "express";
import * as firestore from "./modules/firestore";
import bodyParser from "body-parser";
import express from "express";
const app = express();
// setup body-parser
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
// select
app.post("/api/select", async (req: Request, res: Response) => {
// firestore.collection("users").get()的な処理をする
const result = await firestore.fetchSelect(req.body);
res.send(result);
});
export default app;
nuxt.config.tsで設定
先ほど作成したserver/index.tsをserverMiddlewareとして利用するように設定
import { Configuration } from "@nuxt/types";
const config: Configuration = {
serverMiddleware: ["~/server"],
};
export default config;
別にサーバを建てると、開発時にCORS対策でaxiosでproxyしないといけなかったりしますが、
serverMiddlewareを使うとそういった設定も不要に(´ω｀)
おわりに
とりあえず、必要な部分だけを作っただけなので、
バグもイケてないところもまだまだありますが、よかったら遊んでみてもらえれば。
memory-lovers/simple-firestore-admin: Simple Firestore Admin
Firestoreの管理画面作りたいな。。と思ったら、
こんな感じでserverMiddlewareを使うのが良さそうです(´ω｀)
こんなのつくってます!!
冒頭で話していた開発しているWebサービスです！
だいぶデータも増えてきたので、こういう管理画面が欲しくなってきました。。
積読用の読書管理アプリ 『積読ハウマッチ』
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!
もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ
要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪