VUE-CLi 项目半自动化部署 (scop2、cross-env)

在项目开发过程中，使用scop2代替文件上传，使分环境打包和服务器上传合并成一个命令，简化测试难度，使开发更有效率。

# 解决问题

VUE项目开发过程中，本机使用“npm run dev”测试相当简单，当测试完成后，需要运行“npm run build”输出正式环境包，再通过ssh或tfp等方法上传到正式环境服务器，这个过程略显麻烦，本文讲解通过SCP2方式实现打包并自动上传的功能。

# 使用到的插件

# SCOP2

SCOP2 是一个基于SSH安全登录进行远程文件拷贞的node.js插件。通过简单的配置，它能将本地构建好的项目，推送到（测试/生产）环境服务器中，以方便测试。提高效率。
安装：

npm install scp2 --save--dev

# cross-env (windows平台必须)

cross-env 是一个跨平台设备和使用环境变量的脚本。Windows不支持NODE_ENV的方式设置或使用环境变量，cross-env能提供一个设置环境变量的scripts，让你能免以unix方式设置环境变量，在windows上也能兼容运行。
安装：

npm install --save-dev cross-env

# ora (非必须)

ora 用于显示加载中的效果安装：

npm install ora

# 操作步骤

# 1.配置测试/生产环境

在项目根目录下创建测试环境变量文件 .env.dev，内容为： VUE_APP_SERVER_ID=0 在项目根目录下创建正式环境变量文件 .env.prod，内容为: VUE_APP_SERVER_ID=1

# 2.配置服务器SSH远程登录帐号信息

在项目根目录下创建文件 deploy/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: 'root', // 登录服务器的密码
 path: '/mdm/nginx/dist' // 发布至静态服务器的项目路径
 },
 {
 id: 1,
 name: 'B-测试环境',
 domain: 'test.xxx.com',
 host: 'XX.XX.XX.XX',
 port: 22,
 username: 'root',
 password: 'root',
 path: '/usr/local/www/xxx_program_test/'
 }
];
 
module.exports = SERVER_LIST[SERVER_ID];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

此处有你的服务器root帐号和密码，小心不要外流

# 使用scp2，创建自动化部署脚本

在项目根目录下，创建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' ? '生产' : '测试') + '服务器...');
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'));
 }
 }
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 添加scripts命令

在项目根目录的package.json的scripts对象中，添加deploy选项

"serve": "vue-cli-service serve --mode dev",
"build": "vue-cli-service build --mode prod",
"deploy:dev": "npm run build && cross-env NODE_ENV=dev node ./deploy", // 测试环境
"deploy:prod": "npm run build && cross-env NODE_ENV=prod node ./deploy" // 正式环境
}

1
2
3
4
5

命令说明： npm run build 打包语句，以该项目打包方式为准。 cross-env NODE_ENV=prod 使用环境变量 node ./deploy" 运行deploy

# 使用

测试环境

npm run deploy:dev

正式环境

npm run deploy:prod

# 总结

上面的方法，将分环境打包和上传服务器合并成一个命令，平时使用时会更简单，更有效率。

这个方法是前端开发过程中的解决方案，并不能代替自动化持续部署，那一套方法，还是找运维工程师去做吧。

xuweihua Blog

Choose mode