Appearance
FTP 自动部署
如果你的团队没有给测试服部署 CI/CD 方案,而是只准备了 SFTP,那么可以考虑使用本方案。
核心软件
使用ftp-deploy即可。
- 安装 ftp-deploy
sh
yarn add -D ftp-deploy
根据说明文档,在项目根目录创建
ftp-deploy.js
编写配置文件。在
package.json
加入"deploy": "node ./bin/ftp-deploy.js",
,也可以跟在build
的后面用&&
连接。
编写上传任务
上传任务必须分为 2 步:
必须先上传
/static/
,这些文件带有 Hash,不会覆盖不同的文件。是完全无风险操作。再上传
/static/
外的其他文件。
这样保证新的index.html
生效时,其引用的文件也都已经生效。为达成此目的,你必须制定 2 个上传任务,依次执行。
范例如下:
js
const path = require('path');
const child_process = require('child_process');
const FtpDeploy = require('ftp-deploy');
const ftpDeploy = new FtpDeploy();
const baseConfig = {
host: '??.??.??.??',
user: '??????',
password: '??????',
port: 22, // SFTP 的默认端口是 22
localRoot: __dirname + '/dist',
remoteRoot: '/data/item/vue/sxyd_web',
forcePasv: true,
sftp: true,
deleteRemote: false, // 必须为false
};
const AllFilesExceptIndexHtmlConfig = { ...baseConfig, include: ['static/**/*'] };
const IndexHtmlConfig = {
...baseConfig,
include: ['*', '**/*'],
exclude: ['static/**/*'],
};
console.log('Start uploading...');
ftpDeploy
.deploy(AllFilesExceptIndexHtmlConfig)
.then((res) => console.log('Static dir finished:', res))
.then(() => {
return ftpDeploy.deploy(IndexHtmlConfig);
})
.then((res) => console.log('Others finished:', res))
.then(() => {
const vbsPath = path.join(__dirname, 'ftp-deploy.vbs');
child_process.exec(
'cscript.exe ' + vbsPath + ' "提示" "SFTP部署完成"',
function (err, stdout, stderr) {
//...
}
);
})
.catch((err) => console.log(err));