前端轻量化部署脚手架实践

时间  2020-01-16
标签 前端 轻量 部署 脚手架 实践 繁體版
原文   原文链接

背景

传统的前端代码手工部署流程以下：html

手工部署流程

传统的手工部署须要经历：前端

  • 1.打包，本地运行npm run build打包生成dist文件夹。
  • 2.ssh链接服务器，切换路径到web对应目录下。
  • 3.上传代码到web目录，通常经过xshell或者xftp完成。

传统的手工部署存在如下缺点：vue

  • 1.每次都须要打开xshell软件与服务器创建链接。
  • 2.当负责多个项目且每一个项目都具备测试环境和线上环境时，容易引发部署错误。
    （我的以前很是悲剧地遇到过一次，因为同时负责四个项目，八个环境。一天同时可能修改多个项目，头晕脑胀，将测试环境代码部署到线上环境了，欲哭无泪）

全自动化的部署其实能够采用jenkins实现，jenkins能够根据gitlab push或者merge事件自动打包代码到web目录，能够参考：node

Jenkins+Docker自动化部署vue项目git

采用jenkins部署是很方便，可是也存在安装配置麻烦、打包占用服务器资源等缺点。github

因为咱们的服务器常年高负载运行，曾出现jenkeins打包把服务器打崩的状况，所以只能逼着博主采用轻量部署的方案来实现自动化部署了（果真技术方案都是被逼出来的，哈哈）。web

1.方案调研

思考：
能不能运行相似npm run deploy一个脚本就直接将咱们的代码打包、部署到服务器上的web目录？shell

通过一番调研：发现node-ssh、archiver能够知足咱们的需求。npm

1.1.node-ssh

node-ssh是一个基于ssh2的轻量级npm包，主要用于ssh链接服务器、上传文件、执行命令。json

使用指南：

const node_ssh = require('node-ssh')
const ssh = new node_ssh()
复制代码

用到的api：

  • 1.ssh.connect：链接服务器
ssh.connect({
  host: 'localhost',
  username: 'steel',
  privateKey: '/home/steel/.ssh/id_rsa'
})
复制代码
  • 2.ssh.putFile：上传文件
ssh.putFile('/home/steel/Lab/localPath', '/home/steel/Lab/remotePath').then(function() {
    console.log("The File thing is done")
  }, function(error) {
    console.log("Something's wrong")
    console.log(error)
  })
复制代码
  • 3.ssh.execCommand：执行远端服务器命令
ssh.execCommand('hh_client --json', { cwd:'/var/www' }).then(function(result) {
    console.log('STDOUT: ' + result.stdout)
    console.log('STDERR: ' + result.stderr)
  })
复制代码

1.2.archiver

archiver是一个用于生成存档的npm包，主要用于打包生成zip、rar等。

使用指南：

const archiver = require('archiver');

  // 设置压缩类型及级别
  const archive = archiver('zip', {
    zlib: { level: 9 },
  }).on('error', err => {
    throw err;
  });
  
  // 建立文件输出流
  const output = fs.createWriteStream(__dirname + '/dist.zip');
  
  // 经过管道方法将输出流存档到文件
  archive.pipe(output);
  
  // 从subdir子目录追加内容并重命名
  archive.directory('subdir/', 'new-subdir');
  
  // 完成打包归档
  archive.finalize();
复制代码

1.3.部署方案

部署方案设计以下：

脚本方案

流程以下：

  • 1.读取配置文件，包含服务器host、port、web目录及本地目录等信息
  • 2.本地打包，npm run build生成dist包
  • 3.打包成zip，使用archiver将dist包打包成dist.zip
  • 4.链接服务器，node-ssh读取配置链接服务器
  • 5.上传zip，使用ssh.putFile上传dist.zip
  • 6.解压缩zip，使用ssh.execCommand解压dist.zip
  • 7.删除本地dist.zip，使用fs.unlink删除本地dist.zip

具体代码：

// deploy.js

const path = require('path');
const fs = require('fs');
const childProcess = require('child_process');
const node_ssh = require('node-ssh');
const archiver = require('archiver');
const { successLog, errorLog, underlineLog } = require('../utils/index');
const projectDir = process.cwd();

let ssh = new node_ssh(); // 生成ssh实例

// 部署流程入口
function deploy(config) {
  const { script } = config;
  try {
    console.log(`\n（1）${script}`);
    childProcess.execSync(`${script}`);
    successLog(' 打包成功');
    startZip(config);
  } catch (err) {
    errorLog(err);
    process.exit(1);
  }
}

