跳到主要内容

二次开发

当前 CloudBase CMS 已开源,准守 Apache License 2.0,你可以在准守开源协议的情况下,基于已有源码进行二次开发,满足你的需求。

技术栈

CloudBase CMS 采用了通用的前后端分离架构:前端 React + 后端 Node.js。

  • ❤️ React

  • ❤️ Node.js + Nest.js + CloudBase

  • ❤️ TypeScript

项目结构

下面是基本的目录结构,采用了 Monorepo 的组织规范,并使用 lerna 进行管理

  • admin: 前端管理界面

  • cms-api:RESTful API 服务

  • cms-init:CMS 部署初始化相关脚本

  • service:后端服务,提供系统管理相关的服务

.
├── build
├── community
├── packages
│ ├── admin
│ │ ├── config
│ │ ├── dist
│ │ ├── public
│ │ ├── src
│ │ │ ├── assets
│ │ │ ├── common
│ │ │ ├── components
│ │ │ ├── layout
│ │ │ ├── locales
│ │ │ ├── models
│ │ │ ├── pages
│ │ │ ├── services
│ │ │ └── utils
│ │ └── typings
│ ├── cms-api
│ │ ├── dist
│ │ ├── src
│ │ │ ├── api
│ │ │ ├── common
│ │ │ ├── guards
│ │ │ ├── interceptors
│ │ │ ├── middlewares
│ │ │ ├── services
│ │ │ └── utils
│ │ └── typings
│ ├── cms-init
│ └── service
│ ├── dist
│ ├── src
│ │ ├── common
│ │ ├── config
│ │ ├── decorators
│ │ ├── guards
│ │ ├── interceptors
│ │ ├── middlewares
│ │ ├── modules
│ │ │ ├── auth
│ │ │ ├── file
│ │ │ ├── projects
│ │ │ ├── role
│ │ │ ├── setting
│ │ │ └── user
│ │ ├── services
│ │ └── utils
│ └── typings
└── scripts

本地开发

安装 @cloudbase/cli

使用 Node 包管理器 NPM 安装最新版本的 CloudBase CLI 工具(1.0.0+)

npm install -g @cloudbase/cli@latest

登录 CLI

具体的登录方法请参考 CLI 的登录说明文档

tcb login

配置

危险

下面的配置仅为演示,不代表真实的配置,实际配置以项目最新源码中的配置文件为准。

  1. 复制根目录下的 .env.example.env.local,并根据文件中的内容进行配置

    # 您的云开发环境 Id
    ENV_ID=
    # 管理员账户名,账号名长度需要大于 4 位,支持字母和数字
    administratorName=
    # 管理员账号密码,8~32位,密码支持字母、数字、字符、不能由纯字母或存数字组成
    administratorPassword=
    # CMS 控制台路径,如 /tcb-cms/,建议使用根路径 /
    deployPath=
    # 云接入自定义域名(选填),如 tencent.com
    accessDomain=
  2. 复制 packages/service/.env.examplepackages/service/.env.local,并根据文件中的内容进行配置

    TCB_ENVID=
    SECRETID=
    SECRETKEY=
  3. 复制 packages/admin/public/config.example.jspackages/admin/public/config.js,并根据文件中的内容进行配置

    window.TcbCmsConfig = {
    // 可用区,默认上海,可选:ap-shanghai 或 ap-guangzhou
    region: "ap-shanghai",
    // 路由方式:hash 或 browser
    history: "hash",
    // 环境 Id
    envId: "envId",
    // 禁用通知
    disableNotice: false,
    // 禁用帮助按钮
    disableHelpButton: false,
    // 云接入默认域名/自定义域名 + 云接入路径,不带 https 协议符
    // https://console.cloud.tencent.com/tcb/env/access
    cloudAccessPath: "xxx-xxx.service.tcloudbase.com/tcb-ext-cms-service"
    };

安装依赖

# 安装 lerna 依赖
npm install
# 安装 package 依赖
npm run setup

初始部署

通过部署动作,触发初始化操作

npm run deploy

启动开发

运行下面的命令,成功后,可以访问 http://localhost:8000/ 打开 CMS 管理界面

cd packages/admin && npm run dev
cd packages/service && npm run dev