测试环境一键发布

最新推荐文章于 2023-09-21 16:32:01 发布
最新推荐文章于 2023-09-21 16:32:01 发布
阅读量684 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40650646/article/details/131010748
版权

背景

目前公司项目发布测试环境不够自动化，每次需要手动打包并且手动更新，影响开发效率

流程图

 

而且因为是本地手动发布，容易失误造成一些不必要的麻烦：

  • 远端代码有更新，忘记拉取代码

  • 快速发布，本地代码忘了提交，导致远端代码缺失

  • 误将本地的一些测试代码发布

...

因此，如果能够将操作脚本化，不仅可以提高开发效率，同时也能减少失误造成的影响。

一键发布

使用

  1. 先将deploy.js拷贝到需要发布项目的根目录

      
const { execSync } = require('child_process')
const fs = require('fs');
const readline = require('readline');
const packageJson = require('./package.json')
const Axios = require('axios').default;

const config = {
  container: 'simulated-trade-h5-test-container', // 容器名称
  buildScript: process.env.DEPLOY_ENV == 'prod' ? 'npm run build:pro' : 'npm run build:test', // 打包命令
  apiUrl: 'http://10.156.160.11:9000/api', // portainer接口地址
  env: process.env.DEPLOY_ENV || 'test', // ['local', 'test', 'prod'] 设置为local可通过本地代码进行部署,
}

const axios = Axios.create({
  baseURL: config.apiUrl,
})


// 远程仓库地址
const url = execSync('git config --get remote.origin.url')
const dirname = __dirname.split(/[\\/]/)
// 当前文件夹名称
const folder = dirname.slice(-1).toString()
// 当前分支
const branch = execSync("git branch --show-current")

// 创建副本仓库
process.chdir('../')
if (!fs.existsSync(`.deploy`)) {
  fs.mkdirSync('.deploy')
}
process.chdir('./.deploy')
if (!fs.existsSync(folder)) {
  execSync(`git clone ${url} ${folder}`, {stdio: 'inherit'})
}

// 创建缓存文件
if (!fs.existsSync(`.cache`)) {
  fs.writeFileSync('.cache', '')
}
const cacheFile = fs.readFileSync('.cache').toString()
const cache = {}
cacheFile.split('\n').forEach(i => {
  const arr = i.split('=')
  cache[arr[0]] = arr[1]
})


if (config.env == 'local') {
  console.log('本地仓库环境');
  process.chdir(`../${folder}`)
} else {
  console.log('远程仓库环境');
  process.chdir(folder)
  execSync(`git fetch --all && git reset --hard origin/${branch}`, {stdio: 'inherit'})
  console.log('安装依赖...');
  execSync('npm i', {stdio: 'inherit'})
}




axios.interceptors.request.use(config => {
  if (cache.token) {
    config.headers.Authorization = `Bearer ${cache.token}`
  }
  return config
})

// 检查token
const checkToken = async () => {
  const token = cache.token
  if (!token) {
    return false
  }
  try {
    await axios.get('/endpoints/3/docker/containers/json?all=1')
  } catch {
    return false
  }
  return true
}



// 发布
const deploy = async () => {
  try {
    const hasToken = await checkToken()
    if (!hasToken) {
      // 读取用户输入
      const rl = readline.createInterface({
        input: process.stdin,
        output: process.stdout
      });
      const q = (str) => new Promise(resolve => {
        rl.question(str, res => {
          resolve(res)
        })
      })
      let username = ''
      let password = ''
      let autoLogin = false
      console.log('登录portainer...');
      if (cache.username && cache.password) {
        const r = await q('自动登录(y/n)')
        if (!r || r === 'y') {
          username = cache.username
          password = cache.password
          autoLogin = true
        }
      }

      if (!autoLogin) {
        username = await q('请输入用户名：')
        password = await q('请输入密码：')
      }

      rl.close()
      
      // 登录portainer
      const { data } = await axios.post('/auth', {
        username,
        password
      })
      cache.token = data.jwt
      const obj = [
        `username=${username}`,
        `password=${password}`,
        `token=${data.jwt}`
      ]
      // 写入缓存
      fs.writeFileSync(`../${config.env == 'local' ? '.deploy/' : ''}.cache`, obj.join('\n'))
    }

    console.log('打包构建...');
    execSync(config.buildScript, {stdio: 'inherit'}) // 打包测试环境，执行命令以实际项目为准

    console.log('获取容器列表...');
    const { data } = await axios.get('/endpoints/3/docker/containers/json?all=1')
    const currentContainer = data.find(i => i.Names.includes(`/${config.container}`))
    if (!currentContainer) {
      console.log('未找到对应容器，请检查容器名称');
      return
    }

    console.log('获取容器配置...');
    const { data: currConfig } = await axios.get(`/endpoints/3/docker/containers/${currentContainer.Id}/json`)

    let imageName = currConfig.Config.Image.split(':')[0] + ":" + packageJson.version
    if (config.env == 'prod') {
      imageName = `harbor.saxofintech.com/online/westmoney/${packageJson.name}:${packageJson.version}` // 生产镜像
    }
    console.log(`镜像名称：${imageName}`);

    // 未自动上传镜像，上传一次
    if (!fs.existsSync(`./dist/dist.tar`)) {
      process.chdir('./dist')
      execSync('tar -cvf dist.tar *')
      console.log('生成压缩文件dist.tar...');
      await new Promise(r => setTimeout(() => r(), 3000))
      console.log('上传镜像...');
      const distTar = fs.readFileSync('./dist.tar')
      await axios.post(`/endpoints/3/docker/build?dockerfile=Dockerfile&t=${imageName}`, distTar, {
        headers: {
          'Content-Type': 'application/x-tar'
        }
      })
    }

    if (config.env == 'prod') {
      console.log('推送镜像...');
      await axios.post(`/endpoints/2/docker/images/${imageName.replace(/\//g, encodeURIComponent('/'))}/push`, {
        imageName,
      }, {
        headers: {
          'X-PortainerAgent-Target': 'wm-vm-h5-sit',
          'X-Registry-Auth': Buffer.from('{"registryId":1}').toString('base64')
        }
      })
      execSync(`echo ${imageName} | clip`),// windows下可用
      console.log('推送完成，已复制镜像名到剪贴板');
      return 
    }

    console.log('暂停当前容器...');
    await axios.post(`/endpoints/3/docker/containers/${currentContainer.Id}/stop`)
    console.log('重命名当前容器为old...');
    await axios.post(`/endpoints/3/docker/containers/${currentContainer.Id}/rename?name=${config.container}-old`)
    const params = {
      ...currConfig.Config,
      Image: imageName,
      HostConfig: currConfig.HostConfig,
      name: config.container,
    }
    // console.log(params);
    console.log('新建容器...');
    const { data: { Id, Portainer } } = await axios.post(`/endpoints/3/docker/containers/create?name=${config.container}`, params)
    console.log('配置容器权限...');
    await axios.put(`/resource_controls/${Portainer.ResourceControl.Id}`, {
      AdministratorsOnly: false,
      Public: false,
      Teams: [1], // 组先默认为1
      Users: []
    })
    console.log('启动容器...');
    await axios.post(`/endpoints/3/docker/containers/${Id}/start`,{})

    console.log('删除old容器...');
    await axios.delete(`/endpoints/3/docker/containers/${currentContainer.Id}?v=1&force=true`)
    console.log('发布完成!');

  } catch (err) {
    console.log(err);
  }
}

deploy()

2､修改容器名称及打包测试环境的命令

...
const config = {
  container: 'simulated-trade-h5-test-container', // 容器名称
  buildScript: process.env.DEPLOY_ENV == 'prod' ? 'npm run build:pro' : 'npm run build:test', // 打包命令
  apiUrl: 'http://10.156.160.11:9000/api', // portainer接口地址
  env: process.env.DEPLOY_ENV || 'test', // ['local', 'test', 'prod'] 设置为local可通过本地代码进行部署,
}

3､执行该js文件即可发布测试环境

node deploy.js

4､也可将执行命令加入npm script中，通过环境变量切换打包模式

