浅谈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 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 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 生成WML页面方法详解
2009/08/09 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
python实现nao机器人手臂动作控制
2019/04/29 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
体育教育专业毕业生自荐信
2013/11/15 职场文书
幼教简历自我评价
2014/01/28 职场文书
企业管理标语
2014/06/10 职场文书
三好生演讲稿
2014/09/12 职场文书
写给老师的感谢信
2015/01/20 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
社会实践心得体会范文
2016/01/14 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