基于 vue-cli 的前端项目的自动发布预览环境

ctriptech 发布于2019-08-21 18:43 / 488人阅读

摘要：就是在提测前部署一个预览环境，在提测前，每个人本地验证一遍，再放在预览环境验证一遍。于是就准备啪啪啪撸一个完成自动发布预览环境的工具。用来直接把已经好的文件发布到预览环境。这样以后组里的其他同事也都可以用一行命令自己部署预览环境了。

场景

进入公司一段时间了。流程还是不太让人省心。就在上个提测版本的质量还是没法保证，总是或多或少出现一些问题。于是就想到了上家公司的一个做法。就是在提测前部署一个预览环境，在提测前，每个人本地验证一遍，再放在预览环境验证一遍。

实施

有了想法，就得去付诸行动。先是用公司的一个测试服务器多带带起了一个服务，用nginx来做反向代理。然后把前端代码部署上去。
整个部署流程是：用 xshell 连上服务器，然后用 xftp 链接服务器，然后本地 build 项目，接着把 build 好的文件通过 xftp 上传到服务器上。整个流程感觉稍有繁琐。而且，对于不熟悉 shell 工具的同学不友好啊。重复的工作啊有没有。

改进

既然前端是万能的，那么这种重复的操作在我们前端工作流中是不被允许的。刚好项目进度不是那么忙。于是就准备啪啪啪撸一个 build 完成自动发布预览环境的工具。
要完成这个工具，我们来梳理一下需要实现的功能：

本地文件压缩功能

链接远程服务器

压缩包上传远程服务器

远程服务器解压缩

本地 build 完毕的一个回调

可能你会说，你傻啊，不会直接上传，还要压缩解压缩。这里用压缩包传输一方面是方便做备份。我考虑的是上传在一个backup的文件夹里，然后用的时候再从这个文件夹取出来，然后解压到置顶目录。提测的时候也可以直接让测试来这个目录去压缩包。
另一方面是不想写递归啊。如果要上传的目录结构不确定少不了递归啊，递归啊，递归啊。我怕我头大。

本地文件压缩

于是创建一个 ftp.js 的文件，来实现上传本地 build 完的 dist 目录下的文件到服务器。

这里主要使用了 archiver 这个模块来实现压缩功能。
用 archiver 压缩本地文件：

let output = fs.createWriteStream(__dirname + "/../dist/" + fileName);
let archive = archiver("zip");
output.on("end", function () {
  console.log("Data has been drained");
});
output.on("error", function (err) {
  console.log("压缩失败");
  throw err;
});
output.on("close", function () {
  console.log("压缩成功");
});
archive.pipe(output);
archive.file(__dirname + "/../dist/index.html", {name: "index.html"});
archive.directory(__dirname + "/../dist/static/", "static");
archive.finalize();

fileName 是一个加戳的变量：

let fileName = "dist" + new Date().getTime() + ".zip";

说道这里，其实还可以把 git 的分支或者 tag 信息放在这个戳里边。用相关的 nodejs 模块来获取一下 git 仓库信息就好啦。有空我要来优化一波。

链接远程服务器和上传文件。

主要使用了 ssh2 这个模块来实现和远程服务器的交互。
链接远程服务器：

conn.on("ready", function () {
  console.log("连接上了！")  
}).on("end", function () {
  console.log("完成")
}).connect({
  host: "ip",
  port: 端口号,
  username: "用户名",
  password: "密码"
});

上传文件：

conn.sftp(function (err, sftp) {
  if (err) throw err;
  // 上传文件测试
  sftp.fastPut(__dirname + "/../dist/" + fileName, "/usr/share/nginx/htmlBackup/" + fileName, {}, (err, result) => {
    if (err) {
      console.log(err);
    }
    if (result) console.log(result);
  });
});

删除上个版本解压缩部署新版本

本来，使用 ssh2 的 shell 命令来实现这两个功能应该是很简单的。可是，没逼格啊。麻烦啊。于是我就想到 shell 脚本。说实话，在此之前，我也不知道 shell 脚本咋玩滴。但是我可以学嘛。于是，学习一波后就有了如下 html.sh 文件：

