Vue项目打包完后如何自动上传至服务器

写在开头

我先说下一下，为啥要写这个，由于之前在写不见面开标5.0系统，修改完bug后，然后前端通过npm run build打包后生成文件，然后在通过FTP工具上传至服务器，整个过程，我还需要手动拷贝到服务器，如果一天打包好几次，就要手动拷贝好几次，非常繁琐

前端部署项目方案

前端部署

1. 通过npm run build，构建前端静态资源文件
2. 只需上传构建后的资源文件，然后上传至服务器指定目录
3. 配置相关nginx或者其他相关服务，访问资源文件

服务器部署

1. 上传前端项目文件
2. 构建服务器前端环境，一般需要执行npm i，安装构建依赖
3. 执行package.json中的scripts中配置打包相关命令
4. 然后将打包的文件放置指定目录中
5. 配置相关nginx或者其他相关服务，访问资源文件

前端部署VS服务器部署

1. 服务器部署会通过npm i，安装一系列依赖包，这些依赖包很可能因为服务器上打包环境和本地打包环境不一致出现bug，前端部署本身开发机器已经安装好一切环境了，前端部署来发布其实是比较高效的选择，但我并不推荐这样做，这样源文件(当然源文件也在git或者svn上)是在本地开发者的电脑，而且有的公司会有专门的打包服务器部署
2. 前端部署，后端部署人员不需要关注前端一些构建命令，以及环境变量等等问题

如何操作

已不见面5.0开标系统为列子

创建连接服务器文件

在根目录创建upload.server.js文件

// 服务器配置信息
const server = {
    host: 'xxx.xxx.xx.xx', // 服务器ip
    port: '22', // 端口一般默认22
    username: 'xxxxx', // 用户名
    password: 'xxxxx', // 密码
    pathNmae: 'bidopen5', // 上传到服务器的位置
    locaPath:'./test/' // 本地打包文件的位置
}

// 引入scp2
const client = require('scp2');
const ora = require('ora');
const spinner = ora('正在发布到服务器...');

const Client = require('ssh2').Client; // 创建shell脚本
const conn = new Client();

console.log('正在建立连接');
conn.on('ready', function () {
    console.log('已连接')
    if(!server.pathNmae){
        console.log('连接已关闭');
        conn.end()
        return false;
    }
    // 这里我拼接了放置服务器资源目录的位置 ，首选通过rm -rf删除了这个目录下的文件
    conn.exec('rm -rf /xxxx/' + server.pathNmae + '/*', function (err, stream) {
        console.log('删除文件');
        stream.on('close', function (code, signal) {
            console.log('开始上传')
            spinner.start();
            client.scp(server.locaPath, {
                "host": server.host,
                "port": server.port,
                "username": server.username,
                "password": server.password, 
                "path": '/xxxx/'+ server.pathNmae
            }, err => {
                spinner.stop();
                if (!err) {
                    console.log('项目发布完毕');
                } else {
                    console.log("err", err)
                }
                conn.end() // 结束命令
            })
        })
    })
}).connect({
    host: server.host,
    port: server.port,
    username: server.username,
    password: server.password
    //privateKey: '' //使用 私钥密钥登录 目前测试服务器不需要用到
});

const client = require('scp2');

scp2是一个命令行工具，可以连接到服务器上,能快速执行文件拷贝、下载、上传等

scp2具体API

const Client = require('ssh2').Client;

ssh2连接服务，能执行一些相关命令等等，其实就使用ssh2也能够完成文件的上传，下载等等，不要用到scp2

ssh2具体API参数github

配置启动项

在package.json中启动

这里我以测试环境为例子

"scripts": {
    "test": "vue-cli-service build --mode test", // 构建测试包
    "upload": "node upload.server.js", // 上传服务器文件
    "publish": "npm run test && npm run upload" // 发布命令(执行以上两个命令)
},

在命令行中执行npm run publish,效果如下首选执行了vue-cli-service build --mode test命令

然后在执行完毕后，执行了node upload.server.js

查看服务器文件也是更新后

通过webpack执行node脚本

如果你的项目是以vue-cli构建的项目,在vue.config.js中的configureWebpack模块中

configureWebpack:config=>{
         const plugins = [];
    apply:(compiler)=>{
                    // 编译完成后
                    compiler.hooks.done.tap('DonePlugin', compilation => {
                        console.log('编译完成')
                        // 通过配置 package.json , 执行指定node.js脚本
                        exec('npm run upload', {stdio: 'inherit'});
                    });
       }
    return { plugins }
}

compiler.hooks.done.tap 是webpack提供的api，DonePlugin是构建完成的一个指令，详细webpack构建命令，然后在执行node脚本程序

直接通过node执行文件

直接执行的化，需要两步走，一步需要先获得前端编译好的静态资源文件，二步在调用上传脚本

npm run test

node upload.server.js

其实package.json就是执行了指定的node脚本，只不过整理的更有规范了

服务端部署

可以使用Jenkins，具体使用参考，实战笔记：Jenkins打造强大的前端自动化工作流，可视化管理，推荐使用

总结

服务器连接配置应当放在.env.xxx环境文件中做配置，这样可以针对不同的项目自动上传不同环境服务器文件以上前端部署，只是刚好适应了公司目前前端打包现状