TypeScript Custom GitHub Action Development Tips

Shohei Ueda 2024-05-16 JavaScript/TypeScript Action 開発・運用の知見を大公開！ 株式会社 AbemaTV, Shohei Ueda GitHub Actions Meetup Tokyo #3 AbemaTV, Inc. All Rights Reserved 1

INDEX ● 自己紹介 ● 便利ライブラリ ● ABEMA について ● リリース戦略 ● JavaScript/TypeScript ● Branch で実行させない Action ● ディレクトリ構成 ● 依存関係の定期更新 ● まとめ ● action.yml のテスト AbemaTV, Inc. All Rights Reserved 2

本日は JavaScript/TypeScript Action を開発・運用する上での 知見を紹介します！ (個人の OSS なので ABEMA の話はないです) AbemaTV, Inc. All Rights Reserved 3

JavaScript/TypeScript Action JavaScript/TypeScript でカスタム Action を書く AbemaTV, Inc. All Rights Reserved 4

JavaScript/TypeScript Action GitHub Actions は一連の処理をスクリ JavaScript で書けるので JS/TS 関連の資 プトとして使い回す手段がいくつかあり 産を活用することが可能です ます （もちろん TypeScript で書ける） その一つに uses: で指定して使える公開 Docker container として実行する方法も Action があります ありますが今日は JavaScript Action の （Custom Action） お話！ AbemaTV, Inc. All Rights Reserved 5

ディレクトリ構成 いたって普通です AbemaTV, Inc. All Rights Reserved 6

ディレクトリ構成 $ tree -d -a -L 2 -I .git . ├── .github │ ├── ISSUE_TEMPLATE │ └── workflows いたってふつうです 特に慣習もルールもないです (action.yml が必要とかはある) ├── .husky ├── .vscode ├── __tests__ │ └── classes ├── dist ├── scripts ./dist/ のように TypeScript からビ ルドした JavaScript を置くディレク トリがあったりするくらい └── src └── classes AbemaTV, Inc. All Rights Reserved 7

action.yml のテスト ソースコード同様にテストしてあげましょう AbemaTV, Inc. All Rights Reserved 8

action.yml のテスト AbemaTV, Inc. All Rights Reserved 9

action.yml のテスト with: で渡した inputs は INPUT_* の形式で環境変数として提供さ れます。 default 値などをテストしています https://github.com/peaceiris/actions-gh-pages/blob/0b7567fde6f7517edcc13d8ffa2d89cd 8734d47c/__tests__/get-inputs.test.ts#L103 AbemaTV, Inc. All Rights Reserved 10

• https://github.com/peaceiris/actions-gh-pages/blob/0b7567fde6f7517edcc13d8ffa2d89cd8734d47c/__tests__/get-inputs.test.ts#L103

便利ライブラリ JavaScript/TypeScript Action 開発を便利に！ AbemaTV, Inc. All Rights Reserved 11

便利ライブラリ @actions (actions/toolkit) @octokit ● @actions/core ● @octokit/graphql ● @actions/exec ● … ● @actions/github ● @actions/glob その他 ● @actions/io ● @vercel/ncc: ビルド ● … ● js-yaml など JavaScript 資産 JavaScript Action 開発に便利！ AbemaTV, Inc. All Rights Reserved 12

• https://github.com/actions/toolkit
• https://github.com/octokit
• https://github.com/vercel/ncc

リリース戦略 v3.0.0, v3, 75d2e84710de30f6ff7268e08f310b60ef14033f AbemaTV, Inc. All Rights Reserved 13

リリース戦略 Action の実行方法として以下を提供 1. GitHub Release を作成したタイミン グで v1.2.3 の git tag を作成 ● v3.0.0 ● v3 ● 75d2e84710de30f6ff7268e08f 310b60ef14033f 2. v1.2.3 git tag が作成された時に v1 major git tag を更新 JavaScript のビルドや major tag の更新 はスクリプトや workflow で自動化してま す AbemaTV, Inc. All Rights Reserved 14

リリース戦略 - major tag 更新する workflow AbemaTV, Inc. All Rights Reserved 15

Branch で実行させない ユーザーにベストプラクティスを提供する AbemaTV, Inc. All Rights Reserved 16

Branch で実行させない 常に実行エンドポイント そこで以下のような方法がとれます dist/index.js を main branch など で利用可能にすると main branch 1. リリースの git tag でのみ 指定でユーザーは action を利用で dist/index.js を含める きてしまう！ 2. リリースの git tag でのみ action.yml の runs.main を正し 後方互換性のない破壊的変更を入れ いものにする た場合に困る 😢 AbemaTV, Inc. All Rights Reserved 17

依存関係の定期更新 Dependabot, Renovate AbemaTV, Inc. All Rights Reserved 18

依存関係の定期更新 他のプロジェクト同様に そこで、先ほどの dist/index.js を Dependabot / Renovate を用いて Renovate pull-request で更新して 依存関係を定期的に更新しています います 結構 pull-request 多いので確認す 差分が出るような更新であれば Files るの大変です 😇 changed に出るのでどのような変更 があるか確認できます！（読めるとは 言ってない） AbemaTV, Inc. All Rights Reserved 19

依存関係の定期更新 - 差分を確認する AbemaTV, Inc. All Rights Reserved 20

まとめ まい泉のミニバーガーおいしい AbemaTV, Inc. All Rights Reserved 21

まとめ JavaScript/TypeScript でカスタ JavaScript/TypeScript Action を ム Action を書けます！ 開発するのに便利なライブラリがあり ます！ JavaScript/TypeScript 資産を活 用でき、開発環境も同様に整備でき Action を利用するベストプラクティ ます！ スを考慮したリリース戦略を採用する と Good 👍 AbemaTV, Inc. All Rights Reserved 22

Thank you! peaceiris.com AbemaTV, Inc. All Rights Reserved 23

• http://peaceiris.com