// 开始打包
function startZip(config) {
  let { distPath, host } = config;
  distPath = path.resolve(projectDir, distPath);
  console.log('（2）打包成zip');
  const archive = archiver('zip', {
    zlib: { level: 9 },
  }).on('error', err => {
    throw err;
  });
  const output = fs.createWriteStream(`${projectDir}/dist.zip`).on('close', err => {
    if (err) {
      console.log(' 关闭archiver异常:', err);
      return;
    }
    successLog(' zip打包成功');
    console.log(`（3）链接${underlineLog(host)}`);
    uploadFile(config);
  });
  archive.pipe(output);
  archive.directory(distPath, '/');
  archive.finalize();
}

// 上传文件
function uploadFile(config) {
  const { host, port, username, password, privateKey, passphrase, } = config;
  const sshConfig = {
    host,
    port,
    username,
    password,
    privateKey,
    passphrase
  };
  ssh.connect(sshConfig)
    .then(() => {
      successLog(`  SSH链接成功`);
      console.log(`（4）上传zip至目录${underlineLog(config.webDir)}`);
      ssh.putFile(`${projectDir}/dist.zip`, `${config.webDir}/dist.zip`)
        .then(() => {
          successLog(`  zip包上传成功`);
          console.log('（5）解压zip包');
          statrRemoteShell(config);
        })
        .catch(err => {
          errorLog(' 文件传输异常', err);
          process.exit(0);
        });
    })
    .catch(err => {
      errorLog(' 链接失败', err);
      process.exit(0);
    });
}

// 执行Linux命令
function runCommand(command, webDir) {
  return new Promise((resolve, reject) => {
    ssh.execCommand(command, { cwd: webDir })
      .then(result => {
        resolve();
        // if (result.stdout) {
        //   successLog(result.stdout);
        // }
        if (result.stderr) {
          errorLog(result.stderr);
          process.exit(1);
        }
      })
      .catch(err => {
        reject(err);
      });
  });
}

// 开始执行远程命令
function statrRemoteShell(config) {
  const { webDir } = config;
  const commands = [`cd ${webDir}`, 'pwd', 'unzip -o dist.zip && rm -f dist.zip'];
  const promises = [];
  for (let i = 0; i < commands.length; i += 1) {
    promises.push(runCommand(commands[i], webDir));
  }
  Promise.all(promises)
    .then(() => {
      successLog(' 解压成功');
      console.log('（6）开始删除本地dist.zip');
      deleteLocalZip(config);
    })
    .catch(err => {
      errorLog(' 文件解压失败', err);
      process.exit(0);
    });
}

// 删除本地dist.zip包
function deleteLocalZip(config) {
  const { projectName, name } = config;
  fs.unlink(`${projectDir}/dist.zip`, err => {
    if (err) {
      errorLog(' 本地dist.zip删除失败', err);
    }
    successLog(' 本地dist.zip删除成功\n');
    successLog(`\n 恭喜您，${underlineLog(projectName)}项目${underlineLog(name)}部署成功了^_^\n`);
    process.exit(0);
  });
}

module.exports = deploy;
复制代码

2.脚手架实践

问题：
上面的方案已经能够完成一个项目的自动化部署，可是再有一个新的项目要接入自动化部署，是否是又得把整个文件拷贝过去，是否是很是麻烦？

所以能够将自动化部署作成一个脚手架fe-deploy-cli，支持生成部署配置模板、脚本部署，只需一条命令便可部署到对应环境中。

与脚手架相关的npm包：

  • commander：node.js命令行界面的完整解决方案
  • download-git-repo：git仓库代码下载
  • ora：显示加载中的效果
  • inquirer：用户与命令交互的工具
  • child_process：npm内置模块，用于执行package.json中的打包script

2.1.初始化

初始化须要在github上新建一个部署配置git仓库，执行deploy init经过download-git-repo从git上拉取配置模板。

// init.js

#!/usr/bin/env node
const fs = require('fs');
const path = require('path');
const download = require('download-git-repo');
const ora = require('ora');
const { successLog, infoLog, errorLog } = require('../utils/index');
let tmp = 'deploy';
const deployPath = path.join(process.cwd(), './deploy');
const deployConfigPath = `${deployPath}/deploy.config.js`;
const deployGit = 'dadaiwei/fe-deploy-cli-template';

// 检查部署目录及部署配置文件是否存在
const checkDeployExists = () => {
    if (fs.existsSync(deployPath) && fs.existsSync(deployConfigPath)) {
        infoLog('deploy目录下的deploy.config.js配置文件已经存在，请勿从新下载');
        process.exit(1);
        return;
    }
    downloadAndGenerate(deployGit);
};

// 下载部署脚本配置
const downloadAndGenerate = templateUrl => {
    const spinner = ora('开始生成部署模板');
    spinner.start();
    download(templateUrl, tmp, { clone: false }, err => {
        if (err) {
            console.log();
            errorLog(err);
            process.exit(1);
        }
        spinner.stop();
        successLog('模板下载成功，模板位置：deploy/deploy.config.js');
        infoLog('请配置deploy目录下的deploy.config.js配置文件');
        process.exit(0);
    });
};

