项目自动化部署架构

​ 标准是衡量产品质量 工作质量的尺度

目标

• 准备阶段
  • 能统一初始化项目的基本结构
  • 建立统一的 ESLint 来规范代码的标准
• 部署阶段
  • 代码推送到代码云仓库
  • 页面性能测试
    • 单元测试 ( Jest )
    • 性能测试 Lighthouse
    • UI 测试
    • 代码规范测试
  • 自动化构建镜像 ( Coding )
  • 通过 Docker 形式部署到服务器
  • 成功部署通知
• 监控阶段
  • 接口报错上报
  • 服务器环境监控
  • 日志错误主动上报
  • 服务器配置自动扩容

架构图

脚手架搭建

​ 通过脚手架能以命令行的形式初始化不同项目 包含基础目录结构、 ESLint 、 Webpack 、 JenkinsFile

commander 命令行插件

• 参数选项

  #!/usr/bin/env node
  
  const { program, Option } = require("commander");
  
  program
    .requiredOption('-n, --project-name <name>', 'name of project')
    .option('-e, --node-edition [node]', 'edition of node', '12.22.6')
    .option('-a, --author [authors...]', 'author of cli')
    .addOption(new Option('-s, --size <size>', 'package size').choices(['small', 'medium', 'large']).default('medium', 'medium size'));
  
  program.version("0.0.1", '-v, --vers', 'output the current version');
  program.parse(process.argv);
  
  const options = program.opts();
  console.log(options);
  
  // $ m -n melonDemo -a melon ricky 
  
  // options = {
  //   nodeEdition: '12.22.6',
  //   size: 'medium',
  //   projectName: 'melonDemo',
  //   author: ['melon', 'ricky']
  // };
  

[
      {
        type: "expand",
        name: "projectName",
        message: "请输入项目名称",
        default: "y",
        choices: [
          {
            key: 'y',
            value: `Melon-${new Date().toLocaleDateString().replace(/\//g, "-")}`
          }, {
            key: 'n',
            value: `Melon-${Date.now()}`
          }
        ]
      },
      {
        type: "number",
        name: "num",
        message: "请输入初始数量",
      },
      {
        type: "list",
        name: "dataBase",
        message: "请选择数据库",
        choices: ['MySql', 'Sequelize']
      },
      {
        type: "input",
        name: "account",
        message: "请输入账号",
        validate: (value) => {
          return new Promise((resolve) => {
            setTimeout(() => {
              if (value == 123) {
                resolve(true)
              } else {
                resolve("点都晤德")
              }
            }, 1000)
          })
        },
      },
      {
        type: "password",
        name: "dataBasePwd",
        message: "请输入数据库密码",
      },
      {
        type: "checkbox",
        name: "configArr",
        message: "请选择配置",
        choices: ['Webpack', 'ESLint', 'JenkinsFile']
      },
      {
        type: "confirm",
        name: "isDone",
        message: "是否确认生成",
      }
    ]