vue自动部署项目到服务器

想要的功能

前端打包也可以自动上传文件夹到服务器
在不提交代码的前提下，也可以完成上述功能

经过各种百度谷歌，最后有两种方案可以选择

第一种是写一个shell，通过lftp上传文件夹，但是会有个权限的问题，需要更改nginx配置才可以解决
第二种就是使用node来实现，个人推荐使用这个
第三种就是jenkins, 但是我又不想提交代码，不满足，放弃

使用shell自动传输文件夹到服务器

思路

1. 安装lftp
2. 编写shell脚本自动传输文件夹到服务器
3. lftp 传输文件成功之后会访问目录会报一个ngxin 403的权限错误，（如果说测试大佬不同意改ngxin配置的话，那就放弃把）

ftp安装和常用命令介绍

linux安装vftp

rpm -qa | grep initscripts

查看ftp安装是否成功

which vsftpd

查看ftp 服务器状态

service vsftpd status

启动ftp服务器

service vsftpd start

重启ftp服务器

service vsftpd restart

查看服务有没有启动

netstat -an | grep 21 //默认端口为21

tcp 0 0 0.0.0.0:21 0.0.0.0:* LISTEN

如果看到以上信息，证明ftp服务已经开启。

如果需要开启root用户的ftp权限要修改以下两个文件

vi /etc/vsftpd/ftpusers 中注释掉root
vi /etc/vsftpd/user_list 中也注释掉root
然后重新启动ftp服务 service vsftpd restart

ftpusers和user_list文件详解

https://blog.csdn.net/bluishglc/article/details/42273197

安装lftp

为啥要安装lftp

ftp不可以传文件夹，lftp可以，lftp可以使用帐号密码登录

安装步骤

window

choco 安装

choco install lftp

没有安装choco 请点下方链接，自己食用

https://chocolatey.org/install

linux

linux下安装FTP的过程和使用的整体过程

https://blog.csdn.net/lizexing1/article/details/79308961

第一步

第二步
第三步

【Linux】缺少service命令的解决办法

https://blog.csdn.net/imliuqun123/article/details/83340763

lftp 常用命令介绍

https://man.linuxde.net/lftp

Shell 教程

https://www.runoob.com/linux/linux-shell.html

为啥要 ./qq.sh 这样执行，好像有坑

shell使用ftp传输文件

请确保ftp服务已经开启，再做下面的操作

新建一个qq.sh文件，大致就是是用ftp链接远程服务器，并传输一个zip文件

#!/bin/sh# 出现异常不往直接报错set -e# 打包tar -czvf social.zip social# 远端服务器ipip="192.168.1.99"# 部署到远程服务器的目录  自行更换remote="/usr/abcd/"# 帐号 自行更换userName="admin"# 密码 自行更换password="123456"# 传输方式ftpFransferType="binary"# 传输的文件名ftpPutFileName="social.zip"#lcd 应该使用相对路径#格式：lcd [directory]#说明：directory 指定要更改的本地计算机上的目录。如果没有指定directory，将显示本地计算机中当前的工作目录#从本地向FTP批量上传文档echo "-------------------------------------- 开始上传 ${ftpPutFileName} 文件--------------------------------------"ftp -v -n<<EOFopen $ipuser $userName $password$ftpFransferTypecd $remotepwdpromptput $ftpPutFileNamebyeEOFecho "-------------------------------------- 上传 ${ftpPutFileName} 文件成功 --------------------------------------"

shell使用lftp传输文件夹

直接把文件夹丢到服务器

#!/bin/bash#--------------------------------------------# 自动传输文件到不同环境# author：qinyuanqi#--------------------------------------------#出现异常不往下面走set -e# SFTP配置信息# IPIP="192.168.1.199"# 端口PORT=22# 用户名USER="user"# 密码PASSWORD="password"# 需要上传的文件所在目录CLIENTDIR='./social'# 上传到目标服务器的目录remote="/usr/local/nginx/html/h5/"#echo "$IP---$USER--$PASSWORD"if [ -d $CLIENTDIR ]thenecho "$CLIENTDIR  是一个文件夹"elif [ -f $CLIENTDIR ]thenecho "$CLIENTDIR  是一个文件"elseecho "$CLIENTDIR 不存在"fiif [ "$1"x == "test"x ]thenecho  "---- 准备传输 $CLIENTDIR 文件到  ----测试环境"# 这样传输到服务器，访问项目，nginx会报403，测试大佬说不能改nginx 配置，难搞哦，不知道怎么解决了IP="192.168.1.166"USER="测试环境的用户"PASSWORD="测试环境的密码"elseecho  "---- 准备传输 $CLIENTDIR 文件到  ----开发环境"fiecho "---- 开始上传 ${CLIENTDIR} 文件 ----"lftp -u $USER,$PASSWORD $IP <<EOFcd ${remote}mirror -R $CLIENTDIRbyEOFecho "---- 上传 ${CLIENTDIR} 文件成功 ----"

