自定义 Github Action 库实战详解


auto-push-oss Action

虽然在 Github 市场有推送 OSS 相关的 Action,但是我还是选择改造我运行了好多年的脚本来自定义符合自己要求的 Action 库。

编写步骤:

  • 添加依赖、编译脚本、action.yml配置
  • 编写自述文档
  • 编写indnex.js脚本

添加依赖、编译脚本、action.yml配置:

添加必要依赖:

"@actions/core": "^1.9.1"// 读取 yml 参数"@vercel/ncc": "^0.34.0"    // 打包脚本"ali-oss": "^6.17.1"        // ali-oss依赖

添加编译脚本:

"build": "ncc build index.js --license licenses.txt"

编写 action.yml 配置文件:

name: "auto-push-oss"description: "自动推动目录到 OSS"# 定义输入参数inputs:  root:    description: "待推送路径"    required: true  bucket:    description: "oss bucket"    required: true  region:    description: "oss region"    required: true  accessKeyId:    description: "oss accessKeyId"    required: true  accessKeySecret:    description: "oss accessKeySecret"    required: trueruns:  # 脚本运行环境(按官方文档给的12版本来使用)  using: "node12"  # 脚本执行入口(这里我们要用@vercel/ncc编译)  main: "dist/index.js"

编写自述文档:

自述文档需要说明这个 Action 的主要作用、需要配置的参数和最小使用的例子~

auto-push-oss

方便将常见的 Vue 项目,VuePress 项目构建到根目录的 dist 文件夹推送到指定从 oss 桶的根目录,特别适合在 oss 托管 VuePress 博客~

Inputs

参数描述
root待推送文件夹
bucketoss bucket
regionoss region
accessKeyIdoss accessKeyId
accessKeySecretoss accessKeySecret

Example usage

uses: OSpoon/auto-push-oss@mainwith:  root: public  bucket: it200  region: oss-cn-beijing  accessKeyId: ${{secrets.accessKeyId}}  accessKeySecret: ${{secrets.accessKeySecret}}

编写indnex.js脚本:

提供path、fs、ali-oss 和获取 yml 参数的@actions/core依赖~

const path = require("path");const fs = require("fs");const core = require("@actions/core");const OSS = require("ali-oss");

通过@actions/core提供的getInput来获取 yml 配置的参数变量~

const root = core.getInput("root");const bucket = core.getInput("bucket");const region = core.getInput("region");const accessKeyId = core.getInput("accessKeyId");const accessKeySecret = core.getInput("accessKeySecret");

OSS 推送文件主脚本

// TODO 必要依赖// TODO 接收输入参数const client = new OSS({  bucket,  region,  accessKeyId,  accessKeySecret,});const rootPath = root || "dist";const isHave = fs.existsSync(rootPath);if (!isHave) {  throw new Error("路劲不存在");}let filepaths = [];let putCount = 0;function readFileSync(filepath) {  let files = fs.readdirSync(filepath);  files.forEach((filename) => {    let p = path.join(filepath, filename);    let stats = fs.statSync(p);    if (stats.isFile()) {      filepaths.push(p);    } else if (stats.isDirectory()) {      readFileSync(p);    }  });}function put(filepath) {  const p = filepath.replace(rootPath, "").substr(1);  return client.put(p.replace("\", "/"), filepath);}async function update() {  try {    // 递归获取所有待上传文件路径    readFileSync(rootPath);    let retAll = await filepaths.map((filepath) => {      putCount++;      console.log(`任务添加: ${path.basename(filepath)}`);      return put(filepath);    });    Promise.all(retAll).then((res) => {      const resAll = res.map((r) => {        return r.res.statusCode === 200;      });      if (Object.keys(resAll).length === putCount) {        console.log("发布成功");      }    });  } catch (e) {    console.log(e);  }}// 上传发布update();

use auto-push-oss

下面这份配置就是将网站打包并推送 OSS 的工作流程,当监测到新代码 PUSH 到 Github 后就开始执行auto-push-2-oss工作流,分别是:

    • 第一步使用actions/checkout@v2拉取代码;
    • 第二步执行npm install && npm run build安装依赖并输出网站资源;
    • 第三步使用OSpoon/auto-push-oss@main推送网站资源到 OSS;

auto-push-oss@main需要配置我们在自述文档中提到的几个必要参数需要通过 with 配置,其中accessKeyId和accessKeySecret由于涉及到 OSS 的相关秘钥,不建议也不应该明文展示到 Github,所以需要使用到项目级别的环境变量。

name: push-2-osson: [push]jobs:  auto-push-2-oss:    runs-on: ubuntu-latest    steps:      - name: checkout        uses: actions/checkout@v2      - name: install & build         run: npm install && npm run build      - name: push public oss        uses: OSpoon/auto-push-oss@main        with:          root: public          bucket: it200          region: oss-cn-beijing          accessKeyId: ${{secrets.accessKeyId}}          accessKeySecret: ${{secrets.accessKeySecret}}

总结

编写完 Action 后成功也接入了 workflows ,往后就不再重复的执行构建命令和发布脚本了,只需要将修改的代码 PUSH 到 Github 后面的工作将自动完成~

本文项目已推送至GitHub,欢迎克隆演示:git clone git@github.com:OSpoon/auto-push-oss.git

以上就是自定义 Github Action 库实战详解的详细内容