#!/bin/bash
# arg1:dir name  
# arg2:zip name
# delete old file 
deleteFile=$1
sudo chmod -R 777 /usr/share/nginx/$deleteFile
sudo rm -rf /usr/share/nginx/$deleteFile/*
# unzip file 
unzipFile=$2
sudo unzip -o /usr/share/nginx/htmlBackup/$unzipFile -d /usr/share/nginx/$deleteFile
# exit

其实 shell 脚本也不算复杂，大概一上午吧，写了这么几行。服务器权限设置有点严格，所以先用 chmod 给老文件设置权限，我懒于是就用 777 。然后，rm 删除老文件，然后解压缩 zip 包。其中 $1 和 $2 是调用这个 shell 传入的参数。
好了，说了这么多，shell 怎么用。当然还是要回到 ssh2 上。代码如下：

// 调用远程构建shell
conn.exec("/usr/share/nginx/html.sh html " + fileName, function(err, stream) {
  if (err) throw err;
  stream.on("close", function(code, signal) {
    console.log("Stream :: close :: code: " + code + ", signal: " + signal);
    conn.end();
  }).on("data", function(data) {
    let dataStr = ("" + data).trim();
    // 列出已经上传过的 zip 包
    if (dataStr.length > 5) {
      console.log("STDOUT: " + ("" + data).trim());
    }
  }).stderr.on("data", function(data) {
    console.log("STDERR: " + ("" + data).trim());
  });
  stream.on("end", function() {
    console.log("预览环境构建完成");
  });
});

新增功能基本上大功告成了。

build 回调

首先找到 vue-cli build 完成后的位置，也就是 build/build.js 配置中大概40行的位置。然后把上边我们写的功能导出模块，然后再 build.js 中引入 ftp.js。

let ftp = require("./ftp")

注意，这里我并不想破坏原有的命令的功能，于是就通过判断执行命令时的参数来控制功能的启用与否。process.argv 这个变量存放的就是调用命令的参数。具体是什么用的，console.log 一下就都知道啦。
于是就有了下图：

那么命令输入长了，敲字手疼啊。于是就修改 package.json 的 scripts。
添加如下两行：

"bap": "node build/build.js buildWithPublish",
"p": "node build/ftp.js publish"

这样，我们使用的时候就可以直接 npm run bap 来 build 和发布预览环境。用 npm run p 来直接把已经 build 好的文件发布到预览环境。

总结

好吧，作为一个能用即可的懒人，代码写的有点乱，整个功能的代码就不贴啦。基本上核心功能的代码就是上述说的那些。
避免重复就是节约时间啊。用了大概一天时间来实现这个功能我觉得很值。这样以后组里的其他同事也都可以用一行命令自己部署预览环境了。不用打开 xshell 打开 xftp。
基于上述功能，还做了一个提测小工具：https://segmentfault.com/a/11...

云服务器 GPU云服务器基于webrtc的项目基于webrtc的开源项目发布项目最快的基于比较的排序算法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90756.html

Vue+Express全栈购物商城

摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。一、前言提纲基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。二、历史版本基于Vue-CLI2.0:点我查看这个分支版本是一两年前...

Richard_Gao 2019-05-22 18:23 评论0 收藏0
Vue+Express全栈购物商城

摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。一、前言提纲基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。二、历史版本基于Vue-CLI2.0:点我查看这个分支版本是一两...

luzhuqun 2019-08-26 13:50 评论0 收藏0
Vue-项目从本地搭建到线上部署（wǒ shì biaō tí dǎng）

摘要：放置在目录下或通过绝对路径被引用。对于相关来说，我们推荐使用而不是直接链式指定。在不更改配置文件的情况下，前端页面迭代发布，不需要重启服务。作者：gauseen 0. 关于 Vuejs 简介：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，易用、灵活、高效。生态系统项目介绍 awesome-vue Vue.js 相关很棒的...

Arno 2019-08-26 13:49 评论0 收藏0
Electron 前端提测小工具

摘要：场景目前公司的测试环境还是由开发来搭建和部署的。没网，我就做个离线版的工具呗。调研选型技术目前我了解到使用前端技术做桌面应用有和以及着三种神器。好了，多说无用，来预览一下我们的小工具吧默认，就是最新的要提测的包。更新于年月日已入手。场景目前公司的测试环境还是由开发来搭建和部署的。这种做法是极其不科学的。所以那种部署啊什么的重复性的操作还是做个工具让测试自己去部署好了。先来预览一下工...

Riddler 2019-08-21 18:44 评论0 收藏0
Vue-CLI 3.x 自动部署项目至服务器

摘要：本教程讲解的是脚手架搭建的项目利用自动化部署到静态文件服务器一安装是一个基于增强实现，纯粹使用编写。前言平时部署前端项目流程是：先部署到测试环境ok后再发布到生产环境上，部署到测试环境用 xshell 连上服务器，然后用 xftp 连接服务器，然后本地 build 项目，接着把 build 好的文件通过 xftp 上传到服务器上，整个流程感觉稍有繁琐，重复。本教程讲解的是 Vue...

ASCH 2019-08-26 13:40 评论0 收藏0