浅谈Vue 自动化部署打包上线


Posted in Javascript onJune 14, 2020

应用场景

项目打包后发布到正式环境,需要后端配合或者前端自己上传到服务器上,操作不便且容易产生问题,比如后台不在的情况而前台没有服务器的信息,这时发布就被延;或者前端自己上传容易导致误操作,如果上传错地方没正确上传都可能导致线上直接崩掉,而这对于已发布的产品而言是致命的。因此,有必要实现自动化部署代码到线上,解放双手的同时也减轻后端兄弟的压力。

项目使用

1、在项目根目录下, 创建 deploy/products.js 文件

/*
 *读取env环境变量
 */
const SERVER_ID = process.env.NODE_ENV === "prod" ? 0 : 1;

/*
 *定义多个服务器账号 及 根据 SERVER_ID 导出当前环境服务器账号
 */
const SERVER_LIST = [
 {
  id: 0,
  name: "A-生产环境",
  domain: "xxx.xxx.xxx", // 域名
  host: "118.31.245.118",
  port: 22,
  username: "root",
  password: "Yrkj1234",
  indexpath: "/var/www/yiqitong/public/theme/index/default/index/",
  assetspath: "/var/www/yiqitong/public/h5-static/"
 },
 {
  id: 1,
  name: "B-测试环境",
  domain: "yiqitong.118.easysoft168.com",
  host: "118.31.245.118",
  port: 22,
  username: "root",
  password: "Yrkj1234",
  indexpath: "/var/www/yiqitong/public/theme/index/default/index/",
  assetspath: "/var/www/yiqitong/public/h5-static/"
 }
];

module.exports = SERVER_LIST[SERVER_ID];

2、在项目根目录下, 创建 deploy/index.js 文件

// deploy/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 /var/www/yiqitong/public/theme/index/default/index/index.htmln rm -rf /var/www/yiqitong/public/h5-static",
   function(err, stream) {
    if (err) throw err;
    stream
     .on("close", function(code, signal) {
      // 在执行shell命令后,把开始上传部署项目代码放到这里面
      spinner.start();
      scpClient.scp(
       "dist/index.html",
       {
        host: server.host,
        port: server.port,
        username: server.username,
        password: server.password,
        path: server.indexpath
       },
       function(err) {
        if (err) {
         console.log(chalk.red("发布失败.n"));
         throw err;
        } else {
         scpClient.scp(
          "dist/h5-static/",
          {
           host: server.host,
           port: server.port,
           username: server.username,
           password: server.password,
           path: server.assetspath
          },
          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
 });

3、添加 package.json 中的 scripts 命令, 自定义名称为 "deploy""scripts": {

"serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "test:unit": "vue-cli-service test:unit",
  "deploy:dev": "npm run build && cross-env NODE_ENV=dev node ./deploy",
  "deploy:prod": "npm run build && cross-env NODE_ENV=prod node ./deploy"
 },

运行npm run deploy:dev发布到测试环境;npm run deploy:prod发布到生产环境。至此大功告成。总结这种打包方式可能会存在风险问题,毕竟ip和密码都写在前端。我推荐使用Jenkins自动化打包参考文章segmentfault.com/a/119000001…总结

到此这篇关于浅谈Vue 自动化部署打包上线的文章就介绍到这了,更多相关Vue 自动化部署打包内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
JS实现4位随机验证码
Oct 19 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 #Javascript
Jquery ajax书写方法代码实例解析
Jun 12 #jQuery
ng-alain的sf如何自定义部件的流程
Jun 12 #Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 #Javascript
基于Web Audio API实现音频可视化效果
Jun 12 #Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 #Javascript
学前端,css与javascript重难点浅析
Jun 11 #Javascript
You might like
PHP中Session的概念
2006/10/09 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
ThinkPHP的常用配置选项汇总
2016/03/24 PHP
Yii2单元测试用法示例
2016/11/12 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
关于python2 csv写入空白行的问题
2018/06/22 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
python elasticsearch环境搭建详解
2019/09/02 Python
python安装scipy的步骤解析
2019/09/28 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
秋天的图画教学反思
2014/05/01 职场文书
文明之星事迹材料
2014/05/09 职场文书
活动总结报告怎么写
2014/07/03 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
技术员岗位职责
2015/02/04 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
分析Python list操作为什么会错误
2021/11/17 Python