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 相关文章推荐
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
JavaScript前端面试组合函数
Jun 21 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
Yii rules常用规则示例
2016/03/15 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
python实现rest请求api示例
2014/04/22 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
值得收藏的10道python 面试题
2019/04/15 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
Python类的继承super相关原理解析
2020/10/22 Python
python入门教程之基本算术运算符
2020/11/13 Python
css sprite简单实例
2016/05/23 HTML / CSS
房屋转让协议书范本
2014/04/11 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
收费员岗位职责
2015/02/14 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
图书借阅制度范本
2015/08/06 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
Mysql排序的特性详情
2021/11/01 MySQL
python神经网络Xception模型
2022/05/06 Python