// package.json
"scripts": {
    ...
    "deploy": "node deploy.js",
    "deploy:local": "cross-env DEPLOY_ENV=local node deploy.js",
    "deploy:prod": "cross-env DEPLOY_ENV=prod node deploy.js",
    ...
  },

DEPLOY_ENV=local: 打包本地代码发布测试环境

DEPLOY_ENV=test: 拉取远端代码打包测试环境

DEPLOY_ENV=prod: 打包生产并上传镜像（将镜像名发给运维发布）

流程图

 

实现原理

  • 首先需要创建一个单独的环境，防止被本地开发的代码影响。在当前项目的上级目录新建一个.deploy目录，用于发布指定项目。

  • 进到deploy目录拉取项目代码，并切换到当前分支

// 远程仓库地址
const url = execSync('git config --get remote.origin.url')
const dirname = __dirname.split(/[\\/]/)
// 当前文件夹名称
const folder = dirname.slice(-1).toString()
// 当前分支
const branch = execSync("git branch --show-current")

// 创建副本仓库
process.chdir('../')
if (!fs.existsSync(`.deploy`)) {
  fs.mkdirSync('.deploy')
}
process.chdir('./.deploy')
if (!fs.existsSync(folder)) {
  execSync(`git clone ${url} ${folder}`, {stdio: 'inherit'})
}
...
if (config.env == 'local') {
  console.log('本地仓库环境');
  process.chdir(`../${folder}`)
} else {
  console.log('远程仓库环境');
  process.chdir(folder)
  execSync(`git fetch --all && git reset --hard origin/${branch}`, {stdio: 'inherit'})
  console.log('安装依赖...');
  execSync('npm i', {stdio: 'inherit'})
}

  • 登陆portainer, 同时对登录信息进行缓存，将用户名密码及token缓存到.cache文件中

  • const checkToken = async () => {
  const token = cache.token
  if (!token) {
    return false
  }
  try {
    await axios.get('/endpoints/3/docker/containers/json?all=1')
  } catch {
    return false
  }
  return true
}

...
const hasToken = await checkToken()
if (!hasToken) {
  // 读取用户输入
  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
  });
  const q = (str) => new Promise(resolve => {
    rl.question(str, res => {
      resolve(res)
    })
  })
  let username = ''
  let password = ''
  let autoLogin = false
  console.log('登录portainer...');
  if (cache.username && cache.password) {
    const r = await q('自动登录(y/n)')
    if (!r || r === 'y') {
      username = cache.username
      password = cache.password
      autoLogin = true
    }
  }

  if (!autoLogin) {
    username = await q('请输入用户名：')
    password = await q('请输入密码：')
  }

  rl.close()
  
  // 登录portainer
  const { data } = await axios.post('/auth', {
    username,
    password
  })
  cache.token = data.jwt
  const obj = [
    `username=${username}`,
    `password=${password}`,
    `token=${data.jwt}`
  ]
  // 写入缓存
  fs.writeFileSync(`../${config.env == 'local' ? '.deploy/' : ''}.cache`, obj.join('\n'))
}

  • 执行打包

console.log('打包构建...');
execSync(config.buildScript, {stdio: 'inherit'}) // 打包测试环境，执行命令以实际项目为准

  • 调用portainer容器相关接口，完成发布

console.log('获取容器列表...');
const { data } = await axios.get('/endpoints/3/docker/containers/json?all=1')
const currentContainer = data.find(i => i.Names.includes(`/${config.container}`))
if (!currentContainer) {
  console.log('未找到对应容器，请检查容器名称');
  return
}

console.log('获取容器配置...');
const { data: currConfig } = await axios.get(`/endpoints/3/docker/containers/${currentContainer.Id}/json`)

let imageName = currConfig.Config.Image.split(':')[0] + ":" + packageJson.version
if (config.env == 'prod') {
  imageName = `harbor.saxofintech.com/online/westmoney/${packageJson.name}:${packageJson.version}` // 生产镜像
}
console.log(`镜像名称：${imageName}`);

