Vue项目自动部署打包至服务器

Jsky
2022-07-23 17:15:03
前端
Linux Vue Vue3 NPM

一、安装scp2

npm install scp2 --save-dev
或者
cnpm install scp2 --save-dev
或者
yarn add scp2
或者
yarn add scp2 --save-dev

二、配置测试/生产环境服务器SSH远程登陆账号信息

1.在项目根目录下, 创建 .env.dev 文件 (测试环境变量)
VUE_APP_SERVER_ID变量表示当前需部署的测试服务器ID为0（0：也可以理解为服务器配置列表的下标）

// .env.dev文件中 
VUE_APP_SERVER_ID=0

2.在项目根目录下, 创建 .env.production 文件 (生产环境变量)
VUE_APP_SERVER_ID变量表示当前需部署的生产服务器ID为1（1：也可以理解为服务器配置列表的下标）

// .env.production文件中 
VUE_APP_SERVER_ID=1

3.在项目根目录下, 创建 yirenck/products.js 文件

/*
 *读取env环境变量
 */
 const fs = require('fs');
 const path = require('path');
 // env 文件 判断打包环境指定对应的服务器id
 const envfile = process.env.NODE_ENV === 'production' ? '../.env.product' : '../.env.development';
 // env环境变量的路径
 const envPath = path.resolve(__dirname, envfile);
 // env对象
 const envObj = parse(fs.readFileSync(envPath, 'utf8'));
 const SERVER_ID = parseInt(envObj['VUE_APP_SERVER_ID']);
 
 function parse(src) {
   // 解析KEY=VAL的文件
   const res = {};
   src.split('\n').forEach(line => {
     // matching "KEY' and 'VAL' in 'KEY=VAL'
     // eslint-disable-next-line no-useless-escape
     const keyValueArr = line.match(/^\s*([\w\.\-]+)\s*=\s*(.*)?\s*$/);
     // matched?
     if (keyValueArr != null) {
       const key = keyValueArr[1];
       let value = keyValueArr[2] || '';
 
       // expand newlines in quoted values
       const len = value ? value.length : 0;
       if (len > 0 && value.charAt(0) === '"' && value.charAt(len - 1) === '"') {
         value = value.replace(/\\n/gm, '\n');
       }
 
       // remove any surrounding quotes and extra spaces
       value = value.replace(/(^['"]|['"]$)/g, '').trim();
 
       res[key] = value;
     }
   });
   return res;
 }
 
 /*
   *服务器配置列表
  *定义多个服务器账号 及 根据 SERVER_ID 导出当前环境服务器账号
  */
 const SERVER_LIST = [
   {
     name: 'B-测试环境',
     domain: 'test.xxx.com',
     host: 'XX.XX.XX.XX',
     port: 22,
     username: 'root',
     password: 'xxxxxxx',
     path: '/usr/local/www/xxx_program_test/'
   },
   {    
     name: '生产环境',
     domain: 'pro.xxx.com/',// 域名可以忽略
     host: '127.0.0.1',// ip
     port: 22,// 端口
     username: 'root', // 登录服务器的账号
     password: 'root', // 登录服务器的账号
     path: '/www/wwwroot/pro.xxx.com' // 发布至静态服务器的项目路径
   }
 ];
 
 module.exports = SERVER_LIST[SERVER_ID];

三、使用scp2库,创建自动化部署脚本

在项目根目录下, 创建 yirenck/index.js 文件

//  yirenck/index.js里面
const scpClient = require('scp2');
const ora = require('ora');
const chalk = require('chalk');
const server = require('./products');
const spinner = ora(
  '正在发布到' +(process.env.NODE_ENV === 'production' ? '生产' : '测试') + '服务器...'
);

var Client = require('ssh2').Client;
var conn = new Client();
conn.on('ready', function() {
    // rm 删除服务器上项目目录下的文件
    conn.exec('rm -rf '+ server.path, function(err,stream) {
      if (err) throw err;
      stream.on('close', function(code, signal) {
          // 在执行shell命令后，把开始上传部署项目代码放到这里面
          spinner.start();
          scpClient.scp(
            './dist',
            {
              host: server.host,
              port: server.port,
              username: server.username,
              password: server.password,
              path: server.path
            },
            function(err) {
              spinner.stop();
              if (err) {
                console.log(chalk.red('发布失败.\n'));
                throw err;
              } else {
                console.log(chalk.green('Success! 成功发布到' +(process.env.NODE_ENV === 'production' ? '生产' : '测试') +'服务器! \n'
                  )
                );
              }
            }
          );
          conn.end();
        }).on('data', function(data) {
          console.log('STDOUT: ' + data);
        }).stderr.on('data', function(data) {
          console.log('STDERR: ' + data);
        });
    });
  }).connect({
    host: server.host,
    port: server.port,
    username: server.username,
    password: server.password
    //privateKey: require('fs').readFileSync('/home/admin/.ssh/id_dsa')
  });

六、安装 cross-env判断生产环境还是测试环境

这里用到了cross_env ,cross-env能跨平台地设置及使用环境变量，这里用来设置是生产环境还是测试环境

npm install -g cross-env
或者(如果报错则最好使用 cnpm)
cnpm install -g cross-env

七、添加 package.json 中的 scripts 命令, 自定义名称为 "yirenck"

发布到测试环境命令为 npm run yirenck:dev
发布到生产环境命令为 npm run yirenck:prod
yirenck:dev 和 yirenck:prod 可以根据自己的喜好来设定
serve 和 build 根据自己项目的配置来填写

在package.json 中 scripts 进行修改

  "scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prod",
    "yirenck:dev": "npm run build && cross-env NODE_ENV=dev node ./yirenck",
    "yirenck:prod": "npm run build && cross-env NODE_ENV=production node ./yirenck",
  },

本文为Jsky原创文章,转载无需和我联系,但请注明来自Jsky博客 www.tjin.link