本文主要介绍在 vitepress 项目中使用 Node.js 的 SSH2 实现前端项目自动化打包发布，该方法适用于绝大多数前端项目。

前排提示：

操作系统：Windows 10

编辑器：VS code

官网文档：vite，vitepress，Node.js，ssh2（官方文档是最好的资料）

使用版本：vite：2.0.2，vitepress: 0.12.2，Node.js：12.16.2，ssh2: 0.8.9

背景

我在工作之余使用 vite 和 vitepress 搭建了文档系统，一方面是体验这两个新技术，另一方面是帮助团队内部整理技术文档。在实际推广中，由于后端的同事不熟悉前端项目打包、发布和部署的流程，于是就写了这个自动化的脚本。

思路

大致思路分为三步：

打包项目：将打包的文件添加到指定压缩包中；
上传项目：连接服务器，并将压缩包上传到指定目录中；
部署项目：备份原项目文件，并将压缩包解压到原项目目录中。

实现

准备

请在项目 根目录 下创建 workflow.js （这里假设你已经建好了需要自动化打包、发布和部署的项目）。

安装 ssh2

$ yarn add ssh2 --dev # or npm install ssh2 --save-dev

打包项目

在 workflow.js 文件中添加以下代码。

const ChildProcess = require('child_process');

// 打包项目 && 将 ./docs/.vitepress/dist 文件夹添加到 assets.tar.gz 压缩包里
let buildProject = ChildProcess.exec(
  'yarn docs:build && tar zcvf assets.tar.gz ./docs/.vitepress/dist',
  () => {}
);
buildProject.stdout.pipe(process.stdout);
buildProject.on('exit', () => {
  // TODO: upload
});

此时在终端中运行该脚本后，会在项目的根目录下生成名为 assets.tar.gz 的压缩包文件，别忘了在 .gitignore 文件中添加忽略 assets.tar.gz 文件。

$ node workflow.js

提示：如果未成功，请检查路径是否正确；或者在本地终端中依次执行上面的 shell 命令，排查一下是哪一步出的问题。

上传项目

在 workflow.js 文件中添加以下代码（注释中 line: number 表示在 number 行新增代码，未注明 line: number 表示修改上一步的代码或者在末尾新增代码）。

请修改 服务器连接配置，并且服务器文件路径需要根据自身情况进行修改。

// 引入 ssh2 （line: 2）
const Ssh = require('ssh2');

// 打包完成后进行上传文件（找到上一步的 TODO 注释）
buildProject.on('exit', () => {
  uploadProject();
});

let sshClient = new Ssh.Client();
// 利用 sftp 方法上传文件
function uploadProject() {
  sshClient
    .on('ready', () => {
      sshClient.sftp((err, sftp) => {
        sftp.fastPut(
          './assets.tar.gz', // 本地 assets.tar.gz 文件路径
          '/www/wwwroot/assets.tar.gz', // 服务器 assets.tar.gz 文件路径
          {},
          (err, result) => {
            // TODO: deploy
          }
        );
      });
    })
    .connect({
      host: '0.0.0.0', // 服务器 host
      port: 22,  // 服务器 port
      username: 'root', // 服务器用户名
      password: 'root' // 服务器密码
    });
}

此时在终端中运行该脚本后，服务器 www/wwwroot 目录会出现 assets.tar.gz 的压缩包文件。

$ node workflow.js

提示：如果未成功，请检查路径和服务器连接配置是否正确。

部署项目

切记 rm -rf 后一定要你要删除的对象，否则服务器就没了。

这里的 shell 脚本还有可以优化的空间，并且该方法只是正常流程，出错后就需要手动处理了。

// 在上一步 uploadProject() 中找到 TODO: deploy，并修改
(err, result) => {
  deployProject(sshClient);
}

// 利用 shell 方法部署项目
function deployProject(sshClient) {
  sshClient.shell((err, stream) => {
    stream
      .end(
        // cd 服务器存放 assets.tar.gz 文件的目录
        // 将原项目 documents 文件夹，移动到 bak 文件夹中，并打上时间戳
        // 解压 assets.tar.gz
        // 将解压后的文件，移动到原项目 documents 文件夹中（这里的路径根据实际情况调整）
        // 删除 压缩包 assets.tar.gz
        // 退出
        `
          cd /www/wwwroot/
          mv documents bak/documents.$(date "+%Y%m%d%H%M%S")
          tar zxvf assets.tar.gz
          mv docs/.vitepress/dist documents
          rm -rf assets.tar.gz
          exit
        `
      )
      .on('data', (data) => {
        // 输出部署时的信息
        console.log('data: ', data.toString());
      })
      .on('close', () => {
        console.log('close');
        sshClient.end();
      });
  });
}

提示：如果未成功，请先看本地终端输出的信息，根据提示排查问题；或者在 服务器 终端中依次执行上面的 shell 命令，排查一下是哪一步出的问题。

强迫症必做

在 package.json 添加自动化打包、发布和部署脚本。

"scripts": {
  // ...
  "docs:auto": "node workflow.js",
  // ...
}

以后只需在本地终端执行以下命令就可以实现自动化打包、发布和部署脚本了。

$ yarn docs:auto

基于 Node.js 的 ssh2 实现前端项目自动化打包、发布和部署

背景

思路

实现

准备

打包项目

上传项目

部署项目

强迫症必做

HAVE FUN : )