TypeScriptとSWCを使ってGitHubのJavaScript actionを作る

この記事では GitHub Actions の Custom action を JavaScript で実装する JavaScript action を TypeScript と SWC を使って実装した方法を書いてます。

モチベーション

• GitHub Actions の Workflows を共通化したい
• TypeScript でロジックを書きたい
• SWC を使いたい（ncc は tsc を使うので避けたい
• github-script は一定以上のボリュームがあるものには向かない
  • これを使いつつ UT を書いたりするとなると結構面倒になると思う

今回作るもの

Custom action のうちJavaScript actionを作成します。
実装コードは TypeScript、トランスパイラは SWC、バンドラは webpack を利用します。
バンドラを利用するのは、node_modules/ を Git で管理したくないためです。
ビルド成果物である dist/ は実行時に必要なため、Git で管理します。
（CI 上でビルドしてキャッシュさせておくことも出来ると思いますが、今回は扱いません）

確認環境

サンプルコード

Custom Actions 本体

Custom action 本体のサンプルコードです。以下に一式があります。
https://github.com/Lycolia/swc-ts-custom-actions-example

ディレクトリ構成

dist/ 配下を叩くため、ここは Git 管理に含めます。バンドルするので node_modules/ は Git 管理から外して問題ありません。

├─dist/
│ └─index.js        # Custom Actionsとして実行するファイル本体
├─node_modules/
├─src/
│ └─index.ts        # TypeScript実装
├─action.yaml       # Custom Actionsの定義
├─package-lock.json
├─package.json
├─swcrc-base.js     # SWVの設定
├─tsconfig.json     # tscの設定

└─webpack.config.js # webpackの設定

swcrc-base.js

SWC の設定例。特に JavaScript action のための設定はなく、CLI 向けのトランスパイルが出来る設定ならおｋ。
ファイル名は何でも大丈夫ですが、この場では .swcrc にしないことで、直接 SWC で利用しないことを判りやすくするために違う名前にしています。

module.exports = {
    module: {
        type: 'commonjs',
    },
    jsc: {
        target: 'es2020',
        parser: {
            syntax: 'typescript',
            tsx: false,
            decorators: false,
            dynamicImport: false,
        },
        baseUrl: '.',
        paths: {
            'src/*': ['src/*'],
        },
    },
};

webpack.config.js

SWC を使って .ts ファイルをバンドルするための設定。これがないと import の解決ができずにコケます。
node_modules/ 配下を Git 管理に含める場合は不要かもしれませんが、それをするのは微妙だと思います。

const path = require('path');
const swcrcBase = require(path.resolve(__dirname, 'swcrc-base'));

module.exports = {
    // エントリポイント
    entry: path.resolve(__dirname, 'src/index.ts'),
    // 出力設定
    output: {
        // クリーンアップ後に出力
        clean: true,
        // 出力ファイル名
        filename: 'index.js',
        // 出力パス
        path: path.resolve(__dirname, 'dist'),
    },
    // 設定必須なので何か指定しておく
    mode: 'production',
    // 指定してないとNode.jsのネイティブAPIが呼べない
    target: ['node'],
    module: {
        // swc-loaderの設定
        rules: [
            {
                test: /\.ts$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'swc-loader',
                    // swcrcの設定
                    options: {
                        ...swcrcBase,
                    },
                },
            },
        ],
    },
    resolve: {
        // import時のファイル拡張子を省略してる場合にパスを解決するための設定
        extensions: ['', '.ts', '.js'],
    },
};

src/index.ts

最低限これだけ確認できれば応用して実装できるだろうという程度のサンプルコード。

@actions/* 系の使い方は以下のリンクから確認できます。
actions/toolkit: The GitHub ToolKit for developing GitHub Actions.

import * as core from '@actions/core';
import * as github from '@actions/github';

const githubToken = core.getInput('GITHUB_TOKEN', { required: true });
const octokit = github.getOctokit(githubToken);

console.log('octokit', octokit);
console.log('context', github.context);
core.setOutput('RESULT_MESSAGE', 'test result message');

action.yaml

実装の参考例として引数と出力を定義してます。特に不要な場合は書かなくてもいいです。
Node.js のバージョンを詳細に指定したい場合は、composite action にすれば可能だとは思いますが、試してない。
composite action にして nvm か何かでインストールしてやれば恐らく可能。

構文は以下のページで確認できます。
GitHub Actions のメタデータ構文 – GitHub Docs

name: example
description: custom actions example
inputs:
  GITHUB_TOKEN:
    description: 'Repogitory GITHUB_TOKEN'
    required: true
outputs:
  RESULT_MESSAGE:
    description: 'Result message'
on:
  workflow_call:
runs:
  using: node16
  main: dist/index.js

Custom action を使う側

Custom action を使う Workflow のサンプルコードです。以下にソースがあります。
https://github.com/Lycolia/custom-actions-usage-example

.github/workflows/example.yaml

uses のところにはリポジトリの組織名と、リポジトリ名、action.yaml が配置されているディレクトリまでのパスを書きます。ルートディレクトリにある場合はパスを書かなくて OK
最後に @sha-hash でコミットハッシュかタグを付けてやれば呼べるようになります。
動作確認中はハッシュが頻繁に変わるので、最新のハッシュを取得してきて設定されるようにしておくと便利かもしれません。

name: run example
on:
  workflow_dispatch:
jobs:
  example:
    runs-on: ubuntu-latest
    steps:
      - name: run custom actions
        id: test
        uses: org-name/repo-name/path/to/file@sha-hash
        with:
          # Custom action側で定義されている引数(input)の設定
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      - name: show custom actions output
        # Custom action側で定義されている出力(output)の取得
        run: echo ${{ steps.test.outputs.RESULT_MESSAGE }}

参考資料

• Getting Started – SWC
  • swcrc の書き方や swc-loader の使い方
• Concepts | webpack
  • webpack の設定
• カスタム アクションについて – GitHub Docs
• GitHub Actions のメタデータ構文 – GitHub Docs
• プライベート リポジトリからのアクションとワークフローの共有 – GitHub Docs
• actions/toolkit: The GitHub ToolKit for developing GitHub Actions.
  • @actions/* 系のドキュメントなど

関連記事

TypeScript + SWC + Jestでexport方法別のspyOnするパターンを書いた Reactでより良い開発をするために意識したいこと webpackメモ：基本的なバンドル webpackメモ：バンドル内容をHTMLに注入する React + TSのformのonSubmitで値を取得 React + TS + Jestでカスタムフックのテストをする GitHub Actionsのワークフローで変数を利用する GitHub Actionsのpull_requestイベントのトリガーについてのメモ