TypeScript Custom GitHub Action Development Tips

GitHub Actions における JavaScript/TypeScript Custom Action の開発・運用知見を紹介します！

2024-05-16 GitHub Actions Meetup Tokyo #3 にて発表
https://gaugt.connpass.com/event/317178/
会場：株式会社サイバーエージェント Abema Towers

YouTube 配信アーカイブ
https://www.youtube.com/watch?v=mR684-oSAJw

Transcript

1. AbemaTV, Inc. All Rights Reserved
 AbemaTV, Inc. All Rights Reserved
 1 JavaScript/TypeScript Action 開発・運用の知見を大公開！ 2024-05-16 株式会社 AbemaTV, Shohei Ueda GitHub Actions Meetup Tokyo #3 Shohei Ueda
2. AbemaTV, Inc. All Rights Reserved
 2 • 自己紹介 • ABEMA について • JavaScript/TypeScript Action • ディレクトリ構成 • action.yml のテスト INDEX • 便利ライブラリ • リリース戦略 • Branch で実行させない • 依存関係の定期更新 • まとめ
3. AbemaTV, Inc. All Rights Reserved
 本日は JavaScript/TypeScript Action を開発・運用する上での 知見を紹介します！ 3 (個人の OSS なので ABEMA の話はないです)
4. AbemaTV, Inc. All Rights Reserved
 JavaScript/TypeScript Action 4 JavaScript/TypeScript でカスタム Action を書く
5. AbemaTV, Inc. All Rights Reserved
 5 GitHub Actions は一連の処理をスクリ プトとして使い回す手段がいくつかあり ます その一つに uses: で指定して使える公開 Action があります （Custom Action） JavaScript/TypeScript Action JavaScript で書けるので JS/TS 関連の資 産を活用することが可能です （もちろん TypeScript で書ける） Docker container として実行する方法も ありますが今日は JavaScript Action の お話！
6. AbemaTV, Inc. All Rights Reserved
 ディレクトリ構成 6 いたって普通です
7. AbemaTV, Inc. All Rights Reserved
 7 $ tree -d -a -L 2 -I .git . ├── .github │ ├── ISSUE_TEMPLATE │ └── workflows ├── .husky ├── .vscode ├── __tests__ │ └── classes ├── dist ├── scripts └── src └── classes ディレクトリ構成 いたってふつうです 特に慣習もルールもないです (action.yml が必要とかはある) ./dist/ のように TypeScript からビ ルドした JavaScript を置くディレク トリがあったりするくらい
8. AbemaTV, Inc. All Rights Reserved
 action.yml のテスト 8 ソースコード同様にテストしてあげましょう
9. AbemaTV, Inc. All Rights Reserved
 9 action.yml のテスト
10. AbemaTV, Inc. All Rights Reserved
 10 action.yml のテスト with: で渡した inputs は INPUT_* の形式で環境変数として提供さ れます。 default 値などをテストしています https://github.com/peaceiris/actions-gh-pages/blob/0b7567fde6f7517edcc13d8ffa2d89cd 8734d47c/__tests__/get-inputs.test.ts#L103
11. AbemaTV, Inc. All Rights Reserved
 便利ライブラリ 11 JavaScript/TypeScript Action 開発を便利に！
12. AbemaTV, Inc. All Rights Reserved
 12 @actions (actions/toolkit) • @actions/core • @actions/exec • @actions/github • @actions/glob • @actions/io • … JavaScript Action 開発に便利！ 便利ライブラリ @octokit • @octokit/graphql • … その他 • @vercel/ncc: ビルド • js-yaml など JavaScript 資産
13. AbemaTV, Inc. All Rights Reserved
 リリース戦略 13 v3.0.0, v3, 75d2e84710de30f6ff7268e08f310b60ef14033f
14. AbemaTV, Inc. All Rights Reserved
 14 Action の実行方法として以下を提供 • v3.0.0 • v3 • 75d2e84710de30f6ff7268e08f 310b60ef14033f リリース戦略 1. GitHub Release を作成したタイミン グで v1.2.3 の git tag を作成 2. v1.2.3 git tag が作成された時に v1 major git tag を更新 JavaScript のビルドや major tag の更新 はスクリプトや workflow で自動化してま す
15. AbemaTV, Inc. All Rights Reserved
 15 リリース戦略 - major tag 更新する workflow
16. AbemaTV, Inc. All Rights Reserved
 Branch で実行させない 16 ユーザーにベストプラクティスを提供する
17. AbemaTV, Inc. All Rights Reserved
 17 常に実行エンドポイント dist/index.js を main branch など で利用可能にすると main branch 指定でユーザーは action を利用で きてしまう！ 後方互換性のない破壊的変更を入れ た場合に困る 😢 Branch で実行させない そこで以下のような方法がとれます 1. リリースの git tag でのみ dist/index.js を含める 2. リリースの git tag でのみ action.yml の runs.main を正し いものにする
18. AbemaTV, Inc. All Rights Reserved
 依存関係の定期更新 18 Dependabot, Renovate
19. AbemaTV, Inc. All Rights Reserved
 19 他のプロジェクト同様に Dependabot / Renovate を用いて 依存関係を定期的に更新しています 結構 pull-request 多いので確認す るの大変です 😇 依存関係の定期更新 そこで、先ほどの dist/index.js を Renovate pull-request で更新して います 差分が出るような更新であれば Files changed に出るのでどのような変更 があるか確認できます！（読めるとは 言ってない）
20. AbemaTV, Inc. All Rights Reserved
 20 依存関係の定期更新 - 差分を確認する
21. AbemaTV, Inc. All Rights Reserved
 まとめ 21 まい泉のミニバーガーおいしい
22. AbemaTV, Inc. All Rights Reserved
 22 JavaScript/TypeScript でカスタ ム Action を書けます！ JavaScript/TypeScript 資産を活 用でき、開発環境も同様に整備でき ます！ まとめ JavaScript/TypeScript Action を 開発するのに便利なライブラリがあり ます！ Action を利用するベストプラクティ スを考慮したリリース戦略を採用する と Good 👍
23. AbemaTV, Inc. All Rights Reserved
 Thank you! 23 peaceiris.com