自动化部署前端项目

实现打包时自动将dist文件夹部署到服务器

// autoDeploy.js
// 注意：在服务器上必须先建好dist和bak文件夹！
const Ssh = require('ssh2');
const fs = require('fs');
const readline = require('readline');
let pre = 'xxx'; //项目部署在服务器的地址
let packageZipName;

let sshClient = new Ssh.Client();

fs.readdir('./dist/', {}, (err, files) => {
    if (err) {
        console.log(err);
        return;
    }
    packageZipName = files.find((fileName) => fileName.endsWith('zip'));
    if (packageZipName) {
        console.log(mode, '部署路径：', pre);
        const rl = readline.createInterface(process.stdin, process.stdout);
        rl.question(`> 是否部署到测试环境(y/n):`, (status) => {
            rl.close();
            if (status.toLowerCase() === 'y') {
                console.log('开始执行上传');
                uploadProject();
            }
        });
    }
});

// 上传压缩包到服务器
function uploadProject() {
    sshClient
        .on('ready', () => {
            sshClient.sftp((err, sftp) => {
                sftp.fastPut(
                    './dist/' + packageZipName, // 本地文件路径
                    `${pre}/bak/${packageZipName}`, // 服务器文件路径
                    {},
                    (err) => {
                        if (!err) {
                            deployProject(sshClient);
                        } else {
                            console.log(err);
                        }
                    }
                );
            });
        })
        .connect({
            host: 'xxx', // 服务器 host
            port: 'xxx', // 服务器 port
            username: 'xxx', // 服务器用户名
            password: 'xxx', // 服务器密码
        });
}

// 利用 shell 方法部署项目
function deployProject(sshClient) {
    sshClient.shell((err, stream) => {
        stream
            .end(
                // cd 服务器存放文件的目录
                // 删除目录下所有文件
                // cd 服务器存放备份文件的目录
                // 将文件解压到服务器存放文件的目录
                // 退出
                `
            cd ${pre}/dist/
            rm -rf *
            cd ${pre}/bak/
            unzip ${packageZipName} -d ${pre}/dist/
            exit
            `
            )
            .on('data', (data) => {
                // 输出部署时的信息
                console.log('data: ', data.toString());
            })
            .on('close', () => {
                console.log('close');
                sshClient.end();
            });
    });
}

使用方式

在package.json文件中的打包命令配置以下代码

"scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build && node ./autoDeploy.js",
    },