使用gulp上传打包文件到服务器

项目是使用create-app-rewired生成的react项目，使用gulp自动上传打包文件到服务器，建议只在测试环境和模拟环境使用。

1.安装gulp,gulp-ssh包

2.编写脚本

3.修改config-overrides.js，将打包文件分环境生成

4.编写gulp配置文件gulpfile.js

const { src, task, series } = require("gulp");
const GulpSSH = require("gulp-ssh");
const { APP_ENV } = process.env;//获取系统环境
const LOCAL_PATH = `./build/${APP_ENV}/**/*`;//本地目录

let remotePath = "/home/web/project";//远程服务器目录
let config = {
    test: [
        {
            remotePath,
            deleteCommand: `rm -rf ${remotePath}/*`,
            ssh: {
                host: "*.*.*.*",//测试站
                port: 22,
                username: '***',
                password: "***",//明文存放
            }
        }
    ],
     mock: [
         {
             remotePath,
             deleteCommand: `rm -rf ${remotePath}/*`,
             ssh: {
                 host: "*.*.*.*",//模拟站
                 port: 22,
                 username: '***',
                 password: "***",//明文存放
             }
         },
     ]
}

task("deploy", cb => {
    let sshConfigs = config[APP_ENV] || [];//配置
    let seriesArray = [];//任务队列
    for (let i = 0; i < sshConfigs.length; i++) {
        const { remotePath, deleteCommand, ssh } = sshConfigs[i] || {};
        let gulpSSH = new GulpSSH({
            ignoreErrors: false,
            sshConfig: ssh
        });
        seriesArray.push(series(function step1() {
            console.log(`开始清除目标服务器文件,ip:${ssh.host},命令:${deleteCommand}`);
            return gulpSSH.shell(deleteCommand);
        }, function step2() {
            console.log(`开始上传文件到目标服务器,源目录:${LOCAL_PATH},目标目录:${remotePath}`);
            return src(LOCAL_PATH).pipe(gulpSSH.dest(remotePath));
        }));
    }
    series(seriesArray)();
    cb();
})

5.执行脚本 yarn deploy:test 即可

注意点

上传对象服务器

自动上传建议只上传测试站，模拟站等，不要自动上传生产，避免误操作

对象服务器密码明文问题

对象服务器会明文存放在对象上，不安全，可以通过aes进行加解密

步骤：

1. 在 https://www.sojson.com/encrypt.html 上使用aes加盐将密码进行加密
2. 将加密后的密码写在password上
3. 添加crypto-js，执行yarn add crypto-js -d

4. 将gulpfile.js修改为如下

   const { src, task, series } = require("gulp");
   const GulpSSH = require("gulp-ssh");
   const aesCrypto = require("crypto-js/aes");
   const utf8Encode = require("crypto-js/enc-utf8");
   const { APP_ENV } = process.env;//获取系统环境
   const LOCAL_PATH = `./build/${APP_ENV}/**/*`;//本地目录
   const salt = "******";//盐
   
   let remotePath = "/home/web/project";//远程服务器目录
   let config = {
    test: [
        {
            remotePath,
            deleteCommand: `rm -rf ${remotePath}/*`,
            ssh: {
                host: "*.*.*.*",//测试站
                port: 22,
                username: '***',
                encode: "***",//密文存放
            }
        }
    ],
     mock: [
         {
             remotePath,
             deleteCommand: `rm -rf ${remotePath}/*`,
             ssh: {
                 host: "*.*.*.*",//模拟站
                 port: 22,
                 username: '***',
                 encode: "***",//密文存放
             }
         },
     ]
   }
   
   task("deploy", cb => {
    let sshConfigs = config[APP_ENV] || [];//配置
    let seriesArray = [];//任务队列
    for (let i = 0; i < sshConfigs.length; i++) {
        const { remotePath, deleteCommand, ssh } = sshConfigs[i] || {};
        ssh.password = aesCrypto.decrypt(ssh.encode, salt).toString(utf8Encode);//添加密码解密
        let gulpSSH = new GulpSSH({
            ignoreErrors: false,
            sshConfig: ssh
        });
        seriesArray.push(series(function step1() {
            console.log(`开始清除目标服务器文件,ip:${ssh.host},命令:${deleteCommand}`);
            return gulpSSH.shell(deleteCommand);
        }, function step2() {
            console.log(`开始上传文件到目标服务器,源目录:${LOCAL_PATH},目标目录:${remotePath}`);
            return src(LOCAL_PATH).pipe(gulpSSH.dest(remotePath));
        }));
    }
    series(seriesArray)();
    cb();
   })