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 相关文章推荐
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
js实现二级导航功能
Mar 03 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 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
咖啡与水的关系
2021/03/03 冲泡冲煮
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
Javascript基础知识(二)事件
2014/09/29 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
Vue精简版风格概述
2018/01/30 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
Python运用于数据分析的简单教程
2015/03/27 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
Python实现计算对象的内存大小示例
2019/07/10 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
python super用法及原理详解
2020/01/20 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
请解释在new与override的区别
2012/10/29 面试题
经典婚礼主持词
2014/03/13 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript