셀렉트 Github 로컬 환경 시작하기

셀렉트는 SQL, API, Markdown등을 YAML에 입력하여 어드민 백오피스를 만드는 무료이용 가능한 프로젝트입니다.

셀렉트 설정 파일을 담을 레파지토리를 만듭니다.

본문에서는 select-example 이름으로 github.com 에서 만들었습니다.

로컬에 clone 하였습니다.

이제 셀렉트를 설치합니다.

yarn add selectfromuser

yarn을 쓰지 않아도 문제없어요. npm install -S selectfromuser 명령어와 동일합니다.

설치가 잘되었나 확인해봅니다.

셀렉트 CLI 버전이 잘 표시되는 모습

이제 샘플 YAML을 만들어봅니다.

npx slt create

default.yml 이 자동으로 만들어집니다.

이제 셀렉트를 실행합니다.

npx slt

실행버전, 설정파일 경로, ENV옵션들, 설정된 타이틀과 메뉴등 정보가 표시됩니다. 맨 하단에 표시된 주소가 표시됩니다.

접속하시면 어드민이 보입니다.

로그인을 위해 REDIS 설정하기

셀렉트에는 세션 보안정책 운영 및 토큰 보관용도로 redis 연결이 필요합니다.

default.yml 에 해당 내용이 있습니다. 기본값은 로컬 레디스입니다.

YML 파일을 직접 수정하거나 환경변수로 지정 가능합니다.

기본 계정은 admin/admin 입니다. default.yml 참고

로그인 성공

YML을 계속 수정하면서 화면을 테스트하는 경우 watch, reload 옵션을 쓰면 편리합니다.

npx slt -w

Using path에 어떤 셀렉트 CLI를 쓰고 있는지 확인가능합니다.

어드민 타이틀을 수정해봅니다.

저장과 동시에 App restarted due to 가 표시되고 재시작됩니다.

타이틀이 변경된 어드민 모습

같은 폴더에 custom-environment-variables.yml 을 추가해주세요.

YML의 해당하는 부분에 ENV_NAME을 입력해주세요.

예제에서는 타이틀을 환경변수 $TITLE로 연결합니다.

환경변수를 지정하여 재시작시 반영된것을 확인 config[title]

환경변수로 어드민 설정을 반영된 모습

일반적으로 yarn start yarn dev 등의 명령어로 개발과 서버 시작을 합니다.

셀렉트를 위와 같이 쓰기위해 package.json 를 수정합니다.

"scripts": {
  "start": "npx slt",
  "dev": "npx slt -w"
}

해당 scripts 부분에 "start", "dev" 를 추가한 모습

{
  "scripts": {
    "start": "npx slt",
    "dev": "npx slt -w"
  },
  "dependencies": {
    "selectfromuser": "^1.1.28"
  }
}

완성된 package.json 모습

이제 이용가능합니다.

서버를 시작

서버를 시작하고 watch-reload

문의하기를 통해 알려주시면 답변 드리겠습니다.