作为前端leader，如何搭建属于我们公司自己的流水线自动化部署系统(node+express)

背景：自动化部署系统主要可以集成到公司内部的管理系统中去，比如公司有多个项目，移动端H5，大屏网站，门户网站等...每次发布或者迭代都需要前端同事打包然后在交给运维或者后端同事放到服务器上进行部署

，如果有一个项目多个同事合作完成 还要走git合并流程，所以我们的目标就是不让前端进行打包，开发完成代码后 直接提交就行，通过点击管理后台的某个按钮触发某个平台的前端项目自动更新，同时也不需要

在交付给运维或者后端，便携式与流程管理，实现自动化部署(这里只说自己实现的,当然你们也可以去接入腾讯或阿里的自动化流水部署系统，但是某些环境下只能使用自己的如何去实现)

 这里做一个简单的版本和实现代码，可以自己扩展回滚本版，本版记录等，发布人员落实在责任人等...

1.创建一个干净的express项目，写一个空接口吧下面代码放进去，调用就执行

const shell = require('shelljs');
var fs = require('fs');
var path = require('path');
const { exec } = require('node:child_process');

// 1.切换到服务器中储存的项目地址目录
const project_path = '/www/wwwroot/menghangl/public/test';
shell.cd(project_path);

// 2.删除打包的旧前端dist文件
function deleteDir(url) {
  if (fs.existsSync(url)) {
    fs.readdirSync(url).forEach(function(file, index) {
      var curPath = path.join(url, file);
      if (fs.statSync(curPath).isDirectory()) {
        // 如果是文件夹，则递归调用deleteDir函数
        deleteDir(curPath);
      } else {
        // 如果是文件，则删除文件
        fs.unlinkSync(curPath);
      }
    });
    // 删除文件夹
    fs.rmdirSync(url);
  } else {
    console.log("给定的路径不存在!");
  }
};
deleteDir('/www/wwwroot/menghangl/public/test/dist');

// 3.执行打包命令
const command = 'npm run build';
// 打包展示的进度
let schedule = 0; 
// 打包成功回调
let build = exec(command, (error, stdout, stderr) => {
  if (error) {
    console.error(`exec error打包失败: ${error}`);
    return;
  }
  schedule = 0;
  console.log('打包成功，打包结束在这里结束接口请求，或者断开长连接')
});

// 4打包进度实时显示 并输出打包步骤
build.stdout.on('data', function(data) {
 if(schedule!==100){
     console.log(`Program output 【${schedule}%】`,data)
     schedule += 20;
 } else {
     console.log(data)
 }
});

 

2.服务端通过git获取最新仓库内容

const shell = require('shelljs');
var fs = require('fs');
var path = require('path');
const { exec } = require('node:child_process');
//判定git命令是否可用
if (!shell.which('git')) {
    //向命令行打印git命令不可用的提示信息
    shell.echo('Sorry, this script requires git');
    //退出当前进程
    shell.exit(1);
} else {
    console.log('可以使用')
// 切换到要拉取的文件夹目录
    shell.cd('/www/wwwroot/menghangl/public/test_git');
// 远程仓库的git命令与地址
    const command = 'git clone https://gitee.com/martins_coachman/blog-vue3-b.git';
    let build = exec(command, (error, stdout, stderr) => {
     if (error) {
         console.error(`拉取失败: ${error}`);
        return;
     }
     console.log('拉取成功')
    });
}

 

3.优化与部署流程建议

上面两部分就是核心代码

1.首先先要自己部署一个node服务到服务器

2.写一个接口吧第一步骤放进去 在打包成功的地方结束请求，也可以用长连接，通过开启和关闭开实现

并且实时显示打包进度和状态

3.如果要使用git，自动同步代码，就先拉取等待拉取完成回调后，在执行打包逻辑代码

4.注意打包的时候会占用较多的cpu与内存，所以建议一个一个任务去执行，避开流量高峰期

5.解决这个的方法还有一个，就是在本地打包成功后直接git提交代码包括打包后的文件，服务器直接拉取最新代码即可

6.另外由于打包是在服务端进行，所以有时候我们开发功能添加了新的npm库 需要更新 node_modules包，建议先执行cnpm i 在去执行npm run build

7.最后可能node_modules会变的比较大 非常占用服务器硬盘空间 所以建议每次打包完成后删除 node_modules 包

 

这样就可以 用列表选择的方式在后台管理系统进行配置 动态传入不同的项目地址，远程仓库地址，执行命令等，通过后台管理系统像表单一样填写然后执行打包完成！