我的项目是应用 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 即可