// 未自动上传镜像，上传一次
if (!fs.existsSync(`./dist/dist.tar`)) {
  process.chdir('./dist')
  execSync('tar -cvf dist.tar *')
  console.log('生成压缩文件dist.tar...');
  await new Promise(r => setTimeout(() => r(), 3000))
  console.log('上传镜像...');
  const distTar = fs.readFileSync('./dist.tar')
  await axios.post(`/endpoints/3/docker/build?dockerfile=Dockerfile&t=${imageName}`, distTar, {
    headers: {
      'Content-Type': 'application/x-tar'
    }
  })
}

if (config.env == 'prod') {
  console.log('推送镜像...');
  await axios.post(`/endpoints/2/docker/images/${imageName.replace(/\//g, encodeURIComponent('/'))}/push`, {
    imageName,
  }, {
    headers: {
      'X-PortainerAgent-Target': 'wm-vm-h5-sit',
      'X-Registry-Auth': Buffer.from('{"registryId":1}').toString('base64')
    }
  })
  execSync(`echo ${imageName} | clip`),// windows下可用
  console.log('推送完成，已复制镜像名到剪贴板');
  return 
}

console.log('暂停当前容器...');
await axios.post(`/endpoints/3/docker/containers/${currentContainer.Id}/stop`)
console.log('重命名当前容器为old...');
await axios.post(`/endpoints/3/docker/containers/${currentContainer.Id}/rename?name=${config.container}-old`)
const params = {
  ...currConfig.Config,
  Image: imageName,
  HostConfig: currConfig.HostConfig,
  name: config.container,
}
// console.log(params);
console.log('新建容器...');
const { data: { Id, Portainer } } = await axios.post(`/endpoints/3/docker/containers/create?name=${config.container}`, params)
console.log('配置容器权限...');
await axios.put(`/resource_controls/${Portainer.ResourceControl.Id}`, {
  AdministratorsOnly: false,
  Public: false,
  Teams: [1], // 组先默认为1
  Users: []
})
console.log('启动容器...');
await axios.post(`/endpoints/3/docker/containers/${Id}/start`,{})

console.log('删除old容器...');
await axios.delete(`/endpoints/3/docker/containers/${currentContainer.Id}?v=1&force=true`)
console.log('发布完成!');

