前端工程化，可视化打包上线工具

为了解决

1.每次都是开发本地手动打包，如果请假无法打包 2.项目目录多，目录名称长得像，人工上传可能出错 3.项目的非开发人员过度依赖开发不可以自己部署项目的问题。

希望实现服务器上自动拉取对应项目对应分支，自动化打包并分发部署到对应的环境。

目前只在本地实现了 前端页面展示 后台接口获取 命令脚本简单编写 还需要更多完善和后端配合！！！！

页面样式如下：

后端接口：

// 打包
app.post('/build', (req, res) => {
    let result = req.body
    if (result.user == 'lcj') {
        //执行打包脚本文件 process.exec 接收执行文件路径和3个参数[项目名称、打包环境、分支名称]，并将控制台输出日志输出保存到test.txt文件
        const childProcess = process.exec('sh /Users/lcj/lcj_workspace/test.sh lcj-build-test dev master >test.txt')
        return res.json({ code: 200, message: '接口成功' })
    } else {
        return res.json({ code: 201, message: '用户名有误！' })
    }

})
// 读取信息
app.post('/readMessage',(req,res)=>{
    try {
        //读取打包接口输出的test.txt文件
        const data = fs.readFileSync('/Users/lcj/lcj_workspace/build/test.txt', 'utf8')
        const isFail = data.indexOf('构建失败') >= 0 
        const isSuc = data.indexOf('构建成功') >= 0 
        let status = 'doing'
        if(isFail) {
            status = 'fail'
        }else if(isSuc){
            status = 'suc'
        }
        return res.json({ code: 200, message: '接口成功', status: status, data: data})
        console.log(data)
      } catch (err) {
        console.error(err)
      }
})
// 回滚
app.post('/rollback', (req, res) => {
    //执行打包脚本文件
    const childProcess = process.exec('sh /Users/lcj/lcj_workspace/rollback.sh')
    return res.json({ code: 200, message: '接口成功' })
})

脚本命令--打包

#!/bin/bash

history
cd /Users/lcj/lcj_workspace/lcj-build-test
echo "进入项目目录成功"

check_results=`git checkout $3`
if [ "$check_results" = "" ]
then
  echo "无当前 $3 分支，切换分支失败，构建失败"
  exit
else
  echo "切换分支成功"
fi


git pull origin "$3"
echo "更新代码成功"

npm install
echo "下载依赖包成功"

npm run build
echo "打包成功"

if [ "$2" = "prod" ]
then
  ...
elif [ "$2" = "dev" ]
then
  ...
elif [ "$2" = "test" ]
then
  cp -r /Users/lcj/lcj_workspace/lcj-build-test-mubiao-test/* /Users/lcj/lcj_workspace/lcj-build-test-mubiao-test-copy
  rm -rf /Users/lcj/lcj_workspace/lcj-build-test-mubiao-test
  mkdir /Users/lcj/lcj_workspace/lcj-build-test-mubiao-test
  cp -r /Users/lcj/lcj_workspace/lcj-build-test/dist/* /Users/lcj/lcj_workspace/lcj-build-test-mubiao-test
fi

echo "构建成功"

脚本命令--回滚

cp -r /Users/lcj/lcj_workspace/lcj-build-test-mubiao-copy/* /Users/lcj/lcj_workspace/lcj-build-test-mubiao