背景

继上一篇，我们实现根据语雀文档自动在项目中生成对应的html的函数工具；但是最终还是需要手动发布推送到服务端拿到最终地址，即便一个简单的更新，调用api-commit-push-部署；
这些都是重复的简单的工作；我想我们能不能集成一个配置化系统，直接在表单中输入语雀地址以及目标路径，自动就生成一个正式服地址；这样任何一个人，无论法务还是运营还是测试还是商务，只要有这个权限，都能将语雀的文档变成服务地址，彻底释放我们这部分的工作；

思路

启一个node服务，该服务能够暴露对应的api接口，根据入参自动在服务上生成对应的页面；
考虑到页面访问压力，我们将页面路径访问静态化，直接让运营将页面地址指向我们静态页面所在目录；
提供一个操作页面，提供新增页面，修改配置，查找筛选等功能；因此需要接入数据库

技术选型

node服务选择midway,具体介绍参考midway官方文档
数据库依据官方推荐选用mySql数据库
前端页面vben-admin(vue3+vben+ts)

node服务项目初始化

npm init midway

选择koa-v3 生成的目录结构如下

├── src                           ## midway 项目源码目录，
│   └── controller                ## Web Controller 目录
│       └── home.controller.ts
│   └── middleware                ## 中间件目录
│   └── filter                    ## 过滤器目录
│   └── aspect                    ## 拦截器
│   └── service                   ## 服务逻辑目录
│   └── entity                    ## entity或 model 数据库实体目录
│   └── config                    ## 业务的配置目录
│   └── util                      ## 工具类存放的目录
│   └── decorator                 ## 自定义装饰器目录
│   └── interface.ts              ## 业务的 ts 定义文件
├── test ## 项目的测试目录
├── package.json ## Node.js 项目基础的包管理配置文件
└── tsconfig.json ## TypeScript 编译配置文件

启动项目

npm run dev
open http://localhost:7001

具体启动端口号可以在config.default.ts中配置；Midway 会启动 HTTP 服务器，打开浏览器，访问 http://127.0.0.1:7001 ，浏览器会打印出 Hello midwayjs! 的信息

数据库# TypeORM

安装组件

$ npm i @midwayjs/typeorm@3 typeorm --save

在 src/configuration.ts 引入 orm 组件，示例如下。

// configuration.ts
import { Configuration } from '@midwayjs/core';
import * as orm from '@midwayjs/typeorm';
import { join } from 'path';

@Configuration({
  imports: [
    // ...
    orm // 加载 typeorm 组件
  ],
  importConfigs: [
    join(__dirname, './config')
  ]
})
export class MainConfiguration {

}

安装数据库 Driver

npm install mysql2 --save

我们选择的是mysql数据库，所以要本地安装mysql以及MySQLWorkbench; [mysql]下载地址 [mac安装教程]参考链接 [MySqlWorkbench]下载地址选择[MySQL Workbench](https://dev.mysql.com/downloads/workbench/)

启动mysql，打开MySQLWorkbench界面

连接数据库

配置链接

在项目config.default.ts中配置链接数据库的信息

// src/config/config.default.ts
import { Photo } from '../entity/photo';

export default {
  // ...
  typeorm: {
    dataSource: {
      default: {
        /**
         * 单数据库实例
         */
        type: 'mysql', // 数据库类型
        host: '主机默认127.0.0.1',
        port: 3306,// 默认数据库端口3306
        username: '本地数据库名',
        password: '本地数据库密码',
        database: 'midway',// 数据库名字，自己定义
        synchronize: true,  // 如果第一次使用，不存在表，有同步的需求可以写 true，注意会丢数据
        logging: false,
        // 配置实体模型
        entities: [Photo],
        // 或者扫描形式
        entities: [
          '**/entity/*.entity{.ts,.js}'
        ]
      }
    }
  },
}

接着可以按照TypeORM说明

创建model在entity中

创建Model；在entity中
定义实体类型，添加数据库列；开启synchronize后会自动在数据库中自动建立表以及同步建立表字段

编写 Controller

在 controller 目录中，新建一个 src/controller/yuque.controller.ts 文件，内容如下。设置全局统一前缀现在我们通过访问127.0.0:7001/api/yuque/add_page就可以调试接口了；

调试接口可以用 postman 调试

部署

默认npm run build只是会生成一个dist文件夹；但是部署时，我们还需要一些其他配置文件才行；参考midway的启动和部署文档

依据运维要求，我们最终压缩包解压后的目录希望如此

├── dest                    
│   └── dist            ## num run build构建的产物
│   └── package.json    ## 方便 npm i时知道依赖包
│   └── bootstrap.js    ##部署入口启动文件
│   └── midway.service  ## 运维提供
│   └── restart.sh     ##运维提供

因此我们需要在CI/CD集成时，将打包代码整理成自己需要的目录结构在.gitlab-ci.yml


stages:
  # 编译
  - build
  # 自动部署
  - deploy
  # 通知等其他
  - notify

master_build:
  image: node:16.18.1-buster
  stage: build
  variables:
    GIT_SUBMODULE_STRATEGY: recursive
    GIT_SUBMODULE_UPDATE_FLAGS: --remote --jobs 4
  script:
    - npm config set registry https://registry.npmmirror.com
    - npm install --force
    - npm run build
    - npm run rebuildDir // 重新整理目录 将dist以及其他文件合入到dest中
  cache:
    paths:
      - node_modules
  artifacts:
    paths:
      - dest // 最终artifacts中压缩包名
  rules:
    - if: $CI_COMMIT_BRANCH == "master"

最后交给运维在linux上按照你的需求去配置；运维需要注意几点，第一个/api开头的表示调用接口，读取dist即可；非api开头的为页面匹配，找到你生成的页面的目录文件；这样最终加入交互页面，以及上一篇读写语雀文档生成页面的函数，就可以实现最初的构想，最终效果如下

midway搭建node服务，实现语雀文档自动生成线上链接过程纪要

背景

思路