Skip to content
On this page

FTP 自动部署

如果你的团队没有给测试服部署 CI/CD 方案,而是只准备了 SFTP,那么可以考虑使用本方案。

核心软件

使用ftp-deploy即可。

  1. 安装 ftp-deploy
sh
yarn add -D ftp-deploy
  1. 根据说明文档,在项目根目录创建ftp-deploy.js编写配置文件。

  2. package.json加入"deploy": "node ./bin/ftp-deploy.js",,也可以跟在build的后面用&&连接。

编写上传任务

上传任务必须分为 2 步:

  1. 必须先上传/static/,这些文件带有 Hash,不会覆盖不同的文件。是完全无风险操作。

  2. 再上传/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));

杨亮的前端解决方案