lftp 传输文件成功之后会访问目录会报一个ngxin 403的权限错误，（如果说测试大佬不同意改ngxin配置的话，那就放弃把）

解决办法：

https://segmentfault.com/a/1190000007117542
1. 改ngxin配置，
2. 重启ngxin

使用node

安装依赖

npm install node-ssh --save-dev 传输文件夹
npm install compressing --save-dev 压缩文件
npm install chalk -save-dev 美化log

示例分析

调用方式，vue打包完成之后，删除soucemap文件，然后使用node 自动发布
定义配置
配置不同环境不同操作
使用nodessh上传文件夹

源码：

// 开发和测试自动打包到对一个环境，生产自动打zip包，直接丢给领导上线//命令行颜色const chalk = require('chalk')const log = console.logconst path = require('path')// 连接传输到服务器插件const NodeSSH = require('node-ssh')const ssh = new NodeSSH()// 取到node执行文件的参数，进行打包区分const argv = process.argv.slice(2)// 引入压缩文件插件const compressing = require('compressing')// 打包后的目录名称const buildDirName = 'social'// 打包后文件的路径const distDir = './' + buildDirName// 打包后的压缩名称const distZipPath = './' + buildDirName + '.zip'// 服务器配置let remoteConfig = {}// node deploy.js qq  取到qq来做判断，判断是那个环境，然后做不同的处理switch (argv[0]) {// 开发环境的一些配置case 'dev':log(chalk.blue('----开始打包到开发环境----'))remoteConfig = {host: '开发服务器ip',// 远程端口，默认是21// port:21username: '开发服务器用户名',password: '开发服务器密码',remotePath: '服务器部署的地址',}upload()break// 测试环境的一些配置case 'test':log(chalk.blue('----开始打包到测试环境----'))remoteConfig = {host: '测试服务器ip',// 远程端口，默认是21// port:21username: '测试服务器用户名',password: '测试服务器密码',remotePath: '测试服务器部署地址',}upload()break// 生产环境就自动压缩文件，不做别的处理case 'production':log(chalk.blue('----生产环境----开始压缩文件----'))compressing.zip.compressDir(distDir, distZipPath).then(() => {log(chalk.green(`压缩 ${distZipPath} 成功`))}).catch(() => {log(chalk.red(`压缩 ${distZipPath} 失败`))})breakdefault:log(chalk.keyword('orange')('deploy走了没有处理的方式'))break}/***  上传文件到服务器*  node 7.6 以上都支持 async 语法*/async function upload() {const failed = []const successful = []try {// 连接服务器await ssh.connect({host: remoteConfig.host,username: remoteConfig.username,password: remoteConfig.password,})// 刪除目录再上传await ssh.execCommand('rm -rf ../' + buildDirName, { cwd: remoteConfig.remotePath })// 开始上传文件到远程指定目录下await ssh.putDirectory(distDir, remoteConfig.remotePath, {recursive: true,concurrency: 10,validate: function(itemPath) {const baseName = path.basename(itemPath)console.log(baseName)return (baseName.substr(0, 1) !== '.' && baseName !== 'node_modules' // do not allow dot files) // do not allow node_modules},tick: function(localPath, remotePath, error) {if (error) {failed.push(localPath)} else {successful.push(localPath)}},})} catch (error) {log(chalk.red('upload 上传失败，错误信息如下==>', error))return false}log(chalk.green('传输完成'))log(chalk.green('传输成功文件数==>', successful.length))log(chalk.green('传输失败文件数==>', failed.length))// 退出process.exit()}

参考资料

ftp安装相关配置等:https://www.jianshu.com/p/2f4d6f71b4c8
ftp命令详解：https://www.cnblogs.com/hider/p/10720895.html
ftp命令详解：http://blog.chinaunix.net/uid-21411227-id-1826769.html
ftpusers和user_list文件详解：https://blog.csdn.net/bluishglc/article/details/42273197
lftp常用命令：https://man.linuxde.net/lftp
node自动发布：https://juejin.im/post/5dce6b2b5188254eee54d77a
node自动发布：https://segmentfault.com/a/1190000018729701