vue自动部署项目到服务器

59次阅读

共计 5387 个字符,预计需要花费 14 分钟才能阅读完成。

想要的功能

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

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

  • 第一种是写一个 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
# 远端服务器 ip
ip="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<<EOF
open $ip
user $userName $password
$ftpFransferType
cd $remote
pwd
prompt
put $ftpPutFileName
bye
EOF
echo "-------------------------------------- 上传 ${ftpPutFileName} 文件成功 --------------------------------------"

shell 使用 lftp 传输文件夹

直接把文件夹丢到服务器

#!/bin/bash
#--------------------------------------------
# 自动传输文件到不同环境
# author:qinyuanqi
#--------------------------------------------
#出现异常不往下面走
set -e
# SFTP 配置信息
# IP
IP="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]
then
echo "$CLIENTDIR  是一个文件夹"
elif [-f $CLIENTDIR]
then
echo "$CLIENTDIR  是一个文件"
else
echo "$CLIENTDIR 不存在"
fi
if ["$1"x == "test"x]
then
echo  "---- 准备传输 $CLIENTDIR 文件到  ---- 测试环境"
# 这样传输到服务器,访问项目,nginx 会报 403,测试大佬说不能改 nginx 配置,难搞哦,不知道怎么解决了
IP="192.168.1.166"
USER="测试环境的用户"
PASSWORD="测试环境的密码"
else
echo  "---- 准备传输 $CLIENTDIR 文件到  ---- 开发环境"
fi
echo "---- 开始上传 ${CLIENTDIR} 文件 ----"
lftp -u $USER,$PASSWORD $IP <<EOF
cd ${remote}
mirror -R $CLIENTDIR
by
EOF
echo "---- 上传 ${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.log
const 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:21
username: '开发服务器用户名',
password: '开发服务器密码',
remotePath: '服务器部署的地址',
}
upload()
break
// 测试环境的一些配置
case 'test':
log(chalk.blue('---- 开始打包到测试环境 ----'))
remoteConfig = {
host: '测试服务器 ip',
// 远程端口,默认是 21
// port:21
username: '测试服务器用户名',
password: '测试服务器密码',
remotePath: '测试服务器部署地址',
}
upload()
break
// 生产环境就自动压缩文件,不做别的处理
case 'production':
log(chalk.blue('---- 生产环境 ---- 开始压缩文件 ----'))
compressing.zip
.compressDir(distDir, distZipPath)
.then(() => {log(chalk.green(` 压缩 ${distZipPath} 成功 `))
})
.catch(() => {log(chalk.red(` 压缩 ${distZipPath} 失败 `))
})
break
default:
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

正文完
 0