Jason_wu86
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
测试环境部署
Danealuo的博客
08-01 1110
这个是我们公司的测试环境部署，我也是小白，学习中，先记录下这一波~ 1.用xshell登录跳板机 ssh 用户名@跳板机地址 2.登录跳板机之后，输入测试机的名称 3.此时用户是test用户，切换到root用户，命令为： sodu -s 这3步可总结为： 通过跳板机登录自己的服务器并切换root用户 ...
Linux 测试环境后台发版流程
beautiful_life123的博客
07-22 730
1. 首先获取到后端开发的jar包和前端的zip包，可以跟开发直接要或者然后问一下地址 2.用Xshell连接服务器，进入项目所在文件夹下的lib目录下，替换项目升级jar包 cd 项目名称/lib rm –rf 项目名称.jar， 移除之前的jar包 上传 项目名称.jar， 上传新的jar包 3.进入项目文件夹下的conf文件夹，替换项目升级前端压缩包 cd 项目名称/conf rm -rf static 上传 static.zip 解压压缩包 unzip static.zip ..
将项目发布至测试环境的方法
Cjx_Flying的博客
08-23 7100
一：后台tomcat项目发布到测试环境（需要进行重启服务） 打开连接服务器工具WinSCP，下载链接如下 ：https://download.csdn.net/download/cjx_flying/11584490 打开之后如下图所示，需要填写的是： 主机名：服务器IP地址... 用户名：xxxxxx 密码：xxxxxx 文件协议和端口默认 填写完成则登录连接... ...
如何部署测试环境
Veulshone的博客
02-15 712
如何部署测试环境 1、从jekins上下载war包，解压后再次压缩成zip安装包—(也可能是开发直接打包给测试) 2、通过xsell将zip 安装包放进目录下 3、备份原有程序包，zip -r xx.zip xx 4、删除原有程序包, rm xx。（最好同时清空日志） 5、解压新包，并重新名称（系统所需要的名称） 6、ps -ef|grep 进程名 7、kill -9 进程号 8、cd 到bin目录./starup.bin ...
测试流程--测试发版规范
huofuman960209的博客
09-19 2302
简介：为了保证系统稳定性，对软件项目的上线过程进行规范，确保项目符合产品需求。对于已经开发完毕的系统，需要正式部署到生产环境前必须严格按照以下流程规范实施。 规范发版的流程，指定发版的相关输出，相关信息的收集，并通知相关业务方了解发版信息。防止或减少因发版造成的系统抖动对业务产生的影 响，并有利于追溯发版过程，方便后续优化迭代。
git项目发版--测试er专用
Youga123的专栏
03-29 1055
这里写自定义目录标题安装Git配置用户信息设置用户名和邮箱生成公钥在GitHub上配置公钥克隆项目到本地发版 一直都知道测试er是需要负责起项目的发版工作的，但一直没有机会和能力来进行这项操作，，，直到公司新接了个项目，被划到这个项目组之后，这个重任就交到我的手中了，鸡冻。 其实发版操作很简单，前后逃不出那几个命令，仔细认真一点就好啦。 安装Git 第一步，当然是要安装一个Git了，下载地址：Gi...
测试环境搭建教程（APP+WEB）
伤心的辣条
09-29 772
很多人写电商项目，但我估计能真正理解电商项目的人，很少很少……大多数小伙伴刻板的以为电商项目就是淘宝、京东那样的。按照这种模式练习，你和身边的其他人没有任何区别，你和一起找工作的人没有任何区别。准确的说，没有亮点，千篇一律，就很难找到工作。因此，在本教程中，我还会告诉你什么是真正的电商项目，如何理解电商项目，如何“创造”属于自己的电商项目，让你和其他人的项目完全不一样。
用 npm script 实现服务自动化运维
YunWisdom
07-26 432
用 npm script 实现服务自动化运维 需要事先说明的是，本节部分内容涉及到非前端的话题，比如服务的部署、日志，但会从前端项目管理开始，比如依赖管理、版本管理等。即使对自己定位是纯粹前端开发的同学，也建议阅读下，因为技不压身，了解整个前端项目交付流程中需要考量的点能让我们更有大局观。 通常来说，项目构建完成之后，就成为待发布的版本，因此版本管理需要考虑，甚至做成自动化的，然后，最新的代码需要部署到线上机器才能让所有用户访问到，部署环节涉及到服务的启动、重启、日志管理等需要考虑。 下面我们介.
如何搭建测试环境？（详解）
cs888zsy的博客
09-07 2864
测试环境在软件项目中的重要性不言而喻，测试环境独立及是否稳定直接影响了项目的进度。简单的说，经过良好规划和管理的测试环境，可以尽可能的减少环境的变动对测试工作的不利影响，并可以对测试工作的效率和质量的提高产生积极的作用。测试环境是研发/测试同学最常用的功能，稳定性直接影响到研发效率，环境不稳定主要表现在：接口服务不可用、数据丢失等各个方面。而事实证明，造成这些后果的主要原因为：测试环境部署架构不合理，测试环境数据被修改，测试环境服务器宕机，测试系统升级等等。
如何高效的进行项目发版？
07-18 1万+
对于软件项目来说，发版是软件项目必进的一个环节，同时是最后交给用户的最后一个环节，这个环节至关重要，他的好与坏直接影响着用户对我们这个软件的开发，所以再我们平时发版的时候，如果出现问题必须要用户使用前解决，同时，由于一些软件已经在用，所以，为了不影响用户的使用，我们必须要在用户没有在用的时候去升级，一般都是在晚上6点到第二天早上8点30分，这个过程包括，软件的升级，系统的测试，系统修改更新...
前端测试和正式服务器部署
weixin_47136265的博客
02-07 796
前端测试和正式服务器部署
package中添加一条命令,用来自动选择包管理器进行依赖安装
最新发布
小火车况且况且况且的博客
09-21 191
中的添加 文件目录为 的文件为 说明 官网地址 Node.js 中 child_process 模块的 execSync 方法用于同步执行 shell 命令。 execSync 方法的主要特征和用法如下: 选项: cwd - 子进程的当前工作目录 input - 输入给命令的内容 stdio - 子进程 stdin/stdout/stderr 配置 env - 环境变量键值对 shell - 子进程的 shell uid/gid - 设置用户/组 id 和 exec 的区别是 execSync 是同
前端代码上传测试/正式服务器
changchang_的博客
10-26 775
·注：本文仅适用我自己，谨慎参考！！！ 一、上传测试服务器 1.1 后台管理系统（未封装axios） 首先，在vue.config.js文件中，关于接口地址代理的代码可以全部注释掉，即deServer部分，服务器将不再使用代理服务。 其次，将接口中自行添加（供接口代理使用的）'apis/'全部删除。 最后，在main.js文件中添加如下代码： axios.defaults.baseURL = 'url'; // url: 测试服务器地址 1.2 恢复本地测试 将上述改变恢复回去，即可。
P11.13-webpack插件压缩JS文件
Bruce小鬼
12-19 679
P11.13-webpack插件压缩JS文件 文章目录P11.13-webpack插件压缩JS文件1.概述2.创建项目3.安装uglifyjs-webpack-plugin3.1.安装插件3.2.配置插件4.构建项目预览效果 1.概述 在项目发布前，我们需要对js进行压缩处理，减少js文件大小。提高前端访问性能。 2.创建项目 项目开发是在上篇P11.12-webpack插件打包html文件到dist文件夹Plugin 开始下面的操作前，需要先按照上篇文章搭建项目。 3.安装uglifyjs-web
前端系列九：前端项目部署上线流程、开发环境、测试环境、生产环境
WebYanXin的博客
12-28 4813
开发环境、测试环境、生产环境、UAT环境、仿真环境– 区别 开发环境（development）: 开发环境时程序猿们专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告和测试工具，是最基础的环境。 测试环境(testing): 一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产服务器上，是开发环境到生产环境的过度环境。测试人员会模拟各种操作情况，主要用于测试是否存在bug，如果有那么肯定不能把它发布到生产机上 生产环境（producti
部署测试环境（非常详细哦，不看会后悔的操作步骤）
热门推荐
很努力学习知识的博客
04-01 3万+
部署测试环境（我举的例子是aix系统的，哈哈，现在都是linux了，不过我觉得都是异曲同工吧） 测试工程部署路径(根据你们的项目定路径就可以啦） /home/webuser/tomcat/webapps/test 部署操作步骤 （1） 输入账号和密码，登录进去 (2) 部署tomcat，由于我的这个服务器上面原先有一个项目project，所以我就将那个项目的tomcat拷贝过来。 su...
2021年前端部署的灵魂拷问
前端开发博客
01-02 3714
大家好，在过去的一年中，前端部署你遇到过哪些问题，一起来看看这篇文章吧。喜欢记得关注我并设为星标。先上灵魂拷问在文章之前，先抛一些灵魂拷问：前端代码从 tsx/jsx 到部署上线被用户访问...
前端项目部署上线流程、开发环境、测试环境、生产环境
高山景行，一尘不染
10-18 2万+
项目从开发到上线一般是，开发环境、测试环境、预发环境、生产环境。 开发环境：开发调试阶段，每次新的开发，要从最新的生产代码合并过来开始开发。 测试环境：一般指的是开发的模块具备测试条件，开始让测试人员进行测试。 预发布环境：把测试环境代码合并到预发环境，这时，访问线上数据，进行测试没有问题的话可以直接合到生产环境。 生产环境（线上）：合并预发环境的代码 项目在搭架子的时候，一定要把环境变...
一键发布jenkins
06-10
一键发布 Jenkins，通常是指通过 Jenkins 实现自动化部署的功能，主要包括以下步骤： 1. 编写 Jenkinsfile，定义 Pipeline，包括构建、测试、打包、部署等步骤。 2. 在 Jenkins 中创建一个 Pipeline 项目，并将 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值