[Adminjs] nestjs 에서 어드민 만들기

들어가며

프로젝트를 하다보면 유저의 데이터를 확인하기 위해 어드민 사이트가 필요합니다.

이 떄 어드민 사이트를 만들 인원은 충원하기가 쉽다면 문제가 없지만 개인 프로젝트를 하는 소규모 팀에선 어드민 페이지를 만든다는 것은 큰 리소스 누수가 있을 수도 있을 것 같습니다. 

 

그래서 백엔드 단에서 간단하기 데이터를 확인할 수 있는 어드민 라이브러리를 소개해 드릴려고 합니다~!

 

 AdminJs

https://adminjs.co/

AdminJS - the leading open-source admin panel for Node.js apps | AdminJS

Adminjs 는 오픈 소스 이며 npm 에서 간단하게 다운로드가 가능합니다

 

저는 nestjs 라는 nodejs 프레임 워크에서 프로젝트 구성이 됬다는 가정하에 어드민을 구성해 보겠습니다.

 

일단 패키지 설치가 필요합니다.

$ npm install adminjs @adminjs/nestjs

 

추가적으로 nestjs 에서 어드민을 사용할 수 있겠금 의존이 걸린 패키지를 설치 합니다. 

$ npm install @adminjs/express express-session express-formidable @adminjs/typeorm

 

 

패키지 설치가 마쳐졌다면 DB와 매핑을 시키기 위한 코드를 추가 합니다. 

 

저는 TypeOrm을 사용하고 있고 DB 엔진은 PostgresQL 사용하고 있습니다

 

const AdminJSModule = import('adminjs');
const AdminJsTypeOrm = import('@adminjs/typeorm');
AdminJSModule.then(async (v) =>
  v.AdminJS.registerAdapter({
    Database: await AdminJsTypeOrm.then((v) => {
      return v.Database;
    }),
    Resource: await AdminJsTypeOrm.then((v) => {
      return v.Resource;
    }),
  }),
);

 

해당 작업이 마쳐졌다면 @Module 테코레이션에 import 의 값으로 Adminjs 설정을 해보겠습니다

import('@adminjs/nestjs').then(({ AdminModule }) =>
  AdminModule.createAdminAsync({
    useFactory: () => ({
      adminJsOptions: {
        rootPath: '/admin',
        resources: [],
      },
      auth: {
        authenticate,
        cookieName: 'adminjs',
        cookiePassword: 'secret',
      },
      sessionOptions: {
        resave: true,
        saveUninitialized: true,
        secret: 'secret',
      },
    }),
  }),
),

 

Adminjs 를 nestjs 에서 사용하기 위해선 adminJsOptions, auth, sessionOptions 를 기본 구조로 가져갑니다.

 

adminJsOptions: 만들어둔 Entity를 매핑 시키기 위한 섹션

auth: 로그인을 하기위한 섹션 

sessionoptions: 로그인한 세션을 설정하기 위한 섹션

 

하나식 뜯어보도록 하겠습니다

 

adminJsOptions

해당 섹션에선 TypeOrm 으로 생성해둔 Entity를 설정해주는 영역입니다. 예를 들면

 

resources: [
  resource: UsersEntity,
  options: {
    properties: {
      password: {
        isVisible: false,
      },
      id: {
        isTitle: true,
      },
    },
    parent: {
      name: '유저',
    },
  },
]

 

resource로 UsersEntity로 설정합니다.

 

option의 properties로는 Entity내의 컬럼을 adminjs에서 어떻게 보일지 어떻게 상호작용을 할지를 설정해줍니다.

 

password는 보이지 않게 할 것이고 id 컬럼을 UsersEntity의 식별자라고 설정합니다.

 

parent는 admin 사이트 좌측에 메뉴로 이루어져 있는 곳에 UserEntity를 설정 해준다는 것입니다.

 

설정한 페이지를 확인해 본다면

 

 

DB에 저장되어 있는 데이터를  admin으로 만들어 주게 됩니다

 

설정한대로 password는 숨겨줍니다

 

 

좌측에 메뉴도 깔끔하게 설정된 것을 확인 할 수 있습니다

 

 

 

 

 

이렇게 백엔드에서 adminjs 라이브러리를 사용해서 간단하게 프론트앤드의 리소스 없이 어드민을 제작할 수 있습니다.

당연히 프로젝트가 커진다면 어드민 페이지를 따로 만들어야 하는 상황이 생기지만 규모가 작고 간단한 프로젝트를 만든다면 adminjs 를 사용해서 어드민 사이트를 구축하면 좋지 않을까 생각 듭니다 ㅎ