共计 16610 个字符,预计需要花费 42 分钟才能阅读完成。
前言
在前端工程化中,前端开发人员终于在一直的进步本人的位置,再也不是简略的切图仔了。当然,随之而来的就是咱们的工作内容变得越来越多,变得越来越繁琐。不仅要一直的学习新的前端技术内容,而且还要独立保护前端的部署工作。因而,如何能疾速的进行工程化内容的部署,就是一件十分有价值的事件。
疾速部署
对于前端的部署来说,其实次要就是将编译后的工程化我的项目(以 vue 来说就是将 npm run build 的 dist 文件夹)间接部署到对应的服务器的指定目录下即可,其余的内容咱们临时不在此处做过多的解说。
因而,目前个别会应用 SFTP 工具(如:FileZilla:https://www.filezilla.cn/,Cyberduck:https://cyberduck.io/)来上传构建好的前端代码到服务器。这种形式尽管也是比拟快的,然而每次要本人进行打包编译 =》压缩 =》关上对应的工具 =》找到对应的门路,手动的将相干的文件上传到对应的服务中。并且为了部署到不同的环境中(个别我的项目开发包含:dev 开发环境、test 测试环境、uat 测试环境、pro 测试环境等)还要反复的进行屡次的重复性操作。这种形式不仅繁琐,而且还升高了咱们程序员的身份。所以咱们须要用自动化部署来代替手动,这样一方面能够进步部署效率,另一方面开发人员能够少做一些他们认为的无用功。
筹备工作
话不多说,说干就干。首先,咱们先梳理一下个别的部署流程,次要是先将本地的工程化代码进行打包编译 => 通过 ssh 登录到服务器 => 将本地编译的代码上传到服务器指定的门路中,具体流程如下:
因而,通过代码实现自动化部署脚本,次要须要实现如下,上面以 vue 我的项目来为工程项目来具体解说:
- 实现本地代码编译;可间接配置 npm run build 即可进行相干的打包
- 实现本地编译的代码压缩
3. 通过 ssh 连贯近程服务器
- 查看对应的近程部署门路是否存在,不存在须要创立
- 上传本地的压缩包
- 解压上传的压缩包
- 删除上传的压缩包
- 敞开 ssh 连贯
- 删除本地的压缩包
具体实现
为了在可能实现以上的几个步骤,咱们须要引入一些依赖包,以此来进行相干步骤的操作和日志的打印输出
- chalk:格式化输入日志的插件,能够通过配置不同的色彩来显示不同的日志打印。https://www.npmjs.com/package/chalk
- child_process:nodejs 的一个子过程模块,能够用来创立一个子过程,并执行一些工作,能够间接在 js 外面调用 shell 命令。http://nodejs.cn/api/child_process.html
- jszip:一个轻量级的 zip 压缩库, 用于压缩编译后的脚本。https://stuk.github.io/jszip/
- ssh2:用于通过 ssh 来连贯近程服务器的插件。https://github.com/mscdex/ssh2
大抵流程如下:
根本配置
为了可能将部署相干的内容,如服务器信息,部署的门路等内容进行对立的治理,以便进行将来的可视化配置。因而,在我的项目中创立一个独立的文件夹,对立治理部署相干的文件,并且建设一个 config.js 和 ssh.js 文件,别离用于配置相干的部署信息和具体的部署脚本。其中,config.js 中的配置具体如下:
const config = {
// 开发环境
dev: {
host: '',
username: 'root',
password: '',
catalog: '', // 前端文件压缩目录
port: 22, // 服务器 ssh 连贯端口号
privateKey: null // 私钥,私钥与明码二选一
},
// 测试环境
test: {
host: '', // 服务器 ip 地址或域名
username: 'root', // ssh 登录用户
password: '', // 明码
catalog: '', // 前端文件压缩目录
port: 22, // 服务器 ssh 连贯端口号
privateKey: null // 私钥,私钥与明码二选一
},
// 线上环境
pro: {
host: '', // 服务器 ip 地址或域名
username: 'root', // ssh 登录用户
password: '', // 明码,请勿将此明码上传至 git 服务器
catalog: '', // 前端文件压缩目录
port: 22, // 服务器 ssh 连贯端口号
privateKey: null // 私钥,私钥与明码二选一
}
}
module.exports = {
// publishEnv: pro,
publishEnv: config.pro, // 公布环境
buildDist: 'dist', // 前端文件打包之后的目录,默认 dist
buildCommand: 'npm run build', // 打包前端文件的命令
readyTimeout: 20000, // ssh 连贯超时工夫
deleteFile: true, // 是否删除线上上传的 dist 压缩包
isNeedBuild: true // s 是否须要打包
}
压缩打包内容
压缩打包的内容,应用 JSZIP 插件,初始化一个 const zip = new JSZIP(),而后在依照对应的语法进行具体的实现,其实现过程次要是通过的先递归读取相干的文件,而后退出到 zip 对象中,最初通过插件进行具体的压缩,最初写入到磁盘中。具体代码如下:
递归读取打包文件
// 读取文件
readDir (obj, nowPath) {const files = fs.readdirSync(nowPath) // 读取目录中的所有文件及文件夹(同步操作)files.forEach((fileName, index) => {
// 遍历检测目录中的文件
// console.log(fileName, index) // 打印以后读取的文件名
const fillPath = nowPath + '/' + fileName
const file = fs.statSync(fillPath) // 获取一个文件的属性
if (file.isDirectory()) {
// 如果是目录的话,持续查问
const dirlist = zip.folder(fileName) // 压缩对象中生成该目录
this.readDir(dirlist, fillPath) // 从新检索目录文件
} else {obj.file(fileName, fs.readFileSync(fillPath)) // 压缩目录增加文件
}
})
}
压缩文件夹下的所有文件
// 压缩文件夹下的所有文件
zipFile (filePath) {return new Promise((resolve, reject) => {
let desc =
'*******************************************\n' +
'*** 正在压缩 ***\n' +
'*******************************************\n'
console.log(chalk.blue(desc))
this.readDir(zip, filePath)
zip
.generateAsync({
// 设置压缩格局,开始打包
type: 'nodebuffer', // nodejs 用
compression: 'DEFLATE', // 压缩算法
compressionOptions: {
// 压缩级别
level: 9
}
})
.then(content => {
fs.writeFileSync(path.join(rootDir, '/', this.fileName),
content,
'utf-8'
)
desc =
'*******************************************\n' +
'*** 压缩胜利 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
resolve({success: true})
}).catch(err => {console.log(chalk.red(err))
reject(err)
})
})
}
应用 child_process 的 exec 来运行 npm run build 脚本打包
// 打包本地前端文件
buildProject () {return new Promise((resolve, reject) => {exec(Config.buildCommand, async (error, stdout, stderr) => {if (error) {console.error(error)
reject(error)
} else if (stdout) {
resolve({
stdout,
success: true
})
} else {console.error(stderr)
reject(stderr)
}
})
})
}
连贯 ssh 服务器
通过 ssh2 的 client 来创立 ssh 连贯
// 连贯服务器
connectServer () {return new Promise((resolve, reject) => {
const conn = this.conn
conn
.on('ready', () => {
resolve({success: true})
})
.on('error', (err) => {reject(err)
})
.on('end', () => {
const desc =
'*******************************************\n' +
'*** SSH 连贯已完结 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
})
.on('close', () => {
const desc =
'*******************************************\n' +
'*** SSH 连贯已敞开 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
})
.connect(this.server)
})
}
上传压缩的工程文件
判断上传门路是否存在
// 判断文件是否存在,如果不存在则进行创立文件夹
await sshCon.execSsh(
`
if [[! -d ${sshConfig.catalog} ]]; then
mkdir -p ${sshConfig.catalog}
fi
`
)
通过 client 的 sftp 讲本地的压缩包上传到指定的服务器的对应地址
// 上传文件
uploadFile ({localPath, remotePath}) {return new Promise((resolve, reject) => {return this.conn.sftp((err, sftp) => {if (err) {reject(err)
} else {sftp.fastPut(localPath, remotePath, (err, result) => {if (err) {reject(err)
}
resolve({
success: true,
result
})
})
}
})
})
}
解压上传的工程文件
通过 exec 来执行 ssh 命令的
// 执行 ssh 命令
execSsh (command) {return new Promise((resolve, reject) => {return this.conn.exec(command, (err, stream) => {if (err || !stream) {reject(err)
} else {
stream
.on('close', (code, signal) => {
resolve({success: true})
})
.on('data', function (data) {})
.stderr.on('data', function (data) {
resolve({
success: false,
error: data.toString()})
})
}
})
})
}
解压上传的压缩文件
desc =
'*******************************************\n' +
'*** 上传文件胜利,开始解压文件 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
const zipRes = await sshCon
.execSsh(`unzip -o ${sshConfig.catalog + '/' + fileName} -d ${sshConfig.catalog}`
)
.catch((e) => {})
if (!zipRes || !zipRes.success) {console.error('---- 解压文件失败,请手动解压 zip 文件 ----')
console.error(`---- 谬误起因:${zipRes.error}----`)
return false
} else if (Config.deleteFile) {
desc =
'*******************************************\n' +
'*** 解压文件胜利,开始删除上传的压缩包 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
删除上传的工程文件
删除对应的压缩包
desc =
'*******************************************\n' +
'*** 解压文件胜利,开始删除上传的压缩包 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
// 留神:rm -rf 为危险操作,请勿对此段代码做其余非必须更改
const deleteZipRes = await sshCon
.execSsh(`rm -rf ${sshConfig.catalog + '/' + fileName}`)
.catch((e) => {})
if (!deleteZipRes || !deleteZipRes.success) {console.log(chalk.pink('---- 删除文件失败,请手动删除 zip 文件 ----'))
console.log(chalk.red(`---- 谬误起因:${deleteZipRes.error}----`))
return false
}
敞开 ssh 连贯
封装敞开的服务器连贯
// 完结连贯
endConn () {this.conn.end()
if (this.connAgent) {this.connAgent.end()
}
}
删除本地的压缩包文件
封装删除本地的压缩包
// 删除本地文件
deleteLocalFile () {return new Promise((resolve, reject) => {fs.unlink(path.join(rootDir, '/', this.fileName), function (error) {if (error) {
const desc =
'*******************************************\n' +
'*** 本地文件删除失败 ***\n' +
'*******************************************\n'
console.log(chalk.yellow(desc))
reject(error)
} else {
const desc =
'*******************************************\n' +
'*** 删除胜利 ***\n' +
'*******************************************\n'
console.log(chalk.blue(desc))
resolve({success: true})
}
})
})
}
脚本命令的配置
在我的项目的 package.json 中配置命令
"ssh": "node ./build/ssh.js"
残缺的实现 ssh 流程
// SSH 连贯,上传,解压,删除等相干操作
async function sshUpload (sshConfig, fileName) {const sshCon = new SSH(sshConfig)
const sshRes = await sshCon.connectServer().catch((e) => {console.error(e)
})
if (!sshRes || !sshRes.success) {
const desc =
'*******************************************\n' +
'*** ssh 连贯失败 ***\n' +
'*******************************************\n'
console.log(chalk.red(desc))
return false
}
let desc =
'*******************************************\n' +
'*** 连贯服务器胜利,开始上传文件 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
// 判断文件是否存在,如果不存在则进行创立文件夹
await sshCon.execSsh(
`
if [[! -d ${sshConfig.catalog} ]]; then
mkdir -p ${sshConfig.catalog}
fi
`
)
const uploadRes = await sshCon
.uploadFile({localPath: path.join(rootDir, '/', fileName),
remotePath: sshConfig.catalog + '/' + fileName
})
.catch((e) => {console.error(e)
})
if (!uploadRes || !uploadRes.success) {console.error('---- 上传文件失败,请从新上传 ----')
return false
}
desc =
'*******************************************\n' +
'*** 上传文件胜利,开始解压文件 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
const zipRes = await sshCon
.execSsh(`unzip -o ${sshConfig.catalog + '/' + fileName} -d ${sshConfig.catalog}`
)
.catch((e) => {})
if (!zipRes || !zipRes.success) {console.error('---- 解压文件失败,请手动解压 zip 文件 ----')
console.error(`---- 谬误起因:${zipRes.error}----`)
return false
} else if (Config.deleteFile) {
desc =
'*******************************************\n' +
'*** 解压文件胜利,开始删除上传的压缩包 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
// 留神:rm -rf 为危险操作,请勿对此段代码做其余非必须更改
const deleteZipRes = await sshCon
.execSsh(`rm -rf ${sshConfig.catalog + '/' + fileName}`)
.catch((e) => {})
if (!deleteZipRes || !deleteZipRes.success) {console.log(chalk.pink('---- 删除文件失败,请手动删除 zip 文件 ----'))
console.log(chalk.red(`---- 谬误起因:${deleteZipRes.error}----`))
return false
}
}
// 完结 ssh 连贯
sshCon.endConn()
return true
}
理论运行脚本
// 执行前端部署
;(async () => {const file = new File()
let desc =
'*******************************************\n' +
'*** 开始编译 ***\n' +
'*******************************************\n'
if (Config.isNeedBuild) {console.log(chalk.green(desc))
// 打包文件
const buildRes = await file
.buildProject()
.catch((e) => {console.error(e)
})
if (!buildRes || !buildRes.success) {
desc =
'*******************************************\n' +
'*** 打包出错,请查看谬误 ***\n' +
'*******************************************\n'
console.log(chalk.red(desc))
return false
}
console.log(chalk.blue(buildRes.stdout))
desc =
'*******************************************\n' +
'*** 编译胜利 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
}
// 压缩文件
const res = await file
.zipFile(path.join(rootDir, '/', Config.buildDist))
.catch(() => {})
if (!res || !res.success) return false
desc =
'*******************************************\n' +
'*** 开始部署 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
const bol = await sshUpload(Config.publishEnv, file.fileName)
if (bol) {
desc =
'\n******************************************\n' +
'*** 部署胜利 ***\n' +
'******************************************\n'
console.log(chalk.green(desc))
file.stopProgress()} else {process.exit(1)
}
})()
残缺的 ssh.js 代码
const {exec} = require('child_process')
const path = require('path')
const JSZIP = require('jszip')
const fs = require('fs')
const Client = require('ssh2').Client
const Config = require('./config.js')
const chalk = require('chalk')
const zip = new JSZIP()
// 前端打包文件的目录
const rootDir = path.resolve(__dirname, '..')
/**
* ssh 连贯
*/
class SSH {constructor ({ host, port, username, password, privateKey}) {
this.server = {
host,
port,
username,
password,
privateKey
}
this.conn = new Client()}
// 连贯服务器
connectServer () {return new Promise((resolve, reject) => {
const conn = this.conn
conn
.on('ready', () => {
resolve({success: true})
})
.on('error', (err) => {reject(err)
})
.on('end', () => {
const desc =
'*******************************************\n' +
'*** SSH 连贯已完结 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
})
.on('close', () => {
const desc =
'*******************************************\n' +
'*** SSH 连贯已敞开 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
})
.connect(this.server)
})
}
// 上传文件
uploadFile ({localPath, remotePath}) {return new Promise((resolve, reject) => {return this.conn.sftp((err, sftp) => {if (err) {reject(err)
} else {sftp.fastPut(localPath, remotePath, (err, result) => {if (err) {reject(err)
}
resolve({
success: true,
result
})
})
}
})
})
}
// 执行 ssh 命令
execSsh (command) {return new Promise((resolve, reject) => {return this.conn.exec(command, (err, stream) => {if (err || !stream) {reject(err)
} else {
stream
.on('close', (code, signal) => {
resolve({success: true})
})
.on('data', function (data) {})
.stderr.on('data', function (data) {
resolve({
success: false,
error: data.toString()})
})
}
})
})
}
// 完结连贯
endConn () {this.conn.end()
if (this.connAgent) {this.connAgent.end()
}
}
}
/*
* 本地操作
* */
class File {constructor () {this.fileName = this.formateName()
}
// 删除本地文件
deleteLocalFile () {return new Promise((resolve, reject) => {fs.unlink(path.join(rootDir, '/', this.fileName), function (error) {if (error) {
const desc =
'*******************************************\n' +
'*** 本地文件删除失败 ***\n' +
'*******************************************\n'
console.log(chalk.yellow(desc))
reject(error)
} else {
const desc =
'*******************************************\n' +
'*** 删除胜利 ***\n' +
'*******************************************\n'
console.log(chalk.blue(desc))
resolve({success: true})
}
})
})
}
// 读取文件
readDir (obj, nowPath) {const files = fs.readdirSync(nowPath) // 读取目录中的所有文件及文件夹(同步操作)files.forEach((fileName, index) => {
// 遍历检测目录中的文件
// console.log(fileName, index) // 打印以后读取的文件名
const fillPath = nowPath + '/' + fileName
const file = fs.statSync(fillPath) // 获取一个文件的属性
if (file.isDirectory()) {
// 如果是目录的话,持续查问
const dirlist = zip.folder(fileName) // 压缩对象中生成该目录
this.readDir(dirlist, fillPath) // 从新检索目录文件
} else {obj.file(fileName, fs.readFileSync(fillPath)) // 压缩目录增加文件
}
})
}
// 压缩文件夹下的所有文件
zipFile (filePath) {return new Promise((resolve, reject) => {
let desc =
'*******************************************\n' +
'*** 正在压缩 ***\n' +
'*******************************************\n'
console.log(chalk.blue(desc))
this.readDir(zip, filePath)
zip
.generateAsync({
// 设置压缩格局,开始打包
type: 'nodebuffer', // nodejs 用
compression: 'DEFLATE', // 压缩算法
compressionOptions: {
// 压缩级别
level: 9
}
})
.then(content => {
fs.writeFileSync(path.join(rootDir, '/', this.fileName),
content,
'utf-8'
)
desc =
'*******************************************\n' +
'*** 压缩胜利 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
resolve({success: true})
}).catch(err => {console.log(chalk.red(err))
reject(err)
})
})
}
// 打包本地前端文件
buildProject () {return new Promise((resolve, reject) => {exec(Config.buildCommand, async (error, stdout, stderr) => {if (error) {console.error(error)
reject(error)
} else if (stdout) {
resolve({
stdout,
success: true
})
} else {console.error(stderr)
reject(stderr)
}
})
})
}
// 进行程序之前需删除本地压缩包文件
stopProgress () {this.deleteLocalFile()
.catch((e) => {console.log(chalk.red('---- 删除本地文件失败,请手动删除 ----'))
console.log(chalk.red(e))
process.exit(1)
})
.then(() => {
const desc =
'*******************************************\n' +
'*** 已删除本地压缩包文件 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
process.exitCode = 0
})
}
// 格式化命名文件名称
formateName () {
// 压缩包的名字
const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const timeStr = `${year}_${month}_${day}`
return `${Config.buildDist}-${timeStr}-${Math.random()
.toString(16)
.slice(2)}.zip`
}
}
// SSH 连贯,上传,解压,删除等相干操作
async function sshUpload (sshConfig, fileName) {const sshCon = new SSH(sshConfig)
const sshRes = await sshCon.connectServer().catch((e) => {console.error(e)
})
if (!sshRes || !sshRes.success) {
const desc =
'*******************************************\n' +
'*** ssh 连贯失败 ***\n' +
'*******************************************\n'
console.log(chalk.red(desc))
return false
}
let desc =
'*******************************************\n' +
'*** 连贯服务器胜利,开始上传文件 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
// 判断文件是否存在,如果不存在则进行创立文件夹
await sshCon.execSsh(
`
if [[! -d ${sshConfig.catalog} ]]; then
mkdir -p ${sshConfig.catalog}
fi
`
)
const uploadRes = await sshCon
.uploadFile({localPath: path.join(rootDir, '/', fileName),
remotePath: sshConfig.catalog + '/' + fileName
})
.catch((e) => {console.error(e)
})
if (!uploadRes || !uploadRes.success) {console.error('---- 上传文件失败,请从新上传 ----')
return false
}
desc =
'*******************************************\n' +
'*** 上传文件胜利,开始解压文件 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
const zipRes = await sshCon
.execSsh(`unzip -o ${sshConfig.catalog + '/' + fileName} -d ${sshConfig.catalog}`
)
.catch((e) => {})
if (!zipRes || !zipRes.success) {console.error('---- 解压文件失败,请手动解压 zip 文件 ----')
console.error(`---- 谬误起因:${zipRes.error}----`)
return false
} else if (Config.deleteFile) {
desc =
'*******************************************\n' +
'*** 解压文件胜利,开始删除上传的压缩包 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
// 留神:rm -rf 为危险操作,请勿对此段代码做其余非必须更改
const deleteZipRes = await sshCon
.execSsh(`rm -rf ${sshConfig.catalog + '/' + fileName}`)
.catch((e) => {})
if (!deleteZipRes || !deleteZipRes.success) {console.log(chalk.pink('---- 删除文件失败,请手动删除 zip 文件 ----'))
console.log(chalk.red(`---- 谬误起因:${deleteZipRes.error}----`))
return false
}
}
// 完结 ssh 连贯
sshCon.endConn()
return true
}
// 执行前端部署
;(async () => {const file = new File()
let desc =
'*******************************************\n' +
'*** 开始编译 ***\n' +
'*******************************************\n'
if (Config.isNeedBuild) {console.log(chalk.green(desc))
// 打包文件
const buildRes = await file
.buildProject()
.catch((e) => {console.error(e)
})
if (!buildRes || !buildRes.success) {
desc =
'*******************************************\n' +
'*** 打包出错,请查看谬误 ***\n' +
'*******************************************\n'
console.log(chalk.red(desc))
return false
}
console.log(chalk.blue(buildRes.stdout))
desc =
'*******************************************\n' +
'*** 编译胜利 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
}
// 压缩文件
const res = await file
.zipFile(path.join(rootDir, '/', Config.buildDist))
.catch(() => {})
if (!res || !res.success) return false
desc =
'*******************************************\n' +
'*** 开始部署 ***\n' +
'*******************************************\n'
console.log(chalk.green(desc))
const bol = await sshUpload(Config.publishEnv, file.fileName)
if (bol) {
desc =
'\n******************************************\n' +
'*** 部署胜利 ***\n' +
'******************************************\n'
console.log(chalk.green(desc))
file.stopProgress()} else {process.exit(1)
}
})()