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