module.exports = () => {
    checkDeployExists();
};
复制代码

2.2.设定配置

经过修改deploy.config.js，设定dev（测试环境）和prod（线上环境）的配置。

// deploy.config.js

module.exports = {
  privateKey: '', // 本地私钥地址，位置通常在C:/Users/xxx/.ssh/id_rsa，非必填，有私钥则配置
  passphrase: '', // 本地私钥密码，非必填，有私钥则配置
  projectName: '', // 项目名称
  dev: { // 测试环境
    name: '测试环境',
    script: "npm run build", // 测试环境打包脚本
    host: '', // 测试服务器地址
    port: 22, // ssh port，通常默认22
    username: '', // 登陆服务器用户名
    password: '', // 登陆服务器密码
    distPath: 'dist',  // 本地打包dist目录
    webDir: '',  // // 测试环境服务器地址
  },
  prod: {  // 线上环境
    name: '线上环境',
    script: "npm run build", // 线上环境打包脚本
    host: '', // 线上服务器地址
    port: 22, // ssh port，通常默认22
    username: '', // 登陆服务器用户名
    password: '', // 登陆服务器密码
    distPath: 'dist',  // 本地打包dist目录
    webDir: '' // 线上环境web目录
  }
  // 再还有多余的环境按照这个格式写便可
}
复制代码

2.3.注册部署命令

注册部署命令就是从deploy.config.js中读取dev和prod配置，而后经过program.command注册dev和prod command，运行deploy dev或者deploy prod即进入1.3节的部署流程。

// 部署流程
function deploy() {
    // 检测部署配置是否合理
    const deployConfigs = checkDeployConfig(deployConfigPath);
    if (!deployConfigs) {
        process.exit(1);
    }

    // 注册部署命令，注册后支持deploy dev和deploy prod
    deployConfigs.forEach(config => {
        const { command, projectName, name } = config;
        program
            .command(`${command}`)
            .description(`${underlineLog(projectName)}项目${underlineLog(name)}部署`)
            .action(() => {
                inquirer.prompt([
                    {
                        type: 'confirm',
                        message: `${underlineLog(projectName)}项目是否部署到${underlineLog(name)}？`,
                        name: 'sure'
                    }
                ]).then(answers => {
                    const { sure } = answers;
                    if (!sure) {
                        process.exit(1);
                    }
                    if (sure) {
                        const deploy = require('../lib/deploy');
                        deploy(config);
                    }
                });

            });
    });
}
复制代码

3.使用指南

前提条件：能经过ssh连上服务器便可。

适用对象：目前还在采用手工部署又指望快速实现轻量化部署的小团队或者我的项目，毕竟像阿里这种大公司都有完善的前端部署平台。

使用指南：github.com/dadaiwei/fe…

3.1.安装

npm i fe-deploy-cli -g
复制代码

查看版本，安装成功

版本

3.2.初始化部署模板

deploy init
复制代码

初始化部署模板

在当前项目下生成了deploy.config.js

生成deploy.config.js

3.3.修改部署配置

部署配置文件位于deploy文件夹下的deploy.config.js, 通常包含dev（测试环境）和prod（线上环境）两个配置，再有多余的环境配置形式与之相似，只有一个环境的能够删除另外一个多余的配置（好比只有prod线上环境，请删除dev测试环境配置）。

具体配置信息请参考配置文件注释：

module.exports = {
  privateKey: '', // 本地私钥地址，位置通常在C:/Users/xxx/.ssh/id_rsa，非必填，有私钥则配置
  passphrase: '', // 本地私钥密码，非必填，有私钥则配置
  projectName: 'hivue', // 项目名称
  dev: { // 测试环境
    name: '测试环境',
    script: "npm run build-dev", // 测试环境打包脚本
    host: '10.240.176.99', // 测试服务器地址
    port: 22, // ssh port，通常默认22
    username: 'root', // 登陆服务器用户名
    password: '123456', // 登陆服务器密码
    distPath: 'dist',  // 本地打包dist目录
    webDir: '/var/www/html/dev/hivue',  // // 测试环境服务器地址
  },
  prod: {  // 线上环境
    name: '线上环境',
    script: "npm run build", // 线上环境打包脚本
    host: '10.240.176.99', // 线上服务器地址
    port: 22, // ssh port，通常默认22
    username: 'root', // 登陆服务器用户名
    password: '123456', // 登陆服务器密码
    distPath: 'dist',  // 本地打包dist目录
    webDir: '/var/www/html/prod/hivue' // 线上环境web目录
  }
  // 再还有多余的环境按照这个格式写便可
}
复制代码

3.4.查看部署命令（该步可省略）

配置好deploy.config.js，运行

deploy --help
复制代码

查看部署命令

查看部署命令

3.5.测试环境部署

测试环境部署采用的是dev的配置

deploy dev
复制代码

先有一个确认，确认后进入部署流程，脚本自动完成6步操做后，恭喜您，部署成功！！！

测试环境部署

3.5.线上环境部署

线上环境部署采用的是prod的配置

deploy prod
复制代码

部署流程和测试环境部署相同：

线上环境部署

4.优化（番外篇）

上面已经实现了脚手架自动化部署，评论区看到有一个老哥的评论：

评论

查了下ssh.putDirectory支持上传目录，因而针对以前的部署流程和代码进行了优化，去除了archiver打包zip、上传zip、解压zip的过程，部署核心代码deploy.js采用async await替换Promise优化了下。

4.1.部署流程优化

部署流程优化为：

部署脚本优化

流程以下：

  • 1.读取配置文件，包含服务器host、port、web目录及本地目录等信息，生成dev、prod command。
  • 2.本地打包，npm run build生成dist包。
  • 3.链接服务器，node-ssh读取配置链接服务器。
  • 4.清空远端web目录，使用ssh.execCommand执行cd xxx和rm -rf *命令。
  • 5.上传dist目录，使用ssh.putDirectory直接上传dist到web目录。

核心代码以前采用Promise写法，优化为采用async await方式：

// deploy.js

const path = require('path');
const childProcess = require('child_process');
const node_ssh = require('node-ssh');
const { successLog, errorLog, underlineLog } = require('../utils/index');
const projectDir = process.cwd();

let ssh = new node_ssh(); // 生成ssh实例

// 部署流程入口
async function deploy(config) {
  const { script, webDir, distPath, projectName, name } = config;
  execBuild(script);
  await connectSSH(config);
  await clearOldFile(config.webDir);
  await uploadDirectory(distPath, webDir);
  successLog(`\n 恭喜您，${underlineLog(projectName)}项目${underlineLog(name)}部署成功了^_^\n`);
  process.exit(0);
}

// 第一步，执行打包脚本
function execBuild(script) {
  try {
    console.log(`\n（1）${script}`);
    childProcess.execSync(`${script}`);
    successLog(' 打包成功');
  } catch (err) {
    errorLog(err);
    process.exit(1);
  }
}

// 第二步，链接SSH
async function connectSSH(config) {
  const { host, port, username, password, privateKey, passphrase, distPath } = config;
  const sshConfig = {
    host,
    port,
    username,
    password,
    privateKey,
    passphrase
  };
  try {
    console.log(`（2）链接${underlineLog(host)}`);
    await ssh.connect(sshConfig);
    successLog(' SSH链接成功');
  } catch (err) {
    errorLog(`  链接失败 ${err}`);
    process.exit(1);
  }
}

// 运行命令
async function runCommand(command, webDir) {
  await ssh.execCommand(command, { cwd: webDir });
}

// 第三步，清空远端目录
async function clearOldFile(webDir) {
  try {
    console.log('（3）清空远端目录');
    await runCommand(`cd ${webDir}`, webDir);
    await runCommand(`rm -rf *`, webDir);
    successLog(' 远端目录清空成功');
  } catch (err) {
    errorLog(`  远端目录清空失败 ${err}`);
    process.exit(1);
  }
}

// 第四步，上传文件夹
async function uploadDirectory(distPath, webDir) {
  try {
    console.log(`(4)上传文件到${underlineLog(webDir)}`);
    await ssh.putDirectory(path.resolve(projectDir, distPath), webDir, {
      recursive: true,
      concurrency: 10,
    });
    successLog(' 文件上传成功');
  } catch (err) {
    errorLog(`  文件传输异常 ${err}`);
    process.exit(1);
  }
}

module.exports = deploy;
复制代码

脚手架初始化、设定配置、注册部署命令及使用指南与以前版本保持一致。
测试环境和部署环境打包流程打印信息有所变化。

4.2.测试环境部署

测试环境部署采用的是dev的配置。

deploy dev
复制代码

去除压缩zip的过程，操做步骤变成4步，恭喜您，部署成功！！！

测试环境部署

4.3.线上环境部署

线上环境部署采用的是prod的配置。

deploy prod
复制代码

线上环境部署与测试环境流程相同：

正式环境部署

结语

以上就是博主关于前端轻量化部署脚手架的一点小实践，以为有收获的能够关注一波，点赞一波，下载一波，使用一波，码字不易，万分感谢。

感谢LoneYin同窗的建议，多交流沟通，才会有更好的idea，才能共同进步。

git地址：github.com/dadaiwei/fe… (欢迎star，感谢感谢)

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程