はじめに

こんにちは、エンジニアのあさりです。今回は、AdminJSというNode.jsのフレームワークを用いて簡単に管理画面を実装する方法を紹介します。

AdminJSとは？

AdminJS は、Node.js アプリケーション用のオープンソース管理パネルです。特定のデータベースに依存することはなく、既存のNode.jsサーバーと使用しているORM/ODMと統合して、データを管理し、CRUD操作を実行するためのインターフェースを生成します。

環境

OS : Windows10
Node.js v18.16.0
Admin.js v7.3.0
Express v4.18.2
Mongoose v7.6.3

AdminJSの導入

今回は、Express×Mongoose×MongoDBという構成で作成したアプリケーションにAdminJSを導入していきます。MongoDBには、UserテーブルとFacultyテーブルを用意しており、データもすでに格納している状態です。AdminJSは、バージョン7以降、CommonJSでは動作しないため、CommonJSでアプリケーションを開発されている場合は、ES Modulesへの移行が必要となります。

まずは、AdminJSのパッケージをインストールします。

npm install adminjs

次に、プラグインと呼ばれる各サーバーに対応したモジュールをインストールします。今回はExpressを使用しているのでExpressのプラグインをインストールします。

npm install @adminjs/express   # for Express server
npm install @adminjs/nestjs    # for Nest server
npm install @adminjs/hapi      # for Hapi server
npm install @adminjs/koa       # for Koa server
npm install @adminjs/fastify   # for Fastify server

次に、以下の中から使用しているORM/ODMに応じてアダプターと呼ばれるモジュールをインストールします。今回はMongooseを使用しているのでMongooseのアダプターをインストールします。

npm install @adminjs/typeorm      # for TypeORM
npm install @adminjs/sequelize    # for Sequelize
npm install @adminjs/mongoose     # for Mongoose
npm install @adminjs/prisma       # for Prisma
npm install @adminjs/mikroorm     # for MikroORM
npm install @adminjs/objection    # for Objection
npm install @adminjs/sql          # for raw SQL, currently supports only Postgres

これで必要なパッケージのインストールは完了したので、公式ドキュメントを参考に以下のようにプラグインを導入していきます。他のフレームワークを使用している場合は、公式ドキュメントから他のフレームワークのサンプルを参考にしてみてください。

#app.js
import AdminJS from 'adminjs'
import AdminJSExpress from '@adminjs/express'
import express from 'express'

const app = express();
const PORT = 8080;

const admin = new AdminJS({})
const adminRouter = AdminJSExpress.buildRouter(admin)
app.use(admin.options.rootPath, adminRouter)

app.listen(PORT, () => {
console.log(`AdminJS started on http://localhost:${PORT}${admin.options.rootPath}`)
})

次に、アダプターを用いてAdminJSとDBの接続を行います。こちらも公式を参考に以下のように導入します。他のORM/ODMを使用している場合は、公式ドキュメントから他のORM/ODMのサンプルを参考にしてみてください。

#app.js
import AdminJS from 'adminjs'
import AdminJSExpress from '@adminjs/express'
import express from 'express'
import * as AdminJSMongoose from "@adminjs/mongoose";
import mongoose from "mongoose";

//接続したいmongooseスキーマをインポートします
import { User } from "./models/User.js";
import { Faculty } from "./models/User.js";

const app = express();
const PORT = 8080;

AdminJS.registerAdapter({
  Resource: AdminJSMongoose.Resource,
  Database: AdminJSMongoose.Database,
});

//DBと接続
mongoose.connect(env.MONGOURL)
const adminOptions = {
  // 接続したいテーブルをresourcesに渡します
  resources: [
	  {resource: User},
	  {resource: Faculty},
	],
}

const admin = new AdminJS(adminOptions)
const adminRouter = AdminJSExpress.buildRouter(admin)
app.use(admin.options.rootPath, adminRouter)

app.listen(PORT, () => {
console.log(`AdminJS started on http://localhost:${PORT}${admin.options.rootPath}`)
})

サーバーを起動して、http://localhost:8080/adminにアクセスしてみてください。ダッシュボード左上のハンバーガーメニューを展開すると以下の画像のようにUser、Facultyテーブルにアクセスできるようになっていると思います。