创建自定义 action

背景

当我们把 Vue 代码提交到 github 后，我们希望通过 action 去构建生成代码，并将生产代码复制到生产服务器的指定目录。构建过程非常简单，但是要复制生产代码到指定服务器目录，这个部分就需要我们自己实现。

步骤

新建一个 github 仓库 sftp-deploy-action
创建 action.yml 文件

name: 'SFTP Deploy Action'
description: 'Deploy files to a server via SFTP.'
author: 'dacong-wu'
inputs:
  SFTP_HOST:
    description: 'The SFTP host.'
    required: true
  SFTP_USERNAME:
    description: 'The SFTP username.'
    required: true
  SFTP_PASSWORD:
    description: 'The SFTP password.'
    required: true
  SFTP_REMOTE:
    description: 'The remote directory on the SFTP server.'
    required: true
runs:
  using: 'node20'
  main: 'deploy-to-sftp.js'

创建 deploy-to-sftp.js 文件

const path = require('path');
const fs = require('fs');
const Client = require('ssh2-sftp-client');
const dayjs = require('dayjs');
const utc = require('dayjs/plugin/utc');
const timezone = require('dayjs/plugin/timezone');
const logSymbols = require('log-symbols');
const core = require('@actions/core');
dayjs.extend(utc);
dayjs.extend(timezone);

let remote = core.getInput('SFTP_REMOTE');
let localPath = path.join(process.cwd(), 'dist'); // 修改路径以适应新环境
let fileNumber = getPathFileNumber(localPath);
let steps = 100 / fileNumber;
let percent = 0;

const sftp = new Client();

async function deploy() {
  console.log(logSymbols.info, '正在上传到服务器...');
  sftp
    .connect({
      host: core.getInput('SFTP_HOST'),
      port: 22,
      username: core.getInput('SFTP_USERNAME'),
      password: core.getInput('SFTP_PASSWORD'),
    })
    .then(async () => {
      let fromPath = remote + '/dist';
      let uploadPath = remote + '/upload';
      let toPath = remote + '/backup/' + dayjs().tz('Asia/Shanghai').format('YYYY-MM-DD(HH:mm:ss)');
      await sftp.uploadDir(localPath, uploadPath);
      if (!(await sftp.exists(remote + '/backup/'))) sftp.mkdir(remote + '/backup/', true);
      if (await sftp.exists(fromPath)) {
        await sftp.rename(fromPath, toPath);
      }
      await sftp.rename(uploadPath, fromPath);
    })
    .then(() => {
      console.log(logSymbols.success, '上传成功😁');
      return sftp.end();
    })
    .catch((err) => {
      console.log(logSymbols.error, `上传失败😭\n${err}`);
      return sftp.end();
    });
  sftp.on('upload', () => {
    percent += steps;
    console.log(logSymbols.info, `上传进度：${Math.round(percent)}%`);
  });
}

function getPathFileNumber(folder) {
  var number = 0;
  function readFolder(folder) {
    try {
      let files = fs.readdirSync(folder);
      files.forEach((item) => {
        let fileItemPath = path.join(folder, item);
        let stat = fs.statSync(fileItemPath);
        if (stat.isFile()) number++;
        else readFolder(fileItemPath);
      });
    } catch (err) {
      console.log(logSymbols.error, `读取文件错误😖\n${err}`);
    }
  }
  readFolder(folder);
  return number;
}

deploy();

执行 npm init -y 创建 package.json 文件
安装需要的依赖 npm i @actions/core dayjs log-symbols ssh2-sftp-client
创建 README.md 文件，对项目进行说明

## Please refer to action.yml to get the data you need to provide.

1. Version 1 only supports logging into the server with a username and password.
2. Version 1 only supports Vue in principle because the build output directory is dist.
3. The SFTP_REMOTE address does not need to include dist and /.

主要就是上面五个步骤，此 action 开源地址 https://github.com/Dacong-wu/sftp-deploy-action

注意事项

你需要使用 @actions/core 来接受参数
注意设置 dayjs 的时区，不然备份文件夹的时间会有问题

使用

在你 action 的 jobs 的 steps 增加如下步骤

- name: 执行部署
  	uses: Dacong-wu/sftp-deploy-action@main
    with:
    	SFTP_HOST: ${{ secrets.USER_HOST }}
    	SFTP_USERNAME: ${{ secrets.USER_NAME }}
    	SFTP_PASSWORD: ${{ secrets.PASSWORD }}
    	SFTP_REMOTE: ${{secrets.USER_TARGET}}

在 github 中添加对应的 secret