Firebase Cloud Firestoreの管理ツールをNextJSで実装する（１）
前回の投稿では、Node.js のスクリプトで Firebase Cloud Firestore のバックアップとリストアをする簡単な例を紹介しました。しかし、コレクション名や保存するファイル名はハードコーディングしていたりしますので、実用的な実装とは言えません。
Node.js 自体はコマンドラインベースのスクリプトで GUI を実装するには、HTML ベースの Web ブラウザを使った実装になります。Node.js で管理用の PC に Web サーバーを立ててサーバー側でレンダリングを行えば GUI ベースでの管理ツールの実装も可能になります。
サーバー側でレンダリングをする場合、シンプルなケースはHandleBar などを使うことも可能です。
しかし少し複雑な処理や、動的なレンダリングをしたい場合は少し不便です。
そこで、何回かに分けて NextJS のフレームワークを利用して、管理用のローカルアプリを作る方法について解説を行う予定です。
NextJS はサーバーサイドのフレームワーク
NextJS は、React をベースにしたサーバーサイドレンダリングのフレームワークです。 React 同様 JSX で記述してページを作成できるため複雑な表示や処理にも対応できます。
本来は Web サーバーを使ってサーバー側でレンダリングするような Web サイト（Web アプリ・Web サービス）を作る用途に利用される事が多いですが、PC 上で動作させて通常のデスクトップアプリのような使い方も可能です。今回は、Web サイトを作る目的ではなく、管理用の PC で動作するアプリを開発するのに使います。
NextJS を使う準備
連載の最初の記事は、まずは、NextJS で開発を行う準備を解説します。 NextJS のプロジェクトを作成する場合、npm のモジュールでテンプレートのプロジェクトを作るのが便利です。create-next-appというパッケージを利用するプロジェクトのテンプレートを作ってくれます。
インストールは以下のコマンドを実行するだけです。
$ npm install -g create-next-app
インストールができたら、早速 NextJS のプロジェクトを作ってみます。
$ npx create-next-app [プロジェクト（アプリ）名]
を実行すると、実行したフォルダの下に指定したプロジェクト名のフォルダーを作ってその中にプロジェクトのテンプレートを作ってくれます。
プロジェクトが作成されたら、作成したプロジェクトのフォルダに移動して以下のコマンドを実行します。
$ npm run dev
これで、開発用のサーバーが実行している PC 上で起動されてテンプレートの画面が表示されます。
Typescript を使うための設定
シリコンバレースーパーウエアでは、品質の良いアプリを作成するために、Typescript の利用を推奨しています。Javascript に比べると多少記述が面倒ですが、きちんと型を意識しながらプログラミングができるのと、型のチェックをコンパイル時にチェックする事ができるので、Javascript では動作させなければわからなかった問題がある程度事前にチェックできます。
この、管理ツールの開発でも Typescript を利用した方がそうした意味で都合がよいので Typescript を使う設定を行います。
tsconfig.json を作成
まずは、Typescript の設定ファイル「tsconfig.json」をプロジェクトフォルダに作成します。 中身は空でかまいません。
Typescript 関連のパッケージをインストール
Typescript 関連のパッケージをインストールします。
$ npm install --save-dev typescript ＠types/react ＠types/node
これで、準備は完了です。すでに、「$ npm run dev」でローカルの Web サーバーを起動している場合は一旦停止して、再度起動します。
実行すると、先ほど作成したtsconfig.jsonの中身が追加されて、Typescript が使用できるようになります。
後は、必要に応じてtsconfig.jsonの設定を変えるだけです。
「compilerOptions」の「strict」を「strict:"true"」にするのをお勧めします。こうすると、より厳格に型の宣言をチェックしてくれます。
Firebase を使う設定
今回開発するアプリは、Firebase Cloud Firestore の管理用のアプリなので、Firebase のリソースにアクセスするために、設定が必要になります。
Firebase の管理アプリなので、Firebase admin SDK を使って、サーバー側で Firebase にアクセスします。
まずは、Firebase admin SDK をインストールします。
$ npm install --save firebase-admin
Firebase を利用するためには、Firebase の秘密鍵（secret key）が必要です。 これは、Firebase コンソールの「設定（Project settings）」から、取得できます。サービスアカウント（Service accounts）に行って、Node.js の秘密鍵を生成します。「新しい秘密鍵の生成（Generate new private key）」のボタンを押すだけです。
ファイルがダウンロードされるので、このファイルをプロジェクトフォルダにコピーします。
ここでは、サンプルに合わせてファイル名を「serviceAccountKey.json」という名前に変更して、プロジェクトフォルダに「data」というフォルダを作成してその下に保存します。
あとは、Firebase の初期化のためのファイルを作成します。
import admin from "firebase-admin";
const ServiceAccount = require("../data/serviceAccountKey.json");
try {
admin.initializeApp({
credential: admin.credential.cert(ServiceAccount),
databaseURL: process.env.DB_FB_DB_URL,
});
} catch (error) {
if (!/already exists/u.test(error.message)) {
console.error("Firebase admin initialization error", error.stack);
}
}
export default admin;
これで Firebase が初期化できます。Firebase にアクセスする際はこの例では「admin」を使ってアクセスします。利用するファイルでは、「admin」をインポートして利用します。
初期化には、Firebase Cloud Firestore のデータベースの URL が必要です。これは、プロジェクトフォルダの「.env.local」で指定します。
これで、NextJS から Firebase のリソースにアクセスが可能になります。
ここで注意が必要です。この Firebase のアクセスは「Firebase admin SDK」を使うので、Web ブラウザーが実行する部分では利用できません。フロントエンドの Web ブラウザ上で、Firebase にアクセスする場合は別途、クライアント側の通常の Firebase SDK （firebase-tools）の設定が必要です。
まとめ
NextJS で Firebase の Cloud Firestore データベースの管理ツールを作成するやり方を解説する連載を始めました。初回のこの記事では、まず NextJS のプロジェクトの作成と、Typescript を使うための設定、Firebase admin SDK を使うための設定を解説しました。
Firebase admin SDK を利用するには、Firebase の秘密鍵（secret key / private key）が必要になります。Firebase コンソールで生成して、NextJS のプロジェクトフォルダに保存します。
