前端無需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哦~