问题描述
需求描述:
- 前端代码写完以后,执行打包命令,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文件配置中