发布平台页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>发布平台</title>
  </head>
  <style>
    body {
      padding-left: 60px;
    }
    .obj-container {
      display: flex;
      align-items: center;
      height: 40px;
      margin-bottom: 15px;
      user-select: none;
    }
    .obj-name {
      width: 100px;
      height: 40px;
      font-size: 20px;
      font-weight: bold;
      color: #333333;
      line-height: 40px;
    }
    .obj-btn {
      width: 50px;
      height: 20px;
      border-radius: 2px;
      background: #0091ff;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      cursor: pointer;
    }
  </style>
  <body>
    <!-- 标题显示 -->
    <h1>请点击发布按钮进行发布</h1>
    <!-- 发布平台主要内容 -->
    <div id="container"></div>
  </body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  window.onload = function () {
    // 获取到容器
    const container = document.getElementById("container");
    // 需要发布的应用列表
    const dirList = ["main", "react15", "react16", "vue2", "vue3"];
    let html = "";
    dirList.forEach((item) => {
      html += `
        <div class="obj-container">
          <div class="obj-name">${item}</div>
          <div class="obj-btn" id="${item}">发布</div>
        </div>
      `;
    });
    container.innerHTML = html;
    // 添加发布的功能
    container.onclick = function (e) {
      if (e.target.className !== "obj-btn") {
        return;
      }
      $.get(`http://localhost:3001/start?name=${e.target.id}`);
    };
  };
</script>

创建部署平台服务

npm install express express-generator -g
express -e server

解决跨域

// 设置允许跨域
app.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

根据版本号创建目录

router.get('/start', function (req, res, next) {
  const name = req.query.name
  // console.log(versionDir)
  // 确认要更新的版本号, 每一个应用独立一个文件管理版本
  // 创建一个文件，默认的版本号
  // 创建当前应用的路径
  const currentUrl = path.join(versionDir, name)
  let newVersion = ''
  changeVersion()
  // 处理版本号
  function changeVersion() {
    // 如果读取当前应用版本文件错误，就创建一个文件，写入我们的版本信息
    try {
      const originVersion = fs.readFileSync(currentUrl).toString().replace(/\n/g, '')
      // console.log('originVersion:', originVersion)
      newVersion = originVersion.replace(/\.(\d+)$/, (a, b) => `.${+b + 1}`)
      // console.log('newVersion:', newVersion)
      fs.writeFileSync(currentUrl, newVersion)
    } catch (error) {
      fs.writeFileSync(currentUrl, initVersion)
    }
  }
}

打包构建流程

router.get('/start', function (req, res, next) {
  const name = req.query.name
  // console.log(versionDir)
  // 确认要更新的版本号, 每一个应用独立一个文件管理版本
  // 创建一个文件，默认的版本号
  // 创建当前应用的路径
  const currentUrl = path.join(versionDir, name)
  let newVersion = ''
  changeVersion()
  startBuild()
  // 处理版本号
  function changeVersion() {
    // 如果读取当前应用版本文件错误，就创建一个文件，写入我们的版本信息
    try {
      const originVersion = fs.readFileSync(currentUrl).toString().replace(/\n/g, '')
      // console.log('originVersion:', originVersion)
      newVersion = originVersion.replace(/\.(\d+)$/, (a, b) => `.${+b + 1}`)
      // console.log('newVersion:', newVersion)
      fs.writeFileSync(currentUrl, newVersion)
    } catch (error) {
      fs.writeFileSync(currentUrl, initVersion)
    }
  }
  // 构建 打包 发布
  function startBuild() {
    const originPath = path.join(__dirname, '../../../', name) // 项目路径
    const originDist = path.join(originPath, 'dist') // 项目打包后的产物路径
    const bagPath = path.join(__dirname, '../bag')  // 存放打包后的产物
    // 通过运行打包命令来创建对应的打包产物
    try {
      // 创建bag目录
      execSync(`mkdir ${bagPath}`)
      // 清空当前项目下所有资源
      execSync(`rm -rf ${bagPath}/${name}`)
      // 创建项目目录
      execSync(`mkdir ${bagPath}/${name}`)
      // 进入应用目录进行打包
      execSync(`cd ${originPath} && npm i && npm run build`)
      // 创建版本目录
      execSync(`cd ${bagPath} && mkdir -p ./${name}/${newVersion}`);;
      // mkdir(`./${bagPath}/${name}/${newVersion}`);
      // 将打包后的产物，存入bag文件夹对应版本目录下
      const lastDist = path.join(bagPath, `./${name}/${newVersion}`)
      execSync(`mv ${originDist}/* ${lastDist}`)
    } catch (e) {
      console.log(e);
    }
  }
  res.send({
    version: newVersion,
  })
});

在windows下使用execSync创建目录报错，可以试试下面这个方法 ```javascript var fs = require(‘fs’); var path = require(‘path’);

// 创建多级目录 exports.mkdirSync = function (dirPath) { if (dirPath == null || dirPath == “”) return; dirPath = exports.isAbsolute(dirPath) ? path.normalize(dirPath) : path.join(process.cwd(), dirPath); if (fs.existsSync(dirPath)) return;

var arr = dirPath.split(path.sep); var index = arr.length - 1; var tempStr = arr[index]; while (tempStr == “” && arr.length > 0) { index—; tempStr = arr[index]; } if (tempStr == “”) return; var newPath = dirPath.substring(0, dirPath.length - tempStr.length - 1); if (!fs.existsSync(newPath)) exports.mkdirSync(newPath); fs.mkdirSync(dirPath); }

exports.isAbsolute = function (filePath) { filePath = path.normalize(filePath); if (filePath.substring(0, 1) == “/“) return true; if (filePath.search(/[\w]+:/) == 0) return true; return false; }; ```

前端工程化

7-3~7 应用部署-创建自动部署平台

发布平台页面

创建部署平台服务

解决跨域

根据版本号创建目录

打包构建流程