前端自动打包部署服务器

因为负载均衡，每次前端开发完成；都需要先打包，然后在多台服务器上进行文件删除、文件上传的操作，多台打包比较麻烦。

考虑到自动多台打包部署问题，写一个自动部署。

本次用到shelljs和ssh2-sftp-client

自动部署思路

1、首先安装shelljs和ssh2-sftp-client

cnpm i shelljs ssh2-sftp-client --save-dev

shelljs做的事就是自动化，shelljs这个库能够让我们在js文件中执行shell命令。

ssh2-sftp-client 基于 ssh2 库进行了封装，让文件传输相关的方法变得更为简洁，还支持了 Promise 。

2、package.json里面新增命令 upload

"scripts": {"lint-staged": "lint-staged","start": "cross-env NODE_ENV=development webpack-dev-server --config config/webpack.dev.config.js","publish": "cross-env NODE_ENV=production webpack --progress --config config/webpack.prod.config.js","upload": "node upload/index.js"},

3、新建upload文件夹，下面新建config和index文件

config文件中编辑服务器相关信息

module.exports = [//导出{ip: "",//主机ip地址username: '',//ssh用户名port: '',//ssh端口号password: '',//ssh密码path: '',//操作文件夹的配置地址路径rmovepath: ''//删除文件夹的配置地址路径}
];

index文件编辑打包及服务器操作命令

const config = require('./config.js');//引入config文件
const shell = require('shelljs');
const path = require('path');
const Client = require('ssh2-sftp-client');//打包npm run publish
const compileDist = async () => {if (shell.exec(`npm run publish`).code === 0) {console.log('打包成功');}
};async function connectShell() {config.map(item => {//遍历const sftp = new Client();sftp.connect({//连接服务器host: item.ip, // 服务器 IP  ssh地址port: item.port,username: item.username,// ssh 用户名password: item.password}).then(() => {console.log('先执行拉下文件备份');//sftp.downloadDir（'第一个参数为拉取的路径，第二个参数为保存在本地的文件夹路径'）return sftp.downloadDir(item.path, path.resolve('__dirname', `../dist1/${item.ip}`));//path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。}).then(() => {console.log('执行删除文件');//sftp.rmdir（删除服务器文件的路径）return sftp.rmdir(item.path, true);}).then(() => {console.log('执行上传文件');//sftp.uploadDir（第一个参数为本地上传文件路径，第二个为上传到服务器的路径）return sftp.uploadDir(path.resolve('__dirname', '../dist'), item.path);}).then(() => {console.log('上传完成');sftp.end();}).catch((err) => {console.log(err, '上传失败');sftp.end();});});
}async function runStart() {await compileDist();//等待打包成功await connectShell();//提交上传文件
}
runStart();

打包部署命令：npm run upload

前端自动打包部署服务器相关推荐

前端自动化打包部署服务器
ssh2-sftp-client前端部署工具 npm install ssh2-sftp-client 在项目目录中创建upload文件夹,action.js主要处理打包和上传打包好的文件操作.sou ...
python 自动化框架打包_听说很多人都不会打包，教你Python实现前端自动化打包部署！...
作为一名专职前端开发的我,为了帮助解决目前工作中的一些繁琐的工作(主要是处理 excel数据),解放程序员双手,前阵子就刚刚入了 python 的坑,毕竟也算是门工具语言,都已经加入少儿编程了,哈哈哈 ...
vuecli打包后的dist目录无法访问_听说很多人都不会打包，教你Python实现前端自动化打包部署！...
作为一名专职前端开发的我,为了帮助解决目前工作中的一些繁琐的工作(主要是处理 excel数据),解放程序员双手,前阵子就刚刚入了 python 的坑,毕竟也算是门工具语言,都已经加入少儿编程了,哈哈哈 ...
解放双手 | Jenkins + gitlab + maven 自动打包部署项目
前言记录 Jenkins + gitlab + maven 自动打包部署后端项目详细过程! 需求背景不会偷懒的程序员不是好码农,传统的项目部署,有时候采用本地手动打包,再通过ssh传到服务器部署运 ...
自动打包linux,使用Jenkins如何自动打包部署linux
使用Jenkins如何自动打包部署linux 发布时间:2020-11-25 14:47:07 来源:亿速云阅读:86 作者:Leah 使用Jenkins如何自动打包部署linux?很多新手对此不是 ...
项目自动打包部署脚本
项目自动打包部署脚本本次自动打包部署依赖于git.maven来实现自动化部署项目一.远程服务器安装git 检查git是否已安装: sh-3.2# git --version git version ...
Springboot项目自动打包部署插件 (wagon-maven-plugin)
Springboot项目自动打包部署插件 (wagon-maven-plugin) pom.xml文件添加配置: <properties>中添加: <service-path> ...
vue打包部署服务器，背景图片显示空白
vue打包部署服务器后,往往会出现部分背景图片显示空白的情况,部分就说明只是打包过程中的图片路径问题: 在build 文件夹中找到 utils.js文件加上这行代码即可:publicPath: '-/ ...
node实现自动打包部署前端nuxt项目
作为一个前端开发,本不需要自己部署项目,奈何天不遂人愿,活最终还是落到了自己头上,刚开始只是部署测试环境,只有一台服务器,手动部署以下也就算了,后面线上环境部署4台服务器,人当时就麻了对于喜爱摸鱼的 ...

前端自动打包部署服务器

前端自动打包部署服务器相关推荐

最新文章

热门文章