Help us understand the problem. What is going on with this article?

Firestoreの簡易管理ツールをNuxt.jsでつくってみた

Firestore、とっても便利ですが、Firebaseのコンソールがイケてないので、
ローカルで動かせる簡易の簡易ツールを作ってみました。Nuxt.js製です。

Firebase Admin SDKを使ってるので、秘密鍵を配置すればOK
セキュリティルールの変更も不要です。

動いているところはこんな感じ。

GitHubで公開してます。ただ書きなぐりなので、ソースはイケてないです。。
まだα版くらいなので、機能は限定的です。。

memory-lovers/simple-firestore-admin: Simple Firestore Admin

なんで作ったか

Firestoreを使ったWebサービスを作ってみたところ、
ちょこっとしたDBの変更にもデータが多かったり、1ドキュメントのサイズが大きいと、
Firebaseコンソールだと重い感じに。。

いろいろ見ていると、Webサービスなどもあるのですが、
セキュリティールールを変えないといけないなど、設定がめんどくさいなと。。

なので、 設定が少なくて、軽い管理ツールがほしい、と思い、作ってみました。

できること

とりあえず、いま自分が必要な機能だけなので、最小な感じ。

  1. コレクションの検索: collection().where().orderBy()
  2. ドキュメントの更新: doc().update()
  3. ドキュメントの削除: doc().delete()

使い方

1. インストール

インストールは、GitHubからクローンしてください。

$ git clone git@github.com:memory-lovers/simple-firestore-admin.git
$ cd simple-firestore-admin

2. セットアップ

2-a. 秘密鍵の取得

Firebaseコンソールから秘密鍵を生成して配置してください。

左上の歯車から「プロジェクトの設定」をクリックし、

スクリーンショット_2019-10-30_19_50_30.png

「サービス アカウント」タブの下にある、「新しい秘密鍵を生成」をクリックすると、
秘密鍵のjsonファイルをダウンロードできます。

スクリーンショット_2019-10-30_19_50_20.png

この例では、./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)まで♪

参考にしたサイトさま

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした