效能工具之前端自动化部署打包发布上传脚本(五)命令行加载、上传进度功能

问题描述

需求描述:

  • 前端代码写完以后,执行打包命令,npm run build命令会打包出一个dist文件夹
  • 然后再把这个dist文件夹,丢到远程服务器上
  • 然后通过nginx反向代理去给用户使用

这个环节不同公司的操作方式不同,简单举例,有以下几种方式:

代码部署服务器发布常见方式

方式一,使用一些DevOps平台

  • 一般来说,大公司都会有自己的代码打包发布运维平台,比如DevOps系统平台。
  • 在代码中,进行相关的Docker或者shell脚本的编写等...
  • 然后就可以做到自动化发布部署脚本
  • 即,一键部署功能

这种方式,有的是公司自研的,有的是买人家的服务,比如阿里云的云效...

方式二,使用winscp或xmanager之类的文件传输工具

  • 关于什么是winscp、xmanager笔者不赘述
  • 如下图,一目了然
  • 登录winscp以后,可以直接把本地的文件,丢到远端服务器上

这种方式,缺点在于,每次都要登录,都要复制前端的dist文件夹,再粘贴到远端服务器上

长此以往,的确是有一些时间成本

方式三,自己写一个自动化脚本

  • 现在是这样的问题
  • 假设你所在的公司,因为某些原因没有DevOps平台
  • 可能是没钱买吧...
  • 但是你又不想,每次都去登录winscp,复制dist文件夹,再粘贴到对应目录
  • 于是乎,你就需要一个脚本,自动帮你做这件事
  • 而这个脚本,就是 效能工具 (提高开发效率,减少能量损耗的工具)

自己写一个node脚本(第一版没有上传进度的)

效果图

  • 我们把这个脚本再加入到项目的package.json文件中
  • 就可以实现,执行完npm run build以后,再自动执行这个自动化发布脚本
  • 如下代码:
js 复制代码
"scripts": {
    "start": "npm run serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && node ./auto.js",
},

"build": "vue-cli-service build && node ./auto.js"

通过&&符号,让build脚本执行完毕以后,再让node执行 同级目录下 auto.js脚本,这样即可做到脚本自动发布了

思路分析

  • 第一步,连接远程服务器(使用ssh2-sftp-client包)
  • 第二步,删除远程服务器上的dist文件夹
  • 第三步,把本地文件夹dist上传到远端服务器上对应位置

ssh2-sftp-client用于实现与远程服务器的文件传输操作

  • ssh2-sftp-client包的github地址:github.com/theophilusx...
  • 这个包提供了很多功能,可以去连接远程服务器,并可以去对上面的文件夹和文件进行相关操作(增删改查之类的...)
  • 本文不赘述此包的相关api语法(大家可自行查看官方文档)

ora包用于在终端做出loading文字加载中效果

  • 因为连接服务器后,的文件夹删除和上传相关操作需要一定时间
  • 所以,为了增强用户体验,我们需要加上一个loading加载效果
  • 就像上述gif动态图的转圈效果
  • ora包的github地址:github.com/sindresorhu...
  • 本文不赘述此包的相关api语法(大家可自行查看官方文档)

如果想要做出进一步色彩丰富的效果,可以搭配chalk这个包:www.npmjs.com/package/cha...

第一版完整代码

  • node版本:16.20.1
  • npm版本:8.19.4
  • 上述两个包,大家在项目中,自行安装即可

package如下:

js 复制代码
{
  "name": "upload-script",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chalk": "^4.1.2",
    "ora": "^5.4.1",
    "ssh2": "^1.14.0",
    "ssh2-sftp-client": "^9.1.0"
  }
}

完整代码:

  • 假设远程dist文件夹在这个位置:C:/test/dist
  • 本地,正常来说就是dist
  • 便可以有如下代码:
js 复制代码
const Client = require('ssh2-sftp-client'); // 用了连接服务器进行文件or文件夹相关操作
const ora = require('ora'); // 用来实现loading加载效果
const fs = require('fs');

// 因为ssh2-sftp-client需要连接远程服务器,所以我们需要告知这个包,连服务器的ip端口用户名密码
const config = {
  host: '111.222.333.444',
  port: '22',
  username: 'Admin',
  password: 'xxxyyyzzz111222333444',
  // 当然也可以使用私有Key
  // privateKey: fs.readFileSync('/path/to/private/key.pem').toString()
};

async function uploadLocalFolder(localFolderPath, remoteFolderPath) {
  const spinner = ora('发布脚本开始执行--->').start(); // 开始加载...
  const sftp = new Client(); // 实例化用于调用其自带的方法
  try {
    spinner.text = '连接服务器...'
    await sftp.connect(config); // 使用上述配置连接远程服务器
    spinner.text = '连接服务器成功'
    spinner.text = '旧的dist文件夹删除...'
    await sftp.rmdir(remoteFolderPath, true); // 把旧的dist删除掉
    spinner.text = '旧的dist文件夹删除成功'
    spinner.text = '新的dist文件夹上传...'
    await sftp.uploadDir(localFolderPath, remoteFolderPath); // 新的dist删除掉
    spinner.text = '新的dist文件夹上传成功'
    // throw new Error('错错错错错.......') // 模拟报错
  } catch (err) {
    console.error(err)
  } finally {
    await sftp.end();
    spinner.info('脚本执行完毕');
  }
}

