项目是使用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 即可

03-05 20:28