TS+Node 构建前端一键部署工具

夏天Summer
1,980 阅读4分钟

前言

最近在翻掘金的时候看见了篇文章：前端一键自动部署工具[1], 感觉挺符合我现在的场景：目前做的「Hybrid App」项目是基于各个平台的「WebView」加载，然而它的「测试环境」每次发布需要进行三次打包命令生成三个不同平台（小程序, web, native）的代码，然后对打包成的文件进行上传部署到「不同」的服务器位置，特别麻烦。

所以参照了下作者的实现逻辑，用「typescript」自己重新写了一个，在实现基本功能的基础上根据自己的需要进行了修改，并添加了一些自己需要的功能

工具地址

「cbd-deploy-cli」:

功能概览

具体的用法指导 「README.md」 有详细的描述，这里简单地介绍一下：

安装

  • 全局安装
npm install cbd-deploy-cli -g
  • 本地安装
npm install cbd-deploy-cli --save-dev

初始化

cbd-deploy-cli init

「init」 之后会根据用户输入的配置在当前目录下生成 「develop.config.js」 文件，这里要注意以下几点：

  • 部署的环境包括 「dev」(测试环境) 和 「prod」(生产环境), 是多选

  • 项目类型包括 「Web」 和 「Hybrid App」, 这是单选。「Web」 就相当于普通的应用就好，这应该是最普遍的场景。两者生成的文件有略些差异，「Hybrid」 这里会包括「小程序」/「web」 以及 「Native App」三个平台，而且是在输入部署命令后「相继部署」，不需要再另外操作

  • Web App

  • Hybrid App

ps: 这里如果有朋友想使用这个工具，「Web App」 类型就足够了，「Hybrid」主要是针对我本人现在工作的痛点添加的功能，如果有人跟我一样的遭遇那真的是太幸运了。

配置文件

输入 「init」 命令后生成了配置文件，这里还是推荐自己手动编辑，因为如果是「Hybrid」项目类型会有很多输入。

  • Web App
// deploy.config.js
module.exports = {
  "projectName": "cbd-deploy-cli",
  // 开发环境
  "dev": {
    "name": "开发环境",  // 环境名称
    "script": "npm run build", // 打包命令
    "host": "localhost", // 服务器地址
    "port": 22, // 服务器端口号
    "username": "root", // 服务器登录用户名
    "password": "", // 服务器登录密码
    "privatekey": "xxxx/.ssh/id_rsa", // 服务器对应本地私钥
    // password | privatekey 选填一个就可以
    "distpath": "dist", // 本地打包生成目录
    "webdir": "/",  // 服务器部署路径（不可为空或'/'）
    "isremoveremote": false // 是否删除远程文件（这里是目录删除，请谨慎开启，上传解压后会自动覆盖）
  },
  // 生产环境
  "prod": {
    "name": "生产环境",
    "script": "npm run build",
    "host": "localhost",
    "port": 22,
    "username": "root",
    "password": "",
    "privatekey": "xxxx/.ssh/id_rsa",
    "distpath": "dist",
    "webdir": "/",
    "isremoveremote": false
  }
}
  • Hybrid App
module.exports = {
  "projectName": "cbd-deploy-cli",
  // 开发环境
  "dev": {
    "name": "开发环境", // 这里注意一下区别
    // 小程序
    "mini": {
      "script": "npm run build",
      "host": "localhost",
      "port": 22,
      "username": "root",
      "password": "",
      "privatekey": "xxx/.ssh/id_rsa",
      "distpath": "dist",
      "webdir": "",
      "isremoveremote": false
    },
    // web
    "web": {
      "script": "npm run build",
      "host": "localhost",
      "port": 22,
      "username": "root",
      "password": "",
      "privatekey": "xxx/.ssh/id_rsa",
      "distpath": "dist",
      "webdir": "",
      "isremoveremote": false
    },
    // 原生
    "native": {
      "script": "npm run build",
      "host": "localhost",
      "port": 22,
      "username": "root",
      "password": "",
      "privatekey": "xxx/.ssh/id_rsa",
      "distpath": "dist",
      "webdir": "",
      "isremoveremote": false
    }
  }
}

部署

注意：命令后面需要加 --mode 环境对象 （如：--mode=dev 或者 --mode dev）

cbd-deploy-cli deploy --mode=dev

程序会自动进行如下操作：

这时候，项目已经成功发送到服务器中，全程不超过10秒，是不是省下了好多时间。而在 「Hybrid」下更是明显，三个平台「程序相继发布」，一个命令敲完之后无需再做任何操作，三个平台即可部署完毕。

实现逻辑

这里简单说下自己的实现逻辑，因为「Web」下的逻辑主要借鉴别人的，自己只是用「typescript」重新写了一下后做了一些修改而已。但「Hybrid」是我在这些基础上另外加的功能，做到了两者的兼容。

这里不贴什么代码，具体的实现可以直接在「GitHub」里看到，用流程图简单写下整个功能的逻辑：

结语

这样的功能并不多，「Hybrid」模式是我根据自己的业务需求以及痛点新增的功能，并且跟普通的发布代码兼容，如果各位有兴趣也可以参照着自己加些自己需要的功能，只有自己写才知道，这是个多好的实践与学习机会

而且功能并不是太复杂，如果想学习一些「node」的知识，可以是一个很好的实践项目，虽然涉及到的并不多，但是总比一些枯燥的业务要有意思太多了。而且完成之后还能节省一点时间，提高平时的开发效率，何乐而不为呢。

写这篇文章并不是想让多少人用我的工具，只是想分享下自己的所见所思所做所得，也欢迎大佬来说我的代码垃圾，只要能进步，大佬让我摆啥姿势都可以。⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄(✿◡‿◡)

参考资料

[1]

前端一键自动部署工具: https://juejin.cn/post/6872914108979609614

本文使用 mdnice 排版

avatar
文章
阅读
粉丝