// 使用示例
uploadLocalFolder('./dist', 'C:/test/dist');

自己写一个node脚本(第二版带上传进度百分比的)

  • 上述已经基本完成了一个自动化发布
  • 但是,我们想进一步,优化这个脚本
  • 比如,最重要的就是,加上上传进度条功能
  • 如下效果图:

效果图

思路分析

  • ssh2-sftp-client这个包,并没有提供上传文件大小进度的api,需要我们自行计算
  • 目前计算的思路是:
  • 首先看看dist有多少文件,假设有10个文件(不看文件夹)
  • 然后通过递归逐个文件上传,上传成功一个,那就是10%,两个就是20%
  • 即:(上传成功的文件数/总文件数)* 100%
  • 按照这个思路来的话,就有以下代码:

第二版完整代码

js 复制代码
const path = require('path');
const fs = require('fs');
const Client = require('ssh2-sftp-client');

const ora = require('ora');
let spinner = null // 加载实例

const config = {
  host: '666.777.888.999',
  port: '7527',
  username: 'root',
  password: 'passwordForLunix',
};

let totalFileCount = 0 // 本地dist文件夹中总文件数量
let num = 0 // 已成功上传到远端服务器上的文件数量

// 统计本地dist文件夹中有多少个文件(用于计算文件上传进度)
function foldFileCount(folderPath) {
  let count = 0;
  const files = fs.readdirSync(folderPath); // 读取文件夹
  for (const file of files) { // 遍历
    const filePath = path.join(folderPath, file);
    const stats = fs.statSync(filePath);
    if (stats.isFile()) { // 文件就+1
      count = count + 1
    } else if (stats.isDirectory()) { // 文件夹就递归加
      count = count + foldFileCount(filePath);
    }
  }
  return count;
}

// 把本地打包好的dist递归上传到远端服务器
async function uploadFilesToRemote(localFolderPath, remoteFolderPath, sftp) {
  const files = fs.readdirSync(localFolderPath); // 读取文件夹
  for (const file of files) { // 遍历
    let localFilePath = path.join(localFolderPath, file); // 拼接路径
    let remoteFilePath = path.join(remoteFolderPath, file); // 拼接路径
    remoteFilePath = remoteFilePath.replace(/\\/g, '/'); // 针对于lunix服务器,需要做正反斜杠的转换
    const stats = fs.statSync(localFilePath); // 获取文件夹文件信息
    if (stats.isFile()) { // 是文件
      await sftp.put(localFilePath, remoteFilePath); // 把文件丢到远端服务器
      num = num + 1 // 完成数量加1
      let progress = ((num / totalFileCount) * 100).toFixed(2) + '%' // 算一下进度
      spinner.text = '当前上传进度为:' + progress // loading
    } else if (stats.isDirectory()) { // 是文件夹
      await sftp.mkdir(remoteFilePath, true); // 给远端服务器创建文件夹
      await uploadFilesToRemote(localFilePath, remoteFilePath, sftp); // 递归调用
    }
  }
}

// 主程序
async function main() {
  const localFolderPath = './dist'; // 本地dist文件夹路径
  const remoteFolderPath = '/var/www/test/dist'; // 远程lunix的dist文件夹路径
  totalFileCount = foldFileCount(localFolderPath) // 统计打包好的dist文件夹中文件的数量
  if (!totalFileCount) return // dist是空文件夹就不操作
  const sftp = new Client(); // 实例化sftp可调用其方法
  try {
    console.log('连接服务器');
    await sftp.connect(config);
    console.log('服务器连接成功');
    console.log('删除旧的dist文件夹');
    await sftp.rmdir(remoteFolderPath, true)
    console.log('删除旧的dist文件夹成功');
    console.log('新建新的dist文件夹');
    await sftp.mkdir(remoteFolderPath, true)
    console.log('新建新的dist文件夹成功');
    spinner = ora('自动化脚本执行开始').start(); // loading...
    await uploadFilesToRemote(localFolderPath, remoteFolderPath, sftp); // 耗时操作,递归上传文件
  } catch (err) {
    console.log(err);
  } finally {
    sftp.end();
    spinner.info('自动化脚本执行结束')
  }
}

// 执行脚本
main();

Attention

区分windows服务器和linux的正反斜杠

  • windows服务器的斜杠:C:\Program Files\MyApp
  • linux服务器:/home/user/myapp
    • remoteFilePath = remoteFilePath.replace(/\\/g, '/'); // 针对于lunix服务器,需要做正反斜杠的转换

config配置项不要提交代码

  • config配置项可以单独拎出来作为一个配置项文件
  • 此文件不要提交代码
  • 可以写在.gitignore文件配置中

github地址

完整代码:github.com/shuirongshu...

相关推荐
EricWang13584 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning5 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人14 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂36 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.2 小时前
CSS3新增边框属性(五)
前端·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js