前端项目增量自动部署方案

一、项目配置修改

页面中引入的所有本地资源都是直接访问根目录的，如果没有进行特殊配置，在非域名根路径的情况下会出现404的问题。^[1]
因此需要在vue.config.js中加入以下内容，来指定资源的路径前缀：

publicPath: process.env.NODE_ENV === "production" ? '/project/planeechart' : './' 

指定后，访问资源的时候就会自动从/project/planeechart目录下开始寻找

二、实现自动部署脚本

1. 配置服务器Json
   这里需要配置服务器的相关参数，我是分了服务器，目标上传地址两个部分：

{
    "servers": {
        "[SERVERNAME]": {
            "ip" : [IP],
            "port": [PORT]
            "user": "root",
            "pKey": "~/.ssh/id_rsa"
        }
    },
    "serWebPath": {
        "base": "/usr/share/nginx/html/"
        "plane_echart": "planeechart",
        "eshopcms": "eshopcms"
    }
}

2. 安装相关依赖

npm i chalk -S // 在命令行中输出不同颜色的日志
npm i ora -S // 在命令行中输出加载状态日志
npm i scp2 -S // 用来上传文件
npm i compressing -S // 压缩文件
npm i ssh2 -S // 连接服务器

3. 创建deploy脚本
   由于chalk和ora都是用ES6规范的模块引入方式，即import，所以整个脚本都用该规范。
   这里需要在package.json中开启加入"type": module来使用该规范。

import chalk from 'chalk'
import ora from 'ora'
import scpClient from 'scp2'
import compressing from 'compressing'
import { Client } from 'ssh2'
import minimist from 'minimist'
import fs from 'fs'

const projName = minimist(process.argv.slice(2))['proj'] // minimist用于读入类似“--proj=planeechart”之类的传入参数
if (!projName) throw new Error("缺少传入参数")
const data = JSON.parse(fs.readFileSync('../servers.json')) // 最终执行是在项目中，而servers.json跟deploy.js我放到了所有项目的根目录，让所有项目都用统一一套部署发麻
let serverPath = data['serWebPath'][projName]
if (!serverPath) throw new Error("当前项目未配置serWebPath")
serverPath = data['serWebPath']['base'] + serverPath

let curServer = data['servers']['[SERVERNAME]']
curServer['pKey'] = fs.readFileSync(curServer['pKey'])

const uploading = ora(`正在发布到${curServer['ip']}服务器`)
const ziping = ora(`正在压缩${projName}……`)

const conn = new Client()

ziping.start()
if (fs.existsSync('./dist.zip')) fs.unlink('./dist.zip')
// 压缩网站
compressing.zip.compressDir('./dist', 'dist.zip')
    .then(e => {
        ziping.stop()
        console.log(chalk.green('压缩成功！'))
        spinner.start()
        // 上传网站
        scpClient.scp('dist.zip',
            {
                host: curServer['ip'],
                port: curServer['port'],
                username: curServer['user'],
                path: serverPath,
                privateKey: curServer['pKey']
            },
            err => {
                spinner.stop()
                if (err) {
                    console.log(chalk.red('发布失败！'))
                    throw err
                }
                conn.on('ready', () => {
                    // 连接到服务器并解压网站
                    conn.exec(`unzip -o ${serverPath}/dist.zip -d ${serverPath}/ && mv ${serverPath}/dist/* ${serverPath}/ && rm -rf ${serverPath}/dist*`, 
                        (err, stream) => {
                            if (err) throw err
                            stream.on('close', (code, signal) => {
                                console.log('chalk.green(`成功发布到${curServer['ip']}服务器`)')
                                conn.close()
                            })
                                .on('data', data => console.log('STDOUT:' + data))  // 如果不加下面这两句，conn会卡住
                                .stderr.on('data', data => console.log('STDERR:' + data))

                        }
                    )
                }).connect({
                    host: curServer['ip'],
                    port: curServer['port'],
                    username: curServer['user'],
                    privateKey: curServer['pKey']
                })
            }
        )
    })
    .catch(err => console.log(chalk.red('Fail！压缩失败！')))

三、在项目中启用脚本

找到package.json，在script属性中添加如下内容

"deploy": "npm run build && node ../deploy.js --proj=plane_echart"

然后在当前目录下执行以下指令即可

npm run deploy

四、增量更新（待写）

参考：
vue自动部署
Node.js 从命令行接收参数
node.js 如何读取json文件内容
require，import区别？
ssh2文档
webpack打包增量更新实践
Vue前端项目增量更新

1. Vue项目打包部署总结 ↩