Vue-CLI 3 scp2自动部署项目至服务器的方法


Posted in Javascript onJuly 24, 2020

一 安装scp2

npm install scp2 --save-dev

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

在项目根目录下, 创建 .env.dev 文件 (测试环境变量)

VUE_APP_SERVER_ID变量表示 当前需部署的测试服务器ID为0

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

在项目根目录下, 创建 .env.prod 文件 (生产环境变量)
VUE_APP_SERVER_ID变量表示 当前需部署的生产服务器ID为1

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

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

/*
 *读取env环境变量
 */
const fs = require('fs');
const path = require('path');
// env 文件 判断打包环境指定对应的服务器id
const envfile = process.env.NODE_ENV === 'prod' ? '../.env.prod' : '../.env.dev';
// 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 = [
 {
  id: 0,
  name: 'A-生产环境',
  domain: 'www.prod.com',// 域名可以忽略
  host: '46.106.38.24',// ip
  port: 22,// 端口
  username: 'root', // 登录服务器的账号
  password: 'Rock@sz18!', // 登录服务器的账号
  path: '/mdm/nginx/dist' // 发布至静态服务器的项目路径
 },
 {
  id: 1,
  name: 'B-测试环境',
  domain: 'test.xxx.com',
  host: 'XX.XX.XX.XX',
  port: 22,
  username: 'root',
  password: 'xxxxxxx',
  path: '/usr/local/www/xxx_program_test/'
 }
];

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 === 'prod' ? '生产' : '测试') +
  '服务器...'
);

var Client = require('ssh2').Client;

var conn = new Client();
conn
 .on('ready', function() {
  // rm 删除dist文件,\n 是换行 换行执行 重启nginx命令 我这里是用docker重启nginx
  conn.exec('rm -rf /opt/nginx_fdfs/manager\ndocker restart nginx', 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 === 'prod'
            ? '生产'
            : '测试') +
           '服务器! \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 i --save-dev cross-env cross-env

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

发布到测试环境命令为 npm run yirenck:dev,生产环境为 npm run yirenck:prod

"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=prod node ./yirenck",
 },

到此这篇关于Vue-CLI 3 scp2自动部署项目至服务器的方法的文章就介绍到这了,更多相关Vue-CLI 3 scp2自动部署内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
JavaScript实现页面实时显示当前时间的简单实例
Jul 20 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 #Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 #Javascript
vue+axios全局添加请求头和参数操作
Jul 24 #Javascript
vue在响应头response中获取自定义headers操作
Jul 24 #Javascript
vuex存取值和映射函数使用说明
Jul 24 #Javascript
js实现金山打字通小游戏
Jul 24 #Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 #Javascript
You might like
第八节 访问方式 [8]
2006/10/09 PHP
mysql+php分页类(已测)
2008/03/31 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
JavaScript实现单英文金山打字通
2020/07/24 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
Python随机生成彩票号码的方法
2015/03/05 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
中专生自我鉴定
2013/12/17 职场文书
聚美优品广告词改编
2014/03/14 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
男生贾里读书笔记
2015/06/30 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL