Klook-admin-cli NPM

klook-admin-cli

A CLI tool for quick bootstrap of admin projects inside Klook.

Background

https://klook.slab.com/posts/admin-平台化-解决方案-j1gapzy7

Get Started

创建项目之前请先通知到Admin平台团队@octave，注册一下对应项目.

First ask to create a new repo from bitbucket.

$ npm install --global klook-admin-cli --registry=https://knpm.klook.io
$ admin-cli create <app-name>

创建项目后:

在 src/modules/ 目录添加(迁移)项目
在 src/router/ 添加项目路由

Usage

local dev env

本地开发设置对应环境： 1. 创建 .env.development.local 文件 2. 参考 .env.development 设置 VUE_APP_DEV_HOST 3. 在 .env 文件更改 BASE_URL 来修改测试环境&产线的项目根路径

Components

admin-cli based on element-ui v2 and admin-ui. Please consider contributing ui components if you find your component reusable.

Auth Control

在 admin-layout & admin-permission 依赖中集成了对登录和路由跳转的权限判断。

业务组需要 1. 在旧ADMIN(admin.klook.com)配置路由 2. 在 modules/ 对应的目录的 router 内进行权限的判断

page access

page access is added through meta field inside router object in <your_module>/routes/index.js.

operation access

Use checkPermission method from @klook/admin-permission

权限添加

test/dev env

Add new access through old admin backend (admin1.test.klook.com/setting)

prd env

Please provide new access name and new role name following: Admin权限文档汇总

Locales

出于历史原因 admin-cli 保留了一部分全局多语言 src/locales/

业务组应该在 modules/ 的对应项目的 locales/ 更新多语言。 modules内的locales文件会自动被合并

Routes

在 modules/ 内添加routes之后需要添加全局 src/router
top route 的 icon 添加到 /assets/icons
在 /routes/index.js 里面引入 icon 文件（参考 demo 项目）
模块路由需要添加权限。不要存在没有权限控制的路由内容

Note

Vuex没有默认集成在 admin-cli。业务组可以根据需求 per-module 的使用

MSPA

MSPA 提供了一个合并多个项目入口到一个统一项目的能力，用于给用户呈现更一致的界面。

关于如何合并多个项目到MSPA以及开发相关内容参考： klook-admin-mspa @tim.li

DevOps

admin-cli 开发的项目目前会发布在 admin.klook.com/mspa/xxx 的路径下。

测试&产线对接流程参考 https://klook.slab.com/posts/新服务上线流程-pmqhuqrs

提供对应项目信息给到运维同事

nginx

测试环境配置nginx

production

修改 buildspec.yml 中的 $ADMIN_APP_NAME 为项目名称

修改 .env 文件中的 VUE_APP_APP_NAME 为项目名称

在 tech_inf_ops 中沟通运维团队接入 codebuild，提供

服务名
仓库地址
以及需要触发 codebuild 的分支(为保持统一，默认建议为 release 分支)

范例：

服务名: klook-admin-sem
仓库地址: git@bitbucket.org:klook/klook-admin-sem.git
触发部署分支: release

更新产线环境的 nginx 配置(运维)，在 admin.klook.com server 下加入以下配置片段，以 klook-admin-sem 为例：

location  ^~ /mspa/sem/ {
  # cloudfront limited accessable host; 
  set $cdn_host "cdn.klook.com";
  proxy_set_header Host $cdn_host;
  include cross_origin.params;
  # remove cache for cdn and browser
  proxy_pass "http://cdn.klook.com/s/dist_web/klook-admin-sem/dist/index.html?refresh=$msec-$request_id";
  add_header Cache-Control no-cache;
  expires 0;
  proxy_set_header X-Real-IP $remote_addr;
}

产线发布使用 bitbucket 的 pipeline 功能，提出 PR 的时候会自动运行 pipeline，需要发布的时候到对应的 pipeline 手动触发部署操作

pipeline 会将 master 的内容 merge 到 release 分支， release 分支的推送会触发 codebuild 从而更新 cdn 里面的代码内容

查看 build 信息

https://deploy.klook.io/#/codebuild/projects/klook-admin-sem

TODO

feedback & issue support

Dev / Contribute

Get started

klook-admin-cli is based from vue-cli using presets and plugins, please head to vue-cli for development related knowledge first.

admin-cli also depend on lerna project klook-admin-services for klook internal dependencies encaplusation, head to related knpm dependency for detailed info.

Project Structure

.
├── bin 
│   └── admin-cli.js // contains global admin-cli related commands
├── lib
│   ├── create.js // using vue-cli internally to create project
│   └── preset // vue-cli preset for admin-cli
│       ├── preset.json // cli-plugin presets consumed by vue-cli
│       ├── generator
│       │   ├── index.js // execute project provision, provide default package.json
│       │   └── template // inject klook-admin related, pre-cooked folder-structure
│       └── prompts.js // user prompts
└── package.json

Dependency Projects

admin-cli-services - provide basic functions for admin-cli bootstraped project
admin-layout
admin-login
admin-permission
admin-utils
admin-ui

Key decisions

从项目角度，任何模块都有可能在未来的某天由某个单独的团队接手或因为各种原因需要独立出来。admin-cli 的设计理念是希望即便在项目较小的时候不同模块的代码和依赖也可以尽量解耦，所以绝大部分的开发任务都应该在 modules/的对应模块内开发.

update && deploy your change

use npm version to change version
in slack: @k deploy knpm_publish:git@bitbucket.org:klook/klook-admin-cli.git

Tooling

Notes

package-lock is disabled in .npmrc
for consistency, the eslint config for admin-cli should be kept the same as the eslint config file inside template folder

npm or yarn

vue-cli will check your global .vuerc for pakcage manager used and prompt accrodingly you can set ~/.vuerc as below to set npm as admin-cli default manager

{
  "useTaobaoRegistry": false,
  "packageManager": "npm"
}

workflow

As like vue-cli, admin-cli also adopted release-based Gitflow Workflow

Appendix

Operational Excellence - The ability to support development and run workloads effectively, gain insight into their operations, and to continuously improve supporting processes and procedures to deliver business value.
Security (p. 48)
Reliability (p. 55)
Performance Efficiency - The ability to use computing resources efficiently to meet system requirements, and to maintain that efficiency as demand changes and technologies evolve.
Cost Optimization (p. 67)

contact

@octave for project design
@tim.li for mspa related

TODO

add node version check

@vue/cli chalk commander inquirer leven lookpath

1.1.6

4 years ago

0.0.1

4 years ago