前端无需Jenkins，也能自动部署

脚本部署

背景

Jenkins 出了点问题，并且每次打包时间过久。这段时间代码每次都没有及时更新到测试环境，致使测试测出了各类问题。并且经过 Xshell 去更改代码，比较繁琐，总容易遗忘。（特别是快下班的时候）

既然咱们的前端环境包含了 node 为何不直接经过 node 实现上传打包后的代码呢。

实现

1. 引入 node-ssh
2. 创建链接
3. 复制文件夹
4. 关闭链接

基础几步，基本没有太大难度。 node-ssh 的 README 基本上就能够实现啦。

/** * @file: deploy.js * @author: duanjl * @date: 2019/8/6 * @description: 经过node-ssh提交build后的代码 * */
// eslint-disable-next-line
const NodeSSH = require('node-ssh');
// const open = require('open'); // 能够用来打开浏览器
const ssh = new NodeSSH();
const localDir = './build';
const remoteDir = '/opt/front-end';
const removeCommand = 'rm -rf ./build';
const host = 'localhost';
const password: '****',

// 新建链接
ssh.connect({
  host,
  username: 'front',
  port: 22,
  password,
	privateKey: '/home/.ssh/***',
})
.then(() => {
	 // 删除原目录
  ssh.execCommand(removeCommand, { cwd: remoteDir }).then((result) => {
		// 能够经过返回值，作一些简单的判断，来实现某些分支流程
    console.log(`STDOUT: ${result.stdout}`);
    console.log(`STDERR: ${result.stderr}`);
		// 提交指定目录
    ssh.putDirectory(localDir, `${remoteDir}/build`).then(
      () => {
        console.log('The File thing is done');
        ssh.dispose();
				// open(`http://${host}`, { app: ['chrome'] });
      },
      (error) => {
        console.log("Something's wrong");
        console.log(error);
        ssh.dispose();
      },
    );
  });
});
复制代码

这里，我删除原目录的时候，是在 build 目录的父级目录下，指定删除 build 目录。防止我哪天不当心将远端目录指定到了某个根目录....

借助 open 包，咱们能够在传输完成以后，自动打开浏览器。

more

若是咱们考虑的更多一点，提交到多个服务器呢。

/** * @file: deploy.js * @author: duanjl * @date: 2019/8/6 * @description: 经过node-ssh提交build后的代码 * */
// eslint-disable-next-line
const NodeSSH = require('node-ssh');
// const open = require('open'); // 能够用来打开浏览器
const ssh = new NodeSSH();
const localDir = './build';
const remoteDir = '/opt/front-end';
const removeCommand = 'rm -rf ./build';

const hostWithPasswordArr = [
  {
    host: 'localhost',
    password: '****',
  },
];

// 遍历多个数组
hostWithPasswordArr.forEach((hostWithPassword) => {
  const { host, password } = hostWithPassword;
  ssh.connect({
    host,
    username: 'root',
    port: 22,
    password,
  }).then(() => {
    ssh.execCommand(removeCommand, { cwd: remoteDir }).then((result) => {
      console.log(`STDOUT: ${result.stdout}`);
      console.log(`STDERR: ${result.stderr}`);
      ssh.putDirectory(localDir, `${remoteDir}/build`).then(
        () => {
          console.log('The File thing is done');
          ssh.dispose();
        },
        (error) => {
          console.log("Something's wrong");
          console.log(error);
          ssh.dispose();
        },
      );
    });
  });
});
复制代码

经过数组遍历，咱们就能够实现提交到多个服务器了。不过必定要记得关闭链接哦。

使用脚本

最后一步，就是使用脚本。在 package.json 中， scripts 中加上一条。

"deploy": "npm run build && node ./deploy.js",
复制代码

再打包完以后，执行部署的操做。

为何不直接复写到build命令呢？ 由于常常会须要打各类环境的包，多是改一个url，多是去掉某个提示，多是隐藏一些菜单，知足在不一样环境下的需求。这种代码更改，并不该该出如今测试服务器上。

能不能在git提交后，就自动打包并部署呢？ 借助 husky ，应该能够实如今提交代码后部署至远端。

提示

由于文件中包含有服务器密码等敏感数据，最好不要上传到